基于 Element-ui 的富文本组件quillEditor

开发后台管理系统经常需要用到富文本组件用来编辑文章，或者商城类的管理系统需要富文本编辑商品详情，但是有些富文本里面的上传图片功能实质是把图片转成base64字符串传给后台，如果上传的图片一多，那后台估计会炸！所以找到了一个可以把图片上传到后台生成图片链接嵌入富文本的方式，附上整个组件的代码~

<template>
    <div>
        <el-upload
            class="avatar-uploader2"
            name="file"
            action="xxx"  //这里换成你的服务器上传图片的接口
            :headers="headers"
            :show-file-list="false"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            hidden
        >
        <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <!--富文本编辑器组件-->
        <el-row v-loading="quillUpdateImg">
          <quill-editor
              v-model="value"
              ref="myQuillEditor"
              :options="editorOption"
              @change="onEditorChange($event)"
              @ready="onEditorReady($event)"
          >
          </quill-editor>
        </el-row>
    </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor';
export default {
    props: {
        value: ""
    },
    data() {
        return {
            headers: {
                'token': localStorage.token
            },
            // 富文本内容
            quillUpdateImg: false,
            editorOption: {
                placeholder: "请输入...",
                theme: "snow",
                modules: {
                toolbar: {
                    container: [
                        [
                            "image", "bold", "italic", "underline", "strike",
                            { "color": ['black', 'white', 'red', 'blue', 'yellow'] },
                            { "background": ['black', 'white', 'red', 'blue', 'yellow'] },
                            { header: 1 }, { header: 2 }
                        ]
                    ], // 工具栏
                    handlers: {
                        image: function(value) {
                            if (value) {
                                // 触发input框选择图片文件
                                document.querySelector(".avatar-uploader2 input").click();
                            } else {
                                this.quill.format("image", false);
                            }
                        }
                    }
                }
                }
            }
        }
    },
    components: {
        quillEditor
    },
    methods: {
        uploadSuccess(file) {
            if (file.code == "0") {
                let self = this;
                let quill = this.$refs.myQuillEditor.quill;
                let length = quill.getSelection().index;
                // 插入图片res.info为服务器返回的图片地址
                quill.insertEmbed(length, "image", file.data); // 调整光标到最后
                quill.setSelection(length + 1);
            } else {
                this.$message.error("uploadFile error");
            }
            // loading动画消失
            this.quillUpdateImg = false;
        },
        // 富文本图片上传失败
        uploadError () {
            // loading动画消失
            this.quillUpdateImg = false;
            this.$message.error("图片插入失败");
        },
        onEditorReady() {},
        onEditorBlur(){//失去焦点事件
        },
        onEditorFocus(){//获得焦点事件
        },
        onEditorChange(e) {//内容改变事件
            console.log("onEditorChange", e);
            this.$emit('input', e.html)
        },
    },
}
</script>

---

昨天把这个富文本组件引入另一个项目的时候发现报错 String contains an invalid character ，后面发现是有无效字符串；

看到有些人是多了一些逗号啥的也报这个错，所以写法得注意啦！！