From a7fb50c91e4932aa175be266fbdd42b2a70eba66 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期三, 22 五月 2024 18:11:11 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
admin/src/components/common/RichEditor.vue | 234 +++++++++++++++++++++++++++++----------------------------
1 files changed, 119 insertions(+), 115 deletions(-)
diff --git a/admin/src/components/common/RichEditor.vue b/admin/src/components/common/RichEditor.vue
index 0c56289..7ed7fdc 100644
--- a/admin/src/components/common/RichEditor.vue
+++ b/admin/src/components/common/RichEditor.vue
@@ -1,158 +1,162 @@
<template>
- <div style="border: 1px solid #ccc;">
+ <div class="wang_editor">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editor"
- :defaultConfig="toolbarConfig"
+ :default-config="toolbarConfig"
:mode="mode"
/>
<Editor
- style="height: 300px; overflow-y: hidden;"
- :value="content.content"
+ v-model="html"
+ style="min-height: 200px"
+ :default-config="editorConfig"
:mode="mode"
- :defaultConfig="editorConfig"
@onCreated="onCreated"
- @onChange="onChange"
- @input="html=$event"
/>
</div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import '@wangeditor/editor/dist/css/style.css'
+import axios from 'axios'
+
+import { uploadFile } from '@/api'
+
+const uploadConfig = {
+ action: uploadFile, // 蹇呭～鍙傛暟 鍥剧墖涓婁紶鍦板潃
+ methods: 'POST', // 蹇呭～鍙傛暟 鍥剧墖涓婁紶鏂瑰紡
+ token: '', // 鍙�夊弬鏁� 濡傛灉闇�瑕乼oken楠岃瘉锛屽亣璁句綘鐨則oken鏈夊瓨鏀惧湪sessionStorage
+ name: 'file', // 蹇呭～鍙傛暟 鏂囦欢鐨勫弬鏁板悕
+ size: 500, // 鍙�夊弬鏁� 鍥剧墖澶у皬锛屽崟浣嶄负Kb, 1M = 1024Kb
+ accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon' // 鍙�� 鍙笂浼犵殑鍥剧墖鏍煎紡
+}
export default {
- name: 'RichEditor',
- components: { Editor, Toolbar },
+ components: {
+ Editor,
+ Toolbar
+ },
props: {
- content: {
- type: Object,
- default: () => {}
+ info: {
+ type: String,
+ default: ''
+ },
+ default: {
+ type: String,
+ default: ''
+ },
+ placeholder: {
+ type: String,
+ default: '璇疯緭鍏ュ唴瀹�...'
}
},
- data() {
+ data () {
return {
editor: null,
- html: '<p><br></p>',
- toolbarConfig: {
- toolbarKeys: [
- "headerSelect",
- "blockquote",
- "|",
- "bold",
- "underline",
- "italic",
- {
- "key": "group-more-style",
- "title": "鏇村",
- "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path><path d=\"M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path><path d=\"M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path></svg>",
- "menuKeys": [
- "through",
- "code",
- "sup",
- "sub",
- "clearStyle"
- ]
- },
- "color",
- "bgColor",
- "|",
- "fontSize",
- "fontFamily",
- "lineHeight",
- "|",
- "bulletedList",
- "numberedList",
- "todo",
- {
- "key": "group-justify",
- "title": "瀵归綈",
- "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z\"></path></svg>",
- "menuKeys": [
- "justifyLeft",
- "justifyRight",
- "justifyCenter",
- "justifyJustify"
- ]
- },
- {
- "key": "group-indent",
- "title": "缂╄繘",
- "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z\"></path></svg>",
- "menuKeys": [
- "indent",
- "delIndent"
- ]
- },
- // "|",
- "emotion",
- "insertLink",
- {
- "key": "group-image",
- "title": "鍥剧墖",
- "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z\"></path></svg>",
- "menuKeys": [
- "insertImage",
- "uploadImage"
- ]
- },
- "insertTable",
- "codeBlock",
- "divider",
- "|",
- "undo",
- "redo",
- "|",
- "fullScreen"
- ]
- },
+ toolbarConfig: {},
editorConfig: {
- placeholder: '璇疯緭鍏ュ唴瀹�...',
+ placeholder: this.placeholder,
MENU_CONF: {
uploadImage: {
- // server: '/api/upload',
- name: 'file',
- server: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/uploadLocal',
+ html: this.info,
+ server: uploadFile,
+ // 鍗曚釜鏂囦欢鐨勬渶澶т綋绉檺鍒讹紝榛樿涓� 2M
+ maxFileSize: 5 * 1024 * 1024, // 1M
+ // 閫夋嫨鏂囦欢鏃剁殑绫诲瀷闄愬埗锛岄粯璁や负 ['image/*'] 銆傚涓嶆兂闄愬埗锛屽垯璁剧疆涓� []
+ allowedFileTypes: ['image/*'],
+ // 鑷畾涔変笂浼犲弬鏁帮紝渚嬪浼犻�掗獙璇佺殑 token 绛夈�傚弬鏁颁細琚坊鍔犲埌 formData 涓紝涓�璧蜂笂浼犲埌鏈嶅姟绔�
meta: {
- folder: 'shop'
+ token: '',
+ otherKey: '',
+ folder: 'COURSE_IMG'
},
- onBeforeUpload(file) { // JS 璇硶
- // file 閫変腑鐨勬枃浠讹紝鏍煎紡濡� { key: file }
- // debugger
- return file
+ // 鑷畾涔夊鍔� http header
+ headers: {
+ token: localStorage.getItem('token') || ''
+ // Accept: 'text/x-json',
+ // otherKey: 'xxx'
},
- onSuccess(file, res) {
- console.log(`${file.name} 涓婁紶鎴愬姛`, res)
+ // 璺ㄥ煙鏄惁浼犻�� cookie 锛岄粯璁や负 false
+ withCredentials: true,
+ // 瓒呮椂鏃堕棿锛岄粯璁や负 10 绉�
+ timeout: 5 * 1000, // 5 绉�
+ onSuccess (file, res) { // TS 璇硶
+ // onSuccess(file, res) { // JS 璇硶
+ console.log(`${file.name} 涓婁紶鎴愬姛`, res)
},
- onError(file, err, res) {
- console.log(`${file.name} 涓婁紶鍑洪敊`, err, res)
- },
- },
+ customUpload (file, insertFn) { // TS 璇硶
+ // file 鍗抽�変腑鐨勬枃浠�
+ // 鑷繁瀹炵幇涓婁紶锛屽苟寰楀埌鍥剧墖 url alt href
+ // var form = new FormData()
+ // form.append('image', file)
+ // form.append('folder', 'COURSE_IMG')
+ var formData = new FormData()
+ formData.append(file.name, file)
+ formData.append('image', file)
+ formData.append('folder', 'member')
+ // formData.append('type', '')
+ var xhr = new XMLHttpRequest()
+ xhr.open(uploadConfig.methods, uploadConfig.action, true)
+ // 涓婁紶鏁版嵁鎴愬姛锛屼細瑙﹀彂
+ xhr.send(formData)
+ xhr.onreadystatechange = () => {
+ // 鑻ュ搷搴斿畬鎴愪笖璇锋眰鎴愬姛
+ if (xhr.readyState === 4 && xhr.status === 200) {
+ const result = JSON.parse(xhr.responseText)
+ console.log('result', result);
+ insertFn(result.data.url, '', result.data.url)
+ }
+ }
+ },
+ customInsert (res, insertFn) { // TS 璇硶
+ // customInsert(res, insertFn) { // JS 璇硶
+ // res 鍗虫湇鍔＄鐨勮繑鍥炵粨鏋�
+ console.log(res.data.url)
+ // 浠� res 涓壘鍒� url alt href 锛岀劧鍚庢彃鍏ュ浘鐗�
+ insertFn(res.url)
+ }
+ }
}
},
- mode: 'default', // or 'simple'
+ mode: 'default' // or 'simple'
}
},
- beforeDestroy() {
+ emits: ['input'],
+ computed: {
+ html: {
+ get () {
+ return this.info || ''
+ },
+ set (newValue) {
+ this.$emit('input', newValue)
+ }
+ }
+ },
+ mounted () {
+ setTimeout(() => {
+ this.info = this.default
+ }, 1200)
+ },
+ beforeDestroy () {
const editor = this.editor
if (editor == null) return
editor.destroy() // 缁勪欢閿�姣佹椂锛屽強鏃堕攢姣佺紪杈戝櫒
},
methods: {
onCreated (editor) {
- this.editor = Object.seal(editor)
+ this.editor = Object.seal(editor) // 涓�瀹氳鐢� Object.seal() 锛屽惁鍒欎細鎶ラ敊
+ this.$emit('input', '123123')
},
- onChange (editor) {
- console.log(this.html);
- // debugger
- if (!this.html||this.content.content==this.html) {
- return
- }
- this.$emit('edit', this.html)
- },
- },
-
+ test () {
+ console.log(this.info)
+ }
+ }
}
</script>
-<style src="@wangeditor/editor/dist/css/style.css"></style>
+<style lang="scss" scoped>
+.wang_editor {
+ border: 1px solid;
+}
+</style>
--
Gitblit v1.9.3