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('<p>请输入新闻内容...</p>')
拿到编辑框内容
that.editConten = that.editorData.txt.html()