From a5e841edeb90e8b3306a395d40fd4953d092ead6 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期五, 19 九月 2025 17:43:43 +0800
Subject: [PATCH] 优化
---
admin/src/components/common/RichEditor.vue | 189 +++++++++++++++++++++++++----------------------
1 files changed, 101 insertions(+), 88 deletions(-)
diff --git a/admin/src/components/common/RichEditor.vue b/admin/src/components/common/RichEditor.vue
index 7bf2a32..10cfeaa 100644
--- a/admin/src/components/common/RichEditor.vue
+++ b/admin/src/components/common/RichEditor.vue
@@ -1,7 +1,7 @@
<template>
<div :style="styleEditor">
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
- <Editor :style="style" class="declass" v-model="html" :defaultConfig="editorConfig" :mode="mode"
+ <Editor style="min-height: 80px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode"
@onCreated="onCreated" @onChange="onChange" />
</div>
</template>
@@ -9,7 +9,7 @@
<script>
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
-import { Loading } from 'element-ui'
+import { Loading } from 'element-ui';
let loadingInstance = null
export default Vue.extend({
props: {
@@ -18,54 +18,53 @@
default: ''
},
styleEditor: '',
- style:'',
- readonly: false // 鏄惁鍙互杈撳叆
+ readonly: false, // 鏄惁鍙互杈撳叆
},
- name: 'RichEditor',
+ name:'RichEditor',
components: { Editor, Toolbar },
- data () {
+ data() {
return {
editor: null,
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', // 琛岄珮
+ 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', // 鎻掑叆閾炬帴
+ "divider", // 鍒嗗壊绾�
+ "emotion", // 琛ㄦ儏
+ "insertLink", // 鎻掑叆閾炬帴
// "editLink", // 淇敼閾炬帴
// "unLink", // 鍙栨秷閾炬帴
// "viewLink", // 鏌ョ湅閾炬帴
- 'codeBlock', // 浠ｇ爜鍧�
- 'blockquote', // 寮曠敤
- 'headerSelect', // 鏍囬
+ "codeBlock", // 浠ｇ爜鍧�
+ "blockquote", // 寮曠敤
+ "headerSelect", // 鏍囬
// "header1", // 鏍囬1
// "header2", // 鏍囬2
// "header3", // 鏍囬3
// "header4", // 鏍囬4
// "header5", // 鏍囬5
// "todo", // 寰呭姙
- 'redo', // 閲嶅仛
- 'undo', // 鎾ら攢
+ "redo", // 閲嶅仛
+ "undo", // 鎾ら攢
// "enter", // 鍥炶溅
// "bulletedList", // 鏃犲簭鍒楄〃
// "numberedList", // 鏈夊簭鍒楄〃
@@ -85,20 +84,20 @@
"tableHeader", // 琛ㄥご
"tableFullWidth", // 瀹藉害鑷�傚簲
] // 涓嬬骇鑿滃崟 key 锛屽繀濉�
- }, */
+ },*/
// 涓婁紶鍥剧墖鍒嗙粍
{
key: 'img-style', // 蹇呭～锛岃浠� group 寮�澶�
title: '鍥剧墖', // 蹇呭～
// iconSvg: '<svg>....</svg>', // 鍙��
menuKeys: [
- 'uploadImage', // 涓婁紶鍥剧墖
- 'insertImage', // 缃戠粶鍥剧墖
- 'deleteImage', // 鍒犻櫎鍥剧墖
- 'editImage', // 缂栬緫鍥剧墖
- 'imageWidth30', // 鍥剧墖瀹藉害鐩稿浜庣紪杈戝櫒瀹藉害鐨勭櫨鍒嗘瘮30
- 'imageWidth50', // 鍥剧墖瀹藉害鐩稿浜庣紪杈戝櫒瀹藉害鐨勭櫨鍒嗘瘮50
- 'imageWidth100' // 鍥剧墖瀹藉害鐩稿浜庣紪杈戝櫒瀹藉害鐨勭櫨鍒嗘瘮100
+ "uploadImage", // 涓婁紶鍥剧墖
+ "insertImage", // 缃戠粶鍥剧墖
+ "deleteImage", // 鍒犻櫎鍥剧墖
+ "editImage", // 缂栬緫鍥剧墖
+ "imageWidth30", // 鍥剧墖瀹藉害鐩稿浜庣紪杈戝櫒瀹藉害鐨勭櫨鍒嗘瘮30
+ "imageWidth50", // 鍥剧墖瀹藉害鐩稿浜庣紪杈戝櫒瀹藉害鐨勭櫨鍒嗘瘮50
+ "imageWidth100", // 鍥剧墖瀹藉害鐩稿浜庣紪杈戝櫒瀹藉害鐨勭櫨鍒嗘瘮100
] // 涓嬬骇鑿滃崟 key 锛屽繀濉�
},
// 瑙嗛鍒嗙粍
@@ -107,18 +106,18 @@
title: '瑙嗛', // 蹇呭～
// iconSvg: '<svg>....</svg>', // 鍙��
menuKeys: [
- 'insertVideo', // 鎻掑叆缃戠粶瑙嗛
- 'uploadVideo', // 涓婁紶瑙嗛
- 'editVideoSize' // 淇敼瑙嗛灏哄
+ "insertVideo", // 鎻掑叆缃戠粶瑙嗛
+ "uploadVideo", // 涓婁紶瑙嗛
+ "editVideoSize", // 淇敼瑙嗛灏哄
] // 涓嬬骇鑿滃崟 key 锛屽繀濉�
},
- 'fullScreen' // 鍏ㄥ睆
+ "fullScreen", // 鍏ㄥ睆
],
excludeKeys: [ // 闅愯棌鎸囧畾鐨勮彍鍗曢」
// 'headerSelect',
// 'video-style'
// 鎺掗櫎鑿滃崟缁勶紝鍐欒彍鍗曠粍 key 鐨勫�煎嵆鍙�
- ]
+ ],
},
editorConfig: { // 缂栬緫鍣ㄩ厤缃�
@@ -133,7 +132,7 @@
server: process.env.VUE_APP_API_PREFIX + '/web/public/uploadLocal?folder=',
fieldName: 'file',
// 鍗曚釜鏂囦欢鐨勬渶澶т綋绉檺鍒讹紝榛樿涓� 2M
- maxFileSize: 20 * 1024 * 1024, // 10M
+ maxFileSize: 10 * 1024 * 1024, // 10M
// 鏈�澶氬彲涓婁紶鍑犱釜鏂囦欢锛岄粯璁や负 100
maxNumberOfFiles: 10,
// 閫夋嫨鏂囦欢鏃剁殑绫诲瀷闄愬埗锛岄粯璁や负 ['image/*'] 銆傚涓嶆兂闄愬埗锛屽垯璁剧疆涓� []
@@ -148,20 +147,20 @@
// 璺ㄥ煙鏄惁浼犻�� cookie 锛岄粯璁や负 false
withCredentials: true,
// 瓒呮椂鏃堕棿锛岄粯璁や负 10 绉�
- timeout: 10 * 1000, // 10 绉�
+ timeout: 10 * 1000, //10 绉�
// 涓婁紶鍓�
- onBeforeUpload (files) {
+ onBeforeUpload(files) {
loadingInstance = Loading.service({
lock: true,
text: '涓婁紶涓�...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
- })
- return files
+ });
+ return files;
},
// 鑷畾涔夋彃鍏ュ浘鐗�
- customInsert (res, insertFn) {
- console.log(res)
+ customInsert(res, insertFn) {
+ console.log(res);
// 鍥犱负鑷畾涔夋彃鍏ュ鑷磑nSuccess涓巓nFailed鍥炶皟鍑芥暟涓嶈捣浣滅敤,鑷繁鎵嬪姩澶勭悊
// 鍏堝叧闂瓑寰呯殑Message
loadingInstance = Loading.service({
@@ -169,7 +168,7 @@
text: '涓婁紶涓�...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
- }).close()
+ }).close();
if (res.code === 200) {
// Message.success({
// message: `${res.data.originalName} 涓婁紶鎴愬姛`
@@ -179,33 +178,33 @@
// message: `${res.data.originalName} 涓婁紶澶辫触锛岃閲嶆柊灏濊瘯`
// });
}
- insertFn(res.data.url, res.data.originname, res.data.imgname)
+ insertFn(res.data.url, res.data.originname, res.data.imgname);
},
// 鍗曚釜鏂囦欢涓婁紶鎴愬姛涔嬪悗
- onSuccess (file, res) {
- console.log(`${file.originalFilename} 涓婁紶鎴愬姛`, res)
+ onSuccess(file, res) {
+ console.log(`${file.originalFilename} 涓婁紶鎴愬姛`, res);
},
// 鍗曚釜鏂囦欢涓婁紶澶辫触
- onFailed (file, res) {
- console.log(`${file.originalFilename} 涓婁紶澶辫触`, res)
- loadingInstance.close()
+ onFailed(file, res) {
+ console.log(`${file.originalFilename} 涓婁紶澶辫触`, res);
+ loadingInstance.close();
},
// 涓婁紶杩涘害鐨勫洖璋冨嚱鏁�
- onProgress (progress) {
- console.log('progress', progress)
+ onProgress(progress) {
+ console.log('progress', progress);
// progress 鏄� 0-100 鐨勬暟瀛�
},
// 涓婁紶閿欒锛屾垨鑰呰Е鍙� timeout 瓒呮椂
- onError (file, err, res) {
- loadingInstance.close()
- console.log(`${file.originalFilename} 涓婁紶鍑洪敊`, err, res)
+ 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',
+ server: process.env.VUE_APP_API_PREFIX + '/web/public/upload?folder=richeditor',
// 鍗曚釜鏂囦欢鐨勬渶澶т綋绉檺鍒讹紝榛樿涓� 10M
maxFileSize: 50 * 1024 * 1024, // 50M
// 鏈�澶氬彲涓婁紶鍑犱釜鏂囦欢锛岄粯璁や负 5
@@ -230,11 +229,11 @@
// 瓒呮椂鏃堕棿锛岄粯璁や负 30 绉�
timeout: 1000 * 1000, // 1000 绉�,
// 涓婁紶涔嬪墠瑙﹀彂
- onBeforeUpload (file) {
- return file
+ onBeforeUpload(file) {
+ return file;
},
// 鑷畾涔夋彃鍏ヨ棰�
- customInsert (res, insertFn) {
+ customInsert(res, insertFn) {
// 鍥犱负鑷畾涔夋彃鍏ュ鑷磑nSuccess涓巓nFailed鍥炶皟鍑芥暟涓嶈捣浣滅敤,鑷繁鎵嬪姩澶勭悊
// 鍏堝叧闂瓑寰呯殑Message
// Message.closeAll();
@@ -247,11 +246,11 @@
// message: `${res.data.originalName} 涓婁紶澶辫触锛岃閲嶆柊灏濊瘯`
// });
}
- insertFn(res.data.url, res.data.url)
+ insertFn(res.data.url, res.data.url);
},
// 涓婁紶杩涘害鐨勫洖璋冨嚱鏁�
- onProgress (progress) {
- console.log(progress)
+ onProgress(progress) {
+ console.log(progress);
// onProgress(progress) { // JS 璇硶
// progress 鏄� 0-100 鐨勬暟瀛�
},
@@ -266,8 +265,8 @@
// this.errorMsg(file);
// },
// 涓婁紶閿欒锛屾垨鑰呰Е鍙� timeout 瓒呮椂
- onError (file, err, res) {
- console.log(`${file.name} 涓婁紶鍑洪敊`, err, res)
+ onError(file, err, res) {
+ console.log(`${file.name} 涓婁紶鍑洪敊`, err, res);
// Notification.error({
// title: '閿欒',
// message: `${file.name} 涓婁紶澶辫触锛岃閲嶆柊灏濊瘯`
@@ -276,38 +275,47 @@
}
}
},
- mode: 'default' // or 'simple'
+ mode: 'default', // or 'simple'
}
},
watch: {
richData: function (value) {
this.html = value
+ console.log("onChange123", value); // onChange 鏃惰幏鍙栫紪杈戝櫒鏈�鏂板唴瀹�
+ this.$nextTick(()=>{
+ this.html = value
+ })
},
readonly: function (value) {
this.readonly = value
},
styleEditor: function (value) {
this.styleEditor = value
- }
+ },
},
- mounted () {
+ mounted() {
// 闇�瑕佸湪缂栬緫鍣ㄥ垱寤哄畬姣曞悗鍦ㄨ祴鍊�
- this.$nextTick(() => {
+ this.$nextTick(()=>{
this.html = this.richData
})
},
methods: {
// 缂栬緫鍣ㄥ垱寤哄畬姣曟椂鐨勫洖璋冨嚱鏁�
- onCreated (editor) {
+ onCreated(editor) {
+ var that =this
this.editor = Object.seal(editor) // 涓�瀹氳鐢� Object.seal() 锛屽惁鍒欎細鎶ラ敊
+ setTimeout(function (){
+ that.html = that.richData
+ // alert(that.html)
+ },15000)
},
// 缂栬緫鍣ㄥ唴瀹广�侀�夊尯鍙樺寲鏃剁殑鍥炶皟鍑芥暟
- onChange (editor) {
+ onChange(editor) {
this.$emit('getWangedditor', editor.getHtml())
- console.log('onChange', editor.getHtml()) // onChange 鏃惰幏鍙栫紪杈戝櫒鏈�鏂板唴瀹�
- }
+ console.log("onChange", editor.getHtml()); // onChange 鏃惰幏鍙栫紪杈戝櫒鏈�鏂板唴瀹�
+ },
},
- beforeDestroy () {
+ beforeDestroy() {
// 缂栬緫鍣ㄩ攢姣佹椂鐨勫洖璋冨嚱鏁般�傝皟鐢� editor.destroy() 鍗冲彲閿�姣佺紪杈戝櫒
const editor = this.editor
if (editor == null) return
@@ -315,8 +323,13 @@
}
})
</script>
-<style lang="scss">
-.declass{
- min-height: 80px; overflow-y: hidden;
+<style>
+::v-deep .w-e-text-container {
+ height: 420px !important;
}
-</style>>
+.w-e-text-container .w-e-scroll {
+ height: 500px !important;
+ -webkit-overflow-scrolling: touch;
+}
+</style>
+
--
Gitblit v1.9.3