编辑器

https://www.kancloud.cn/wangfupeng/wangeditor3/335780

调用

this.editorSet()

编辑框设置

//编辑框设置
            editorSet: function () {
                var that = this
                that.$nextTick(function () {
                    var E = window.wangEditor
                    that.editorData = new E('#editor')
                    that.editorData.customConfig.menus = [
                        'head',  // 标题
                        'bold',  // 粗体
                        'fontSize',  // 字号
                        'fontName',  // 字体
                        'italic',  // 斜体
                        'underline',  // 下划线
                        'strikeThrough',  // 删除线
                        'foreColor',  // 文字颜色
                        'backColor',  // 背景颜色
                        'link',  // 插入链接
                        'list',  // 列表
                        'justify',  // 对齐方式
                        'quote',  // 引用
                        'emoticon',  // 表情
                        'image',  // 插入图片
                        'table',  // 表格
                        'code',  // 插入代码
                        'undo',  // 撤销
                        'redo'  // 重复
                    ]
                    // 隐藏“网络图片”tab
                    that.editorData.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
                    that.editorData.customConfig.uploadImgServer = port + 'api/Upload/UploadImg'  // 上传图片到服务器
                    that.editorData.customConfig.showLinkImg = false
                    that.editorData.customConfig.uploadImgHooks = {
                        success: function (xhr, editor, result) {
                            that.$Message.success('上传成功');
                            // 图片上传并返回结果，图片插入成功之后触发
                            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                        },
                        fail: function (xhr, editor, result) {
                            // 图片上传并返回结果，但图片插入错误时触发
                            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                        },
                        error: function (xhr, editor) {
                            // 图片上传出错时触发
                            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                        },
                        timeout: function (xhr, editor) {
                            // 图片上传超时时触发
                            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                        },
                        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
                        // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
                        customInsert: function (insertImg, result, editor) {
                            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

                            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                            var url = result.Data.FileUrl
                            insertImg(port + url)

                            // result 必须是一个 JSON 格式字符串！！！否则报错
                        }
                    }
                    that.editorData.create()
                })
            },

重置数据

//重置数据
this.editorData.txt.html('
请输入新闻内容...
')

拿到编辑框内容

 that.editConten = that.editorData.txt.html()