富文本编辑

使用插件 wangeditor插件进行开发

效果图如下

父亲组件使用

<editor v-model="item.intro" :height="300" />

import Editor from "./editor";

components: { Editor, },

儿子插件

HTML代码

<div ref="editor"></div>

JS代码

import E from 'wangeditor'

data() { return { editor: null, info_: null, token: '' } },

model: {
    prop: 'value',
    event: 'change'
},
props: {
    value: {
        type: String,
        default: ''
    },
    isClear: {
        type: Boolean,
        default: false
    }
},
watch: {
    isClear(val) {
        // 触发清除文本域内容
        if (val) {
            this.editor.txt.clear()
            this.info_ = null
        }
    },
    value: function(value) {
        if (value !== this.editor.txt.html()) {
            this.editor.txt.html(this.value)
        }
    }
},

mounted() {
    this.seteditor()
    this.editor.txt.html(this.value)
},

 methods: {
        seteditor() {
            this.editor = new E(this.$refs.editor)
            this.editor.config.menus = [
              'head', // 标题
              'bold', // 粗体
              'fontSize', // 字号
              // 'fontName', // 字体
              'italic', // 斜体
              'underline', // 下划线
              'strikeThrough', // 删除线
              'foreColor', // 文字颜色
              'backColor', // 背景颜色
              'lineHeight', //行高
              'link', // 插入链接
              'list', // 列表
              'justify', // 对齐方式
              'quote', // 引用
              'emoticon', // 表情
              'image', // 插入图片
              'table', // 表格
              'undo', // 撤销
              'redo' // 重复
              // 'video',//视频
            ]
            this.editor.config.uploadImgServer = process.env.VUE_APP_BASE_API + "/common/upload"// 填写配置服务器端地址

            this.editor.config.uploadImgHeaders = { Authorization: "Bearer " + getToken() }// 自定义 header

            this.editor.config.uploadFileName = 'file' // 后端接受上传文件的参数名
            this.editor.config.uploadImgParams = {"ispublic":"1"}
            this.editor.config.uploadImgMaxSize = 8 * 1024 * 1024 // 将图片大小限制为 2M

            this.editor.config.uploadImgMaxLength = 6 // 限制一次最多上传 6 张图片

            this.editor.config.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间

            // 自定义 onchange 触发的延迟时间，默认为 200 ms

            this.editor.config.onchangeTimeout = 1000 // 单位 ms

            this.editor.config.onchange = (html) => {

                this.info_ = html // 绑定当前逐渐地值

                this.$emit('change', this.info_) // 将内容同步到父组件中

            }

            // 创建富文本编辑器
            this.editor.create()
            this.editor.config.uploadImgHooks = {
                fail: (xhr, editor, result) => {
                    // 插入图片失败回调
                },
                success: (xhr, editor, result) => {
                    // 图片上传成功回调
                },
                timeout: (xhr, editor) => {
                    // 网络超时的回调
                },
                error: (xhr, editor) => {
                    // 图片上传错误的回调
                },
                customInsert: (insertImg, result, editor) => {
                    //循环插入图片
                    let url = result.url
                    insertImg(url)
                }
            }
        }
    }