安装依赖
npm i -S @wangeditor/editor @wangeditor/editor-for-vue
一、添加视图组件(一个是工具栏标签,一个是编辑器标签)
<div style="border: 1px solid #ccc;">
<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"
/>
</div>
二、导入组件,注册组件,以及一些data依赖
import { Editor, Toolbar } from '@wangeditor/editor-for-vue' components: { Editor, Toolbar } data() { return { // 富文本编辑对象 editor: null, // 富文本中的绑定的数据 html: '<p>hello</p>', // 工具栏,可以自定义 toolbarConfig: { }, //编辑框的自定义 editorConfig: { placeholder: '请输入内容...' }, //剪辑模式和默认模式 mode: 'default', // or 'simple' } }, methods: { onCreated(editor) { this.editor = Object.seal(editor) // 一定要用 Object.seal() ,否则会报错 }, }, mounted() { // 模拟 ajax 请求,异步渲染编辑器 setTimeout(() => { this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>' }, 1500) }, beforeDestroy() { const editor = this.editor if (editor == null) return editor.destroy() // 组件销毁时,及时销毁编辑器 }
<style src="@wangeditor/editor/dist/css/style.css"></style>