本文已参与「新人创作礼」活动，一起开启掘金创作之路。
wangEditor真的非常简洁好用，而且一直有更新，缺点就是文档内容比较少。 wangEditor文档链接
看网上很多二次封装都把逻辑放到 mounted 中，对于新手的我不太友好，逻辑不太清晰。决定自己封装一个。将各配置以方法分割，在初始化调用。
//以下是封装的组件 SimpleEditor
<template>
<div>
<div ref="editor" style="text-align:left; margin-bottom:20px"></div>
</div>
</template>
<script>
import editor from 'wangeditor'
export default {
name: 'SimpleEditor',
data () {
return {
editor : ""
}
},
mounted() {
this.$nextTick(function() {
this.initEditor();
})
},
methods : {
initEditor() {
this.editor = new editor(this.$refs.editor)
this.uploadImg(); // 配置图片
this.setMenus(); // 配置菜单
this.editor.create(); // 创建
this.editor.change = () => {
this.$emit('changelHtml' , this.editor.txt.html() );
}
},
// 设置菜单
setMenus () {
this.editor.customConfig.menus = [
'undo', // 撤销
'redo', // 重复
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'justify', // 对齐方式
'image', // 插入图片
]
},
// 上传图片
uploadImg() {
this.editor.customConfig.showLinkImg = false;
// 配置服务器端地址
this.editor.customConfig.uploadImgServer = '你的服务端地址';
//重写上传图片方法 覆盖掉上面的了
// files 是 input 中选中的文件列表
// insert 是获取图片 url 后，插入到编辑器的方法
this.editor.customConfig.customUploadImg = (files, insert) => {
//将获取到的
const form = files.reduce((form , file) => (form.append('files' , file) , form) , new FormData())
this.http.post('你的服务端地址' , form ).then(items => {
items = items.map(({ url }) => url)
// 逐个上传
items.map((item) => insert(item))
})
};
},
//获取编辑器内容
getHtml() {
return this.editor.txt.html();
},
//将内容写入编辑器
setHtml(txt) {
this.editor.txt.html(txt);
},
}
}
</script>
接下来就是使用这个组件了，父组件是一个弹框表单，这里只写相关的代码。
//这里是父组件
<template>
//....
<simple-editor ref="editor" style="margin-left: 70px"/>
</template>
<script>
import SimpleEditor from '@/components/SimpleEditor'
export default {
name : 'DrawerInfo' ,
components : { SimpleEditor } ,
methods : {
open (vo) {
//在打开时进行判断
this.vo = vo
if(empty(vo.createTime)){
// 若是新增，使用setHtml的方法写入空字符。
//setTimeout 防止代码的顺序导致bug
setTimeout(() => this.$refs.editor.setHtml(''))
} else {
// 若是编辑，通过表单或者http获取内容
this.http({
//...
}).then(r => {
//如果通过表单获取就不需要http,将 r 改成 form，相信你们都很聪明，不用细讲
let { title , type , summary , author , editor , imgPath , content } = r
//一样通过setHtml 将数据写入编辑器。
this.$refs.editor.setHtml(content)
})
}
this.visible = true
},
//发送 表单的时候
sendForm () {
//当想发送时，用 getHtml 获取编辑器的数据就可以了。
let content = this.$refs.editor.getHtml();
}
}
</script>
