From bdad06349901c13f8ce2c9381a3ace2b7f80c652 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期二, 11 三月 2025 14:33:28 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
admin/src/components/common/RichEditor.vue | 426 ++++++++++++++++++++++++++++++++++++----------------
1 files changed, 293 insertions(+), 133 deletions(-)
diff --git a/admin/src/components/common/RichEditor.vue b/admin/src/components/common/RichEditor.vue
index 0c56289..81249a5 100644
--- a/admin/src/components/common/RichEditor.vue
+++ b/admin/src/components/common/RichEditor.vue
@@ -1,158 +1,318 @@
<template>
- <div style="border: 1px solid #ccc;">
- <Toolbar
- style="border-bottom: 1px solid #ccc"
- :editor="editor"
- :defaultConfig="toolbarConfig"
- :mode="mode"
- />
- <Editor
- style="height: 300px; overflow-y: hidden;"
- :value="content.content"
- :mode="mode"
- :defaultConfig="editorConfig"
- @onCreated="onCreated"
- @onChange="onChange"
- @input="html=$event"
- />
+ <div :style="styleEditor">
+ <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
+ <Editor style="min-height: 80px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode"
+ @onCreated="onCreated" @onChange="onChange" />
</div>
</template>
-
+<style src="@wangeditor/editor/dist/css/style.css"></style>
<script>
+import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
-export default {
- name: 'RichEditor',
- components: { Editor, Toolbar },
+import { Loading } from 'element-ui';
+let loadingInstance = null
+export default Vue.extend({
props: {
- content: {
- type: Object,
- default: () => {}
- }
+ richData: { // 鐖剁粍浠朵紶閫掔殑鏁版嵁
+ type: String,
+ default: ''
+ },
+ styleEditor: '',
+ readonly: false, // 鏄惁鍙互杈撳叆
},
+ name:'RichEditor',
+ components: { Editor, Toolbar },
data() {
return {
editor: null,
- html: '<p><br></p>',
- toolbarConfig: {
- toolbarKeys: [
- "headerSelect",
- "blockquote",
- "|",
- "bold",
- "underline",
- "italic",
+ html: '',
+ toolbarConfig: { // 宸ュ叿鏍忛厤缃�
+ toolbarKeys: this.readonly ? ["fullScreen"]: [ // 鏄剧ず鎸囧畾鐨勮彍鍗曢」
+ "bold", // 绮椾綋
+ "underline", // 涓嬪垝绾�
+ "italic", // 鏂滀綋
+ "through", // 鍒犻櫎绾�
+ "code", // 琛屽唴浠ｇ爜
+ "sub", // 涓嬫爣
+ "sup", // 涓婃爣
+ "clearStyle", // 娓呴櫎鏍煎紡
+ "color", // 瀛椾綋棰滆壊
+ "bgColor", // 鑳屾櫙鑹�
+ "fontSize", // 瀛楀彿
+ "fontFamily", // 瀛椾綋
+ "indent", // 澧炲姞缂╄繘
+ "delIndent", // 鍑忓皯缂╄繘
+ "justifyLeft", // 宸﹀榻�
+ "justifyRight", // 鍙冲榻�
+ "justifyCenter", // 灞呬腑瀵归綈
+ "justifyJustify", // 涓ょ瀵归綈
+ "lineHeight", // 琛岄珮
+ // "viewImageLink", // 鏌ョ湅閾炬帴
+ "divider", // 鍒嗗壊绾�
+ "emotion", // 琛ㄦ儏
+ "insertLink", // 鎻掑叆閾炬帴
+ // "editLink", // 淇敼閾炬帴
+ // "unLink", // 鍙栨秷閾炬帴
+ // "viewLink", // 鏌ョ湅閾炬帴
+ "codeBlock", // 浠ｇ爜鍧�
+ "blockquote", // 寮曠敤
+ "headerSelect", // 鏍囬
+ // "header1", // 鏍囬1
+ // "header2", // 鏍囬2
+ // "header3", // 鏍囬3
+ // "header4", // 鏍囬4
+ // "header5", // 鏍囬5
+ // "todo", // 寰呭姙
+ "redo", // 閲嶅仛
+ "undo", // 鎾ら攢
+ // "enter", // 鍥炶溅
+ // "bulletedList", // 鏃犲簭鍒楄〃
+ // "numberedList", // 鏈夊簭鍒楄〃
+ // "codeSelectLang" // 閫夋嫨璇█
+ // 琛ㄦ牸鍔熻兘鍒嗙粍
+ /* {
+ key: 'table-style', // 蹇呭～锛岃浠� group 寮�澶�
+ title: '琛ㄦ牸', // 蹇呭～
+ // iconSvg: '<svg>....</svg>', // 鍙��
+ menuKeys: [
+ "insertTable", // 鎻掑叆琛ㄦ牸
+ "deleteTable", // 鍒犻櫎琛ㄦ牸
+ "insertTableRow", // 鎻掑叆琛�
+ "deleteTableRow", // 鍒犻櫎琛�
+ "insertTableCol", // 鎻掑叆鍒�
+ "deleteTableCol", // 鍒犻櫎鍒�
+ "tableHeader", // 琛ㄥご
+ "tableFullWidth", // 瀹藉害鑷�傚簲
+ ] // 涓嬬骇鑿滃崟 key 锛屽繀濉�
+ },*/
+ // 涓婁紶鍥剧墖鍒嗙粍
{
- "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"
- ]
+ key: 'img-style', // 蹇呭～锛岃浠� group 寮�澶�
+ title: '鍥剧墖', // 蹇呭～
+ // iconSvg: '<svg>....</svg>', // 鍙��
+ menuKeys: [
+ "uploadImage", // 涓婁紶鍥剧墖
+ "insertImage", // 缃戠粶鍥剧墖
+ "deleteImage", // 鍒犻櫎鍥剧墖
+ "editImage", // 缂栬緫鍥剧墖
+ "imageWidth30", // 鍥剧墖瀹藉害鐩稿浜庣紪杈戝櫒瀹藉害鐨勭櫨鍒嗘瘮30
+ "imageWidth50", // 鍥剧墖瀹藉害鐩稿浜庣紪杈戝櫒瀹藉害鐨勭櫨鍒嗘瘮50
+ "imageWidth100", // 鍥剧墖瀹藉害鐩稿浜庣紪杈戝櫒瀹藉害鐨勭櫨鍒嗘瘮100
+ ] // 涓嬬骇鑿滃崟 key 锛屽繀濉�
},
- "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: 'video-style', // 蹇呭～锛岃浠� group 寮�澶�
+ title: '瑙嗛', // 蹇呭～
+ // iconSvg: '<svg>....</svg>', // 鍙��
+ menuKeys: [
+ "insertVideo", // 鎻掑叆缃戠粶瑙嗛
+ "uploadVideo", // 涓婁紶瑙嗛
+ "editVideoSize", // 淇敼瑙嗛灏哄
+ ] // 涓嬬骇鑿滃崟 key 锛屽繀濉�
},
- {
- "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"
- ]
- },
- editorConfig: {
- placeholder: '璇疯緭鍏ュ唴瀹�...',
- MENU_CONF: {
- uploadImage: {
- // server: '/api/upload',
- name: 'file',
- server: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/uploadLocal',
- meta: {
- folder: 'shop'
- },
- onBeforeUpload(file) { // JS 璇硶
- // file 閫変腑鐨勬枃浠讹紝鏍煎紡濡� { key: file }
- // debugger
- return file
- },
- onSuccess(file, res) {
- console.log(`${file.name} 涓婁紶鎴愬姛`, res)
- },
- onError(file, err, res) {
- console.log(`${file.name} 涓婁紶鍑洪敊`, err, res)
- },
- },
+ "fullScreen", // 鍏ㄥ睆
+ ],
+ excludeKeys: [ // 闅愯棌鎸囧畾鐨勮彍鍗曢」
+ // 'headerSelect',
+ // 'video-style'
+ // 鎺掗櫎鑿滃崟缁勶紝鍐欒彍鍗曠粍 key 鐨勫�煎嵆鍙�
+ ],
+ },
+ editorConfig: { // 缂栬緫鍣ㄩ厤缃�
+ placeholder: '璇疯緭鍏ュ唴瀹�...',
+ readOnly: this.readonly, // 鏄惁鍙锛岄粯璁alse
+ autoFocus: false, // 鏄惁鑷姩focus锛岄粯璁や负true
+ scroll: true, // 閰嶇疆缂栬緫鍣ㄦ槸鍚︽敮鎸佹粴鍔紝榛樿涓� true 銆傛敞鎰忥紝姝ゆ椂涓嶈鍥哄畾 editor-container 鐨勯珮搴︼紝璁剧疆涓�涓� min-height 鍗冲彲銆�
+ maxLength: 20000, // 鏈�澶ч檺鍒讹紝閬垮厤鍐呭杩囧鍗￠】
+ MENU_CONF: {
+ // 鍥剧墖涓婁紶
+ uploadImage: {
+ server: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/upload?folder=richeditor',
+ fieldName: 'file',
+ // 鍗曚釜鏂囦欢鐨勬渶澶т綋绉檺鍒讹紝榛樿涓� 2M
+ maxFileSize: 10 * 1024 * 1024, // 10M
+ // 鏈�澶氬彲涓婁紶鍑犱釜鏂囦欢锛岄粯璁や负 100
+ maxNumberOfFiles: 10,
+ // 閫夋嫨鏂囦欢鏃剁殑绫诲瀷闄愬埗锛岄粯璁や负 ['image/*'] 銆傚涓嶆兂闄愬埗锛屽垯璁剧疆涓� []
+ allowedFileTypes: ['image/*'],
+ // 鑷畾涔変笂浼犲弬鏁帮紝渚嬪浼犻�掗獙璇佺殑 token 绛夈�傚弬鏁颁細琚坊鍔犲埌 formData 涓紝涓�璧蜂笂浼犲埌鏈嶅姟绔��
+ meta: {
+ },
+ // 灏� meta 鎷兼帴鍒� url 鍙傛暟涓紝榛樿 false
+ metaWithUrl: false,
+ // 鑷畾涔夊鍔� http header
+ // headers: { Authorization: "Bearer " + getToken() },
+ // 璺ㄥ煙鏄惁浼犻�� cookie 锛岄粯璁や负 false
+ withCredentials: true,
+ // 瓒呮椂鏃堕棿锛岄粯璁や负 10 绉�
+ timeout: 10 * 1000, //10 绉�
+ // 涓婁紶鍓�
+ onBeforeUpload(files) {
+ loadingInstance = Loading.service({
+ lock: true,
+ text: '涓婁紶涓�...',
+ spinner: 'el-icon-loading',
+ background: 'rgba(0, 0, 0, 0.7)'
+ });
+ return files;
+ },
+ // 鑷畾涔夋彃鍏ュ浘鐗�
+ customInsert(res, insertFn) {
+ console.log(res);
+ // 鍥犱负鑷畾涔夋彃鍏ュ鑷磑nSuccess涓巓nFailed鍥炶皟鍑芥暟涓嶈捣浣滅敤,鑷繁鎵嬪姩澶勭悊
+ // 鍏堝叧闂瓑寰呯殑Message
+ loadingInstance = Loading.service({
+ lock: true,
+ text: '涓婁紶涓�...',
+ spinner: 'el-icon-loading',
+ background: 'rgba(0, 0, 0, 0.7)'
+ }).close();
+ if (res.code === 200) {
+ // Message.success({
+ // message: `${res.data.originalName} 涓婁紶鎴愬姛`
+ // });
+ } else {
+ // Message.error({
+ // message: `${res.data.originalName} 涓婁紶澶辫触锛岃閲嶆柊灏濊瘯`
+ // });
+ }
+ insertFn(res.data.url, res.data.originname, res.data.imgname);
+ },
+
+ // 鍗曚釜鏂囦欢涓婁紶鎴愬姛涔嬪悗
+ onSuccess(file, res) {
+ console.log(`${file.originalFilename} 涓婁紶鎴愬姛`, res);
+ },
+ // 鍗曚釜鏂囦欢涓婁紶澶辫触
+ onFailed(file, res) {
+ console.log(`${file.originalFilename} 涓婁紶澶辫触`, res);
+ loadingInstance.close();
+ },
+ // 涓婁紶杩涘害鐨勫洖璋冨嚱鏁�
+ onProgress(progress) {
+ console.log('progress', progress);
+ // progress 鏄� 0-100 鐨勬暟瀛�
+ },
+ // 涓婁紶閿欒锛屾垨鑰呰Е鍙� timeout 瓒呮椂
+ onError(file, err, res) {
+ loadingInstance.close();
+ console.log(`${file.originalFilename} 涓婁紶鍑洪敊`, err, res);
+ }
+ },
+ // 瑙嗛涓婁紶
+ uploadVideo: {
+ fieldName: 'file',
+ server: process.env.VUE_APP_API_PREFIX + '/public/upload?folder=richeditor',
+ // 鍗曚釜鏂囦欢鐨勬渶澶т綋绉檺鍒讹紝榛樿涓� 10M
+ maxFileSize: 50 * 1024 * 1024, // 50M
+ // 鏈�澶氬彲涓婁紶鍑犱釜鏂囦欢锛岄粯璁や负 5
+ maxNumberOfFiles: 3,
+ // 閫夋嫨鏂囦欢鏃剁殑绫诲瀷闄愬埗锛岄粯璁や负 ['video/*'] 銆傚涓嶆兂闄愬埗锛屽垯璁剧疆涓� []
+ allowedFileTypes: ['video/*'],
+ // 鑷畾涔変笂浼犲弬鏁帮紝渚嬪浼犻�掗獙璇佺殑 token 绛夈�傚弬鏁颁細琚坊鍔犲埌 formData 涓紝涓�璧蜂笂浼犲埌鏈嶅姟绔��
+ meta: {
+ // token: 'xxx',
+ // otherKey: 'yyy'
+ },
+ // 灏� meta 鎷兼帴鍒� url 鍙傛暟涓紝榛樿 false
+ metaWithUrl: false,
+
+ // 鑷畾涔夊鍔� http header
+ headers: {
+ // Authorization: "Bearer " + getToken()
+ // otherKey: 'xxx'
+ },
+ // 璺ㄥ煙鏄惁浼犻�� cookie 锛岄粯璁や负 false
+ withCredentials: true,
+ // 瓒呮椂鏃堕棿锛岄粯璁や负 30 绉�
+ timeout: 1000 * 1000, // 1000 绉�,
+ // 涓婁紶涔嬪墠瑙﹀彂
+ onBeforeUpload(file) {
+ return file;
+ },
+ // 鑷畾涔夋彃鍏ヨ棰�
+ customInsert(res, insertFn) {
+ // 鍥犱负鑷畾涔夋彃鍏ュ鑷磑nSuccess涓巓nFailed鍥炶皟鍑芥暟涓嶈捣浣滅敤,鑷繁鎵嬪姩澶勭悊
+ // 鍏堝叧闂瓑寰呯殑Message
+ // Message.closeAll();
+ if (res.code === 200) {
+ // Message.success({
+ // message: `${res.data.originalName} 涓婁紶鎴愬姛`
+ // });
+ } else {
+ // Message.error({
+ // message: `${res.data.originalName} 涓婁紶澶辫触锛岃閲嶆柊灏濊瘯`
+ // });
+ }
+ insertFn(res.data.url, res.data.url);
+ },
+ // 涓婁紶杩涘害鐨勫洖璋冨嚱鏁�
+ onProgress(progress) {
+ console.log(progress);
+ // onProgress(progress) { // JS 璇硶
+ // progress 鏄� 0-100 鐨勬暟瀛�
+ },
+ // // 鍗曚釜鏂囦欢涓婁紶鎴愬姛涔嬪悗
+ // onSuccess(file, res) {
+ // console.log(`${file.name} 涓婁紶鎴愬姛`, res);
+ // this.successMsg(file);
+ // },
+ // // 鍗曚釜鏂囦欢涓婁紶澶辫触
+ // onFailed(file, res) {
+ // console.log(`${file.name} 涓婁紶澶辫触`, res);
+ // this.errorMsg(file);
+ // },
+ // 涓婁紶閿欒锛屾垨鑰呰Е鍙� timeout 瓒呮椂
+ onError(file, err, res) {
+ console.log(`${file.name} 涓婁紶鍑洪敊`, err, res);
+ // Notification.error({
+ // title: '閿欒',
+ // message: `${file.name} 涓婁紶澶辫触锛岃閲嶆柊灏濊瘯`
+ // });
+ }
+ }
}
},
mode: 'default', // or 'simple'
}
},
+ watch: {
+ richData: function (value) {
+ this.html = value
+ },
+ readonly: function (value) {
+ this.readonly = value
+ },
+ styleEditor: function (value) {
+ this.styleEditor = value
+ },
+ },
+ mounted() {
+ // 闇�瑕佸湪缂栬緫鍣ㄥ垱寤哄畬姣曞悗鍦ㄨ祴鍊�
+ this.$nextTick(()=>{
+ this.html = this.richData
+ })
+ },
+ methods: {
+ // 缂栬緫鍣ㄥ垱寤哄畬姣曟椂鐨勫洖璋冨嚱鏁�
+ onCreated(editor) {
+ this.editor = Object.seal(editor) // 涓�瀹氳鐢� Object.seal() 锛屽惁鍒欎細鎶ラ敊
+ },
+ // 缂栬緫鍣ㄥ唴瀹广�侀�夊尯鍙樺寲鏃剁殑鍥炶皟鍑芥暟
+ onChange(editor) {
+ this.$emit('getWangedditor', editor.getHtml())
+ console.log("onChange", editor.getHtml()); // onChange 鏃惰幏鍙栫紪杈戝櫒鏈�鏂板唴瀹�
+ },
+ },
beforeDestroy() {
+ // 缂栬緫鍣ㄩ攢姣佹椂鐨勫洖璋冨嚱鏁般�傝皟鐢� editor.destroy() 鍗冲彲閿�姣佺紪杈戝櫒
const editor = this.editor
if (editor == null) return
editor.destroy() // 缁勪欢閿�姣佹椂锛屽強鏃堕攢姣佺紪杈戝櫒
- },
- methods: {
- onCreated (editor) {
- this.editor = Object.seal(editor)
- },
- onChange (editor) {
- console.log(this.html);
- // debugger
- if (!this.html||this.content.content==this.html) {
- return
- }
- this.$emit('edit', this.html)
- },
- },
-
-}
+ }
+})
</script>
-
-<style src="@wangeditor/editor/dist/css/style.css"></style>
+<style lang="scss">
+</style>>
--
Gitblit v1.9.3