一,wangEditor官网
wangEditorhttps://www.wangeditor.com/
二,用于 Vue 2 项目
1. 下载插件
- 下载 editor
npm install @wangeditor/editor --save
或者 yarn add @wangeditor/editor
- 下载 editor-vue
npm install @wangeditor/editor-for-vue --save
或者 yarn add @wangeditor/editor-for-vue
2.使用
-
template
<template>
<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>
</template>
-
script
<script>
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default Vue.extend({
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() // 组件销毁时,及时销毁编辑器
}
})
</script>
-
style
<style src="@wangeditor/editor/dist/css/style.css"></style>
三,配置
可通过 toolbarConfig
和 editorConfig
来修改菜单栏和编辑器的配置,详细文档参考
【注意】编辑器配置中 onXxx
格式的生命周期函数,必须通过 Vue 事件来传递,不可以放在 editorConfig
中,例如:
<template>
<div style="border: 1px solid #ccc;">
<Toolbar ... />
<Editor
@onCreated="onCreated"
@onChange="onChange"
@onDestroyed="onDestroyed"
@onMaxLength="onMaxLength"
@onFocus="onFocus"
@onBlur="onBlur"
@customAlert="customAlert"
@customPaste="customPaste"
/>
</div>
</template>
methods: {
onCreated(editor) {
this.editor = Object.seal(editor)
console.log('onCreated', editor)
},
onChange(editor) { console.log('onChange', editor.children) },
onDestroyed(editor) { console.log('onDestroyed', editor) },
onMaxLength(editor) { console.log('onMaxLength', editor) },
onFocus(editor) { console.log('onFocus', editor) },
onBlur(editor) { console.log('onBlur', editor) },
customAlert(info: string, type: string) { window.alert(`customAlert in Vue demo\n${type}:\n${info}`) },
customPaste(editor, event, callback) {
console.log('ClipboardEvent 粘贴事件对象', event)
// const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
// const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
// const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据(如从 word wsp 复制粘贴)
// 自定义插入内容
editor.insertText('xxx')
// 返回 false ,阻止默认粘贴行为
event.preventDefault()
callback(false) // 返回值(注意,vue 事件的返回值,不能用 return)
// 返回 true ,继续默认的粘贴行为
// callback(true)
},
}
四,编辑器生命周期
-
监听数据修改
@onChange="onChange"
methods: {
//监听数据修改
onChange() {
console.log('修改数据', this.html)
},
},
五,工具栏配置
toolbarKeys
重新配置工具栏,显示哪些菜单,以及菜单的排序、分组。
// 重新配置工具栏
toolbarConfig: {
toolbarKeys:[
'headerSelect', // 菜单 key
'|', // 分割线
'bold', 'italic', // 菜单 key
]
},