Situation

需求：使用能插入图片的编辑器将文字和图片混合作为一道作业题目
由于是在原来项目的基础上做的修改，老项目使用的UEditor编辑器，为了将题目中的公式转为图片，方便新增数据，于是前后端按照官网写法配置了PHP插入图片，会报错跨域

所以我们考虑使用Quill代替UEditor，因为项目中很多地方都使用了UEditor，因此我们直接修改UEditor组件的代码为了兼容项目中出现的UEditor语法和Quill图片上传模式

Task

修改UEditor组件的代码，以兼容项目中对UEditor API的使用手法和Quill自身的图片上传模式
目的：尽可能少的修改代码，以达到全局文本编辑器的修改
大致流程图如下所示

Action

UEditor组件源代码（如下所示）

<template><div><script :id="randomId" type="text/plain" style="height: 300px;"></script></div>
</template><script>export default {name: 'UE',props: {value: {default: function () {return ''}}},data () {return {randomId: 'editor_' + Math.random() * 100000000000000000,// 编辑器实例instance: null,ready: false}},watch: {value: function (val, oldVal) {if (val != null && this.ready) {// eslint-disable-next-line no-undefthis.instance = UE.getEditor(this.randomId)this.instance.setContent(val)}}},mounted () {this.initEditor()},beforeDestroy () {if (this.instance !== null && this.instance.destroy) {this.instance.destroy()}},methods: {initEditor () {this.$nextTick(() => {// eslint-disable-next-line no-undefthis.instance = UE.getEditor(this.randomId)this.instance.addListener('ready', () => {this.ready = truethis.$emit('ready', this.instance)})})},getUEContent () {return this.instance.getContent()},setText (con) {// eslint-disable-next-line no-undefthis.instance = UE.getEditor(this.randomId)this.instance.setContent(con)}}
}
</script>

修改后的UEditor组件代码（实则为Quill组件代码了）

<template><div class="edit_container"><quill-editorv-model="content"ref="myQuillEditor":options="editorOption"@blur="onEditorBlur($event)"@focus="onEditorFocus($event)"@change="onEditorChange($event)"@ready="onEditorReady($event)"></quill-editor></div>
</template><script>
import {quillEditor} from 'vue-quill-editor' // 调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import resizeImage from 'quill-image-resize-module' // 图片缩放组件引用
import {ImageDrop} from 'quill-image-drop-module'
import Quill from "quill/quill";Quill.register('modules/imageDrop', ImageDrop) // 注册
Quill.register('modules/resizeImage ', resizeImage)
export default {name: 'UE',props: ['initValue'],components: {quillEditor},watch:{initValue:{handler(newInitValue){this.content=newInitValue;},deep:true,immediate:true,}},data() {return {//randomId: 'editor_' + Math.random() * 100000000000000000,// 编辑器实例instance: null,ready: false,content: this._props.initValue || ``,editorOption: {placeholder: '请在这里输入',modules: {imageResize: { // 放大缩小displayStyles: {backgroundColor: 'black',border: 'none',color: 'white'},modules: ['Resize', 'DisplaySize', 'Toolbar']},toolbar: [['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线['blockquote', 'code-block'], // 引用，代码块[{'header': 1}, {'header': 2}], // 标题，键值对的形式；1、2表示字体大小[{'list': 'ordered'}, {'list': 'bullet'}], // 列表[{'script': 'sub'}, {'script': 'super'}], // 上下标[{'indent': '-1'}, {'indent': '+1'}], // 缩进[{'direction': 'rtl'}], // 文本方向[{'size': ['small', false, 'large', 'huge']}], // 字体大小[{'header': [1, 2, 3, 4, 5, 6, false]}], // 几级标题[{'color': []}, {'background': []}], // 字体颜色，字体背景颜色[{'align': []}], // 对齐方式['image'] // 上传图片]}}}},// watch: {//   value: function (val, oldVal) {//     if (val != null && this.ready) {//       // eslint-disable-next-line no-undef//       this.instance = UE.getEditor(this.randomId)//       this.instance.setContent(val)//     }//   }// },mounted() {this.initEditor()},beforeDestroy() {if (this.instance !== null && this.instance.destroy) {this.instance.destroy()}},computed: {editor() {return this.$refs.myQuillEditor.quill}},methods: {initEditor() {/* this.instance = this.$refs.randomId11.quill;this.ready = trueconst content = ''// 请求后台返回的内容字符串this.content = this.escapeStringHTML(content)this.$emit('ready', this.instance)*/},getUEContent() {return this.content},/*   setText(con) {this.instance = UE.getEditor(this.randomId)this.instance.setContent(con)},*/onEditorBlur() {}, // 失去焦点事件onEditorFocus() {}, // 获得焦点事件onEditorChange({quill, html, text}) {this.content=htmlthis.$emit('change', html)}, // 内容改变事件// 准备富文本编辑器onEditorReady(quill) {this.$emit('ready', quill)},// 转码escapeStringHTML(str) {str = str.replace(/&lt;/g, '<')str = str.replace(/&gt;/g, '>')return str},/*setContent(content) {this.content = content;}*/}
}
</script><style>
.editor {line-height: normal !important;height: 500px;
}.edit_container {display: flex;margin: 0 auto;width: 650px;height: 300px;
}.ql-snow .ql-tooltip[data-mode=link]::before {content: "请输入链接地址:";
}.ql-snow .ql-tooltip.ql-editing a.ql-action::after {border-right: 0px;content: '保存';padding-right: 0px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {content: '14px';
}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {content: '10px';
}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {content: '18px';
}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {content: '32px';
}.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {content: '文本';
}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {content: '标题1';
}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {content: '标题2';
}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {content: '标题3';
}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {content: '标题4';
}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {content: '标题5';
}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {content: '标题6';
}
</style>

用法如下

<Ueditor @ready="editorReady" @change="callbackChangeEditor" :initValue="bufsEditorContent"/>

需定义 editorReady 和 callbackChangeEditor事件

//编辑器内文本变化触发onchange事件 的回调处理函数callbackChangeEditor(value) {this.richEditor.object[this.richEditor.parameterName] = escapeStringHTML(value + '') || ''},//初始化 编辑器实例时的回调处理函数editorReady(instance) {this.richEditor.instance = instancelet currentContent = this.richEditor.object[this.richEditor.parameterName]//bufsEditorContent 是定义在data方法中的变量，用来和编辑器内容进行双向绑定//赋值this.bufsEditorContent = currentContent;// 光标定位到Ueditorthis.richEditor.instance.focus(true)},

Result

修改配置，成功上传图片并展示

Reference

Quill 官网
npm vue-quill-editor
UEditor 官网

Vue中使用QuillEditor代替UEditor相关推荐

Vue中使用quillEditor编辑器使用粘贴可用，小坑讲解，回显空格丢失等问题。
在日常开发中我们经常会使用到富文本编辑器,怎么选择一个好的富文本编辑器呢安装依赖 npm install vue-quill-editor --save npm install quill --sa ...
vue中使用百度编辑器Ueditor
1.下载Ueditor文件 https://ueditor.baidu.com/website/download.html 2.安装 vue-editor-wrap npm i vue-ueditor ...
vue中如何使用ueditor？
1.首先进入gitee(gitee网址快)中拉代码(git clone) https://gitee.com/msea/ueditor 2.在下载的文件中打开终端检查是否安装grunt,如果没有 ...
vue中富文本编辑器vue-quill-editor在vue中自定义选择视频插入编辑文章中
题记: ----- 互联网不该只是技术的,不能简化成内容和工具,它应该属于生活本身 vue-quill-editor 是 Vue 项目中使用的富文本编辑器 1 引言在实际应用开发中,在常见的管理后 ...
用百度富文本编辑器UMeditor实现对html文本的编辑功能，vue中使用UMeditor编辑器
百度 UMeditor 编辑器资源免费下载地址: https://download.csdn.net/download/WanweI897/67403979 该编辑器没有官方文档,不过百度另一个编辑器 ...
富文本编辑器Quill 介绍及在Vue中的使用方法
在Web开发中,富文本编辑器是不可或缺的一个功能组件,掌握少量基础语法就能让一篇文章实现较为不错的排版效果,即见即所得. 目前市场上已提供大量集成富文本编辑器的包,Quill 作为其中一个,以简单.易 ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
props写法_简单理解vue中Props属性
本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下使用 Props 传递数据组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 pr ...
vue ts 设置tslint提示_Typescript 在 Vue 中的实践(包含2.x、3.x)
1 使用 typescript 的优势聊到 ts 时有一个不能规避的问题:为什么要使用 ts ,相比 js 有什么优势吗?下面我从两个方面试着回答一下这个问题: 1.1 项目开发时的便利避免低级 ...

Vue中使用QuillEditor代替UEditor