近日项目组需要实现富文本编译器,经过一番对比决定使用wangEditor,但官方文档有一点不方便理解,故记录
一、安装
npm install @wangeditor/editor --save
二、使用
组件模板部分,这一部分写到组件的templat标签内
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editor"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 500px; overflow-y: hidden;"
v-model="html"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="onCreated"
/>
引入及注册
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
components: { Editor, Toolbar },
初始配置
可以在data中写好,也可以在mounted中更改
data() {
return {
editor: null,
html: '<p>hello</p>',
toolbarConfig :{
excludeKeys: ['fullScreen', 'code', 'group-video', 'codeBlock', 'bulletedList', 'numberedList', 'blockquote', 'bold', 'italic', 'todo', 'insertImage', 'insertLink', 'emotion'] // 此处不需要的工具栏选项
},
editorConfig: { placeholder: '请输入内容...' ,MENU_CONF: {},},
mode: 'default', // or 'simple'
}
},
初始化方法
onCreated(editor) {
this.editor = Object.seal(editor) // 一定要用 Object.seal() ,否则会报错
},
实例销毁时要销毁组件
beforeDestroy() {
const editor = this.editor
if (editor == null) return
editor.destroy() // 组件销毁时,及时销毁编辑器
},
配置图片上传地址
this.editorConfig.MENU_CONF['uploadImage'] = {
server: '这里改成你的后台上传的接口地址',//上传接口地址
headers: {
Authorization:'Bearer '+getToken()//配置token
},
fieldName: 'file'//上传文件名
}
如果有上传视频等功能同理