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 下初始化时,它始终不出来。
来源:oschina
链接:https://my.oschina.net/u/4331670/blog/4261213