From fa5596bb2091089fb69a99f38d794a490734180e Mon Sep 17 00:00:00 2001 From: RuoYi <yzz_ivy@163.com> Date: 星期六, 22 八月 2020 13:18:41 +0800 Subject: [PATCH] Editor组件优化,支持自定义高度&图片冲突问题 --- ruoyi-ui/src/components/Editor/index.vue | 207 ++++++++++++++++++++++----------------------------- 1 files changed, 88 insertions(+), 119 deletions(-) diff --git a/ruoyi-ui/src/components/Editor/index.vue b/ruoyi-ui/src/components/Editor/index.vue index 7fadf6f..6eb2687 100644 --- a/ruoyi-ui/src/components/Editor/index.vue +++ b/ruoyi-ui/src/components/Editor/index.vue @@ -1,153 +1,122 @@ <template> - <div> - <!-- 鍥剧墖涓婁紶缁勪欢杈呭姪 --> - <el-upload - class="avatar-uploader quill-img" - :action="uploadImgUrl" - name="file" - :headers="headers" - :show-file-list="false" - :on-success="quillImgSuccess" - :on-error="uploadError" - :before-upload="quillImgBefore" - accept='.jpg,.jpeg,.png,.gif' - ></el-upload> - - <!-- 瀵屾枃鏈粍浠� --> - <quill-editor - class="editor" - v-model="content" - ref="quillEditor" - :options="editorOption" - @blur="onEditorBlur($event)" - @focus="onEditorFocus($event)" - @change="onEditorChange($event)" - ></quill-editor> - </div> + <div class="editor" ref="editor" :style="styles"></div> </template> <script> -import { getToken } from '@/utils/auth' - -// 宸ュ叿鏍忛厤缃� -const toolbarOptions = [ - ["bold", "italic", "underline", "strike"], // 鍔犵矖 鏂滀綋 涓嬪垝绾� 鍒犻櫎绾� - ["blockquote", "code-block"], // 寮曠敤 浠g爜鍧� - [{ list: "ordered" }, { list: "bullet" }], // 鏈夊簭銆佹棤搴忓垪琛� - [{ indent: "-1" }, { indent: "+1" }], // 缂╄繘 - [{ size: ["small", false, "large", "huge"] }], // 瀛椾綋澶у皬 - [{ header: [1, 2, 3, 4, 5, 6, false] }], // 鏍囬 - [{ color: [] }, { background: [] }], // 瀛椾綋棰滆壊銆佸瓧浣撹儗鏅鑹� - [{ align: [] }], // 瀵归綈鏂瑰紡 - ["clean"], // 娓呴櫎鏂囨湰鏍煎紡 - ["link", "image", "video"] // 閾炬帴銆佸浘鐗囥�佽棰� -]; - -import { quillEditor } from "vue-quill-editor"; +import Quill from "quill"; import "quill/dist/quill.core.css"; import "quill/dist/quill.snow.css"; import "quill/dist/quill.bubble.css"; export default { + name: "Editor", props: { /* 缂栬緫鍣ㄧ殑鍐呭 */ value: { - type: String + type: String, + default: "", }, - /* 鍥剧墖澶у皬 */ - maxSize: { + /* 楂樺害 */ + height: { type: Number, - default: 4000 //kb - } + default: null, + }, + /* 鏈�灏忛珮搴� */ + minHeight: { + type: Number, + default: null, + }, }, - components: { quillEditor }, data() { return { - content: this.value, - uploadImgUrl: "", - editorOption: { - theme: "snow", // or 'bubble' - placeholder: "璇疯緭鍏ュ唴瀹�", + Quill: null, + currentValue: "", + options: { + theme: "snow", + bounds: document.body, + debug: "warn", modules: { - toolbar: { - container: toolbarOptions, - handlers: { - image: function(value) { - if (value) { - // 瑙﹀彂input妗嗛�夋嫨鍥剧墖鏂囦欢 - document.querySelector(".quill-img input").click(); - } else { - this.quill.format("image", false); - } - } - } + // 宸ュ叿鏍忛厤缃� + toolbar: [ + ["bold", "italic", "underline", "strike"], // 鍔犵矖 鏂滀綋 涓嬪垝绾� 鍒犻櫎绾� + ["blockquote", "code-block"], // 寮曠敤 浠g爜鍧� + [{ list: "ordered" }, { list: "bullet" }], // 鏈夊簭銆佹棤搴忓垪琛� + [{ indent: "-1" }, { indent: "+1" }], // 缂╄繘 + [{ size: ["small", false, "large", "huge"] }], // 瀛椾綋澶у皬 + [{ header: [1, 2, 3, 4, 5, 6, false] }], // 鏍囬 + [{ color: [] }, { background: [] }], // 瀛椾綋棰滆壊銆佸瓧浣撹儗鏅鑹� + [{ align: [] }], // 瀵归綈鏂瑰紡 + ["clean"], // 娓呴櫎鏂囨湰鏍煎紡 + ["link", "image", "video"] // 閾炬帴銆佸浘鐗囥�佽棰� + ], + }, + placeholder: "璇疯緭鍏ュ唴瀹�", + readOnly: false, + }, + }; + }, + computed: { + styles() { + let style = {}; + if (this.minHeight) { + style.minHeight = `${this.minHeight}px`; + } + if (this.height) { + style.height = `${this.height}px`; + } + return style; + }, + }, + watch: { + value: { + handler(val) { + if (val !== this.currentValue) { + this.currentValue = val; + if (this.Quill) { + this.Quill.pasteHTML(this.value); } } }, - uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃 - headers: { - Authorization: 'Bearer ' + getToken() - } - }; + immediate: true, + }, }, - watch: { - value: function() { - this.content = this.value; - } + mounted() { + this.init(); + }, + beforeDestroy() { + this.Quill = null; }, methods: { - onEditorBlur() { - //澶卞幓鐒︾偣浜嬩欢 + init() { + const editor = this.$refs.editor; + this.Quill = new Quill(editor, this.options); + this.Quill.pasteHTML(this.currentValue); + this.Quill.on("text-change", (delta, oldDelta, source) => { + const html = this.$refs.editor.children[0].innerHTML; + const text = this.Quill.getText(); + const quill = this.Quill; + this.currentValue = html; + this.$emit("input", html); + this.$emit("on-change", { html, text, quill }); + }); + this.Quill.on("text-change", (delta, oldDelta, source) => { + this.$emit("on-text-change", delta, oldDelta, source); + }); + this.Quill.on("selection-change", (range, oldRange, source) => { + this.$emit("on-selection-change", range, oldRange, source); + }); + this.Quill.on("editor-change", (eventName, ...args) => { + this.$emit("on-editor-change", eventName, ...args); + }); }, - onEditorFocus() { - //鑾峰緱鐒︾偣浜嬩欢 - }, - onEditorChange() { - //鍐呭鏀瑰彉浜嬩欢 - this.$emit("input", this.content); - }, - - // 瀵屾枃鏈浘鐗囦笂浼犲墠 - quillImgBefore(file) { - let fileType = file.type; - if(fileType === 'image/jpeg' || fileType === 'image/png'){ - return true; - }else { - this.$message.error('璇锋彃鍏ュ浘鐗囩被鍨嬫枃浠�(jpg/jpeg/png)'); - return false; - } - }, - - quillImgSuccess(res, file) { - // res涓哄浘鐗囨湇鍔″櫒杩斿洖鐨勬暟鎹� - // 鑾峰彇瀵屾枃鏈粍浠跺疄渚� - let quill = this.$refs.quillEditor.quill; - // 濡傛灉涓婁紶鎴愬姛 - if (res.code == 200) { - // 鑾峰彇鍏夋爣鎵�鍦ㄤ綅缃� - let length = quill.getSelection().index; - // 鎻掑叆鍥剧墖 res.url涓烘湇鍔″櫒杩斿洖鐨勫浘鐗囧湴鍧� - quill.insertEmbed(length, "image", res.url); - // 璋冩暣鍏夋爣鍒版渶鍚� - quill.setSelection(length + 1); - } else { - this.$message.error("鍥剧墖鎻掑叆澶辫触"); - } - }, - // 瀵屾枃鏈浘鐗囦笂浼犲け璐� - uploadError() { - // loading鍔ㄧ敾娑堝け - this.$message.error("鍥剧墖鎻掑叆澶辫触"); - } - } + }, }; -</script> +</script> <style> .editor { white-space: pre-wrap!important; line-height: normal !important; - height: 192px; } .quill-img { display: none; -- Gitblit v1.9.3