wangeditor富文本编辑器在vue2中的使用

官方使用方法

https://www.wangeditor.com/v5/for-frame.html

1、安装

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save
yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

1. 使用

模板

<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>

js

<script>
// import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
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 src="@wangeditor/editor/dist/css/style.css"></style>

项目运用包括图片上传功能

注意事项：

1. 后台提供上传图片接口

import { editorUpImg } from '@/api/cms/content.js'

2. 配置

editorConfig: {
placeholder: '请输入内容...',
// 所有的菜单配置，都要在 MENU_CONF 属性下
MENU_CONF: {
//配置上传图片
uploadImage: {
customUpload: this.uploadImg
}
}
},

完整代码及运用

1. 新建一个myEditor.vue文件

<template>
<div>
<div style="border: 1px solid #ccc;">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editor"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 400px; overflow-y: hidden;"
v-model="html"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="onCreated"
/>
</div>
</div>
</template>
<script>
// npm 安装
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { editorUpImg } from '@/api/cms/content.js'
export default {
components: { Editor, Toolbar },
props: {
myHtml: {
type: String,
default: ''
}
},
data() {
return {
editor: null,
html: '',
toolbarConfig: {
excludeKeys: [
// 排除菜单组，写菜单组 key 的值即可
"group-video" //去掉视频
]
},
editorConfig: {
placeholder: '请输入内容...',
// 所有的菜单配置，都要在 MENU_CONF 属性下
MENU_CONF: {
//配置上传图片
uploadImage: {
customUpload: this.uploadImg
}
}
},
mode:"default"
};
},
watch: {
myHtml: {
deep: true,
handler(val) {
this.html = val
}
}
},
created() {
if(this.myHtml!==''){
this.html = this.myHtml
}
},
methods: {
getVal () {//父组件获取子组件的值
return this.html
},
//上传图片
uploadImg(file, insertFn){
let imgData = new FormData();
imgData.append('file', file);
//调接口，上传图片
editorUpImg(imgData).then(res => {
if(res.code == 0){
insertFn(res.data);
}else{
}
})
},
onCreated(editor) {
this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
},
},
mounted() {
},
beforeDestroy() {
const editor = this.editor
if (editor == null) return
editor.destroy() // 组件销毁时，及时销毁编辑器
},
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

2. 引用组件

import MyEditor from './myEditor.vue'

3. 在模板中使用组件

<MyEditor :myHtml="form.contentDetails" ref="myEditor"></MyEditor>

4. 根据ref获取编辑器中的值(this.$refs[ref].getVal())

this.$refs['myEditor'].getVal()