vue+element-ui中引入wangeditor编辑器

血红的双手。 提交于 2020-05-01 21:11:27

1.执行:npm install  --save  wangeditor

2.在你需要调用编辑器的vue文件中引入 wangeditor:

import E from 'wangeditor'

页面调用:

<div id="editor">
    <!--<p>{{addFormData.content?'请输入正文':addFormData.content}}  </p>-->
</div>

初始化编辑器:

在 mounted 方法中:

that.$nextTick(function () {
                // Code that will run only after the
                // entire view has been rendered
                // 创建编辑器
                that.editor = new E('#editor')
                // 自定义菜单配置
                that.editor.customConfig.menus = [
                    'bold',// 粗体
                    'italic',// 斜体
                    'head',// 标题
                    'quote',  // 引用
                    'list',  // 列表
                    'link',  // 插入链接
                    'image',  // 插入图片
                    'table',  // 表格
                ]
                that.editor.customConfig.onchange = function (html) {
                    if (html.replace(/<\/?[^>]+>/g, '')!=="") {
                        that.addFormData.content = html
                        that.$refs['addForm'].validateField('content')
                    }
                    // html 即变化之后的内容
                    // console.log(html)
                }
                // 配置服务器端地址
                that.editor.customConfig.uploadImgServer = that.uploadUrl
                // 将图片大小限制为 1M
                that.editor.customConfig.uploadImgMaxSize = 1 * 1024 * 1024
                // 限制一次最多上传 1 张图片
                that.editor.customConfig.uploadImgMaxLength = 1
                that.editor.customConfig.uploadFileName = 'file'; //设置文件上传的参数名称
                that.editor.customConfig.uploadImgHooks = {
                    customInsert: function (insertImg, result, editor) {
                        // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
                        // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
                        // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
                        if (result.code === 200) {
                            insertImg(that.imgSrc + result.data.id)
                        }
                        // var url = result.url
                        // insertImg(url)
                        // result 必须是一个 JSON 格式字符串!!!否则报错
                    }
                }
                that.editor.create()
                that.editor.txt.html(that.addFormData.content ? that.addFormData.content : '')
                // 禁用
                if (that.addFormData.disabled) {
                    // that.editor.disable();
                    that.editor.$textElem.attr('contenteditable', false)
                }
            })

 注意:

小颖之所以把初始化编辑器写在 $nextTick 内,是因为小颖调用编辑器时是在 el-dialog 组件中调用的,如果直接在 mounted 下初始化时,它始终不出来。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!