基于wangEditor 5实现一个简单的富文本编辑器组件，实现自定义上传图片。
官网地址：https://www.wangeditor.com/v5/for-frame.html#%E9%85%8D%E7%BD%AE
1. 安装依赖包：
npm i @wangeditor/editor --save
npm i @wangeditor/editor-for-vue --save2. 封装组件代码：
<template>
<div class="editor-wrapper">
<toolbar
:editor="editor"
:default-config="toolbarConfig"
:mode="mode"
/>
<editor
v-model="html"
:style="{height: height + 'px'}"
:default-config="editorConfig"
:mode="mode"
@onCreated="onCreated"
@onChange="onChange"
/>
<div v-if="maxlength" class="useful-num">
{{ useLen }}/{{ maxlength }}
</div>
</div>
</template>
<script>
import fileApi from '@/api/file';
import '@wangeditor/editor/dist/css/style.css';
import {Editor, Toolbar} from '@wangeditor/editor-for-vue';
export default {
name: 'customEditor',
components: {
Editor,
Toolbar
},
model: {
prop: 'value',
event: 'change'
},
props: {
value: {
type: String,
default: ''
},
maxlength: {
type: Number,
default: 0
},
height: {
type: [String, Number],
default: 300
}
},
watch: {
value(val) {
this.html = val;
}
},
data() {
return {
editor: null,
html: '',
toolbarConfig: { },
editorConfig: {
placeholder: '请输入内容',
MENU_CONF: {
uploadImage: {
// 自定义图片上传功能
customUpload: (resultFile, insertImgFn) => {
const formData = new FormData();
formData.append('file', resultFile);
// 将文件上传至服务器，res.data返回服务器存放文件的url
fileApi.postFileUpload(formData).then(res => {
// 插入图片，三个参数分别对应，url alt href
insertImgFn(res.data, '', res.data);
});
}
},
uploadVideo: {
// 自定义视频上传功能
customUpload: (resultFile, insertImgFn) => {
const formData = new FormData();
formData.append('file', resultFile);
// 将文件上传至服务器，res.data返回服务器存放文件的url
fileApi.postFileUpload(formData).then(res => {
// 插入视频，三个参数分别对应，url alt href
insertImgFn(res.data, '', res.data);
});
}
}
}
},
mode: 'default', // or 'simple'
useLen: 0
};
},
methods: {
onCreated(editor) {
this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
},
onChange() {
const text = this.editor.getText();
// 计算当前输入了多少文字
this.useLen = (text || '').length;
// 每次富文本内容改变，触发change事件
this.$emit('change', this.html);
}
},
beforeDestroy() {
// editor销毁
const editor = this.editor;
if (editor == null) {
return;
}
editor.destroy();
}
};
</script>
<style lang="scss" scoped>
.editor-wrapper{
z-index: 3;
position: relative;
/deep/.w-e-toolbar{
z-index: 2!important;
border: solid 1px #E6E9EC!important;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
.w-e-bar-item{
padding: 1px;
}
}
/deep/.w-e-text-container{
z-index: 1!important;
border: solid 1px #E6E9EC!important;
border-top: none!important;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
}
.useful-num{
position: absolute;
right: 6px;
bottom: 10px;
z-index: 99999;
font-size: 12px;
color: $text-3;
background: #fff;
padding: 0 6px;
height: 28px;
line-height: 28px;
}
</style>3. 父组件使用：
<template>
<editor
v-model="html"
:maxlength="8192"
@change="change"
/>
</template>
<script>
import Editor from '@/components/Editor';
export default {
name: 'EditorExample',
components: {
Editor
},
data() {
return {
html: ''
};
},
methods: {
change(val) {
console.log(val);
}
}
};
</script>
4. 真实项目使用：
封装了wangEditor富文本组件，并且设置了数据回显；
TextRich/index.vue
<template>
<div style="border: 1px solid #ccc; width: 100%">
<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="handleCreated"
@onChange="handleChange"
/>
</div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { DomEditor } from '@wangeditor/editor'
import { set } from 'vue'
export default {
components: {
Editor,
Toolbar
},
props: {
value: {
type: String,
default: ''
}
},
watch: {
value(val) {
setTimeout(()=>{
this.html = val
}, 1000)
}
},
data() {
return {
editor: null,
html: '',
mode: 'default',
editorConfig: {
// placeholder: '请输入内容...',
backColor: 'red', // 背景颜色
MENU_CONF: {
// 配置上传图片
uploadImage: {
customUpload: this.uploaadImg
},
uploadVideo: {
customUpload: this.uploaadVideo
}
}
},
toolbarConfig: {}
}
},
mounted() {
// // 模拟 ajax 请求，异步渲染编辑器
// setTimeout(() => {
// this.html =
// '<p>tupian </p><p>tupian</p><p><br></p><p><img src="https://img1.baidu.com/it/u=608404415,1639465523&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="tupian" data-href="https://img1.baidu.com/it/u=608404415,1639465523&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" style=""/></p>'
// }, 1500)
},
methods: {
handleCreated(editor) {
this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
// 设置工具栏详情
this.toolbarConfig = {
excludeKeys: ['insertVideo', 'uploadVideo', 'group-video', 'fullScreen']
}
},
handleChange(content) {
const toolbar = DomEditor.getToolbar(content)
// 查看工具栏列表toolbar.getConfig().toolbarKeys
this.$emit('change', this.html)
},
uploaadImg(file, insertFn) {
this.$emit('uploadImg', file, insertFn)
},
uploaadVideo(file, insertFn) {
this.$emit('uploadVideo', file, insertFn)
}
},
beforeDestroy() {
const editor = this.editor
if (editor == null) return
editor.destroy() // 销毁编辑器
}
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>父组件使用：
父组件是在el-form表中使用的
<template>
<div class="project-container">
<el-form ref="form" :model="ruleForm" label-position="left" class="form">
<el-form-item label="复现步骤" prop="reproduceStep" label-width="100px">
<RichText v-model="ruleForm.reproduceStep" :readOnlys="readOnlys" @change="richTextChangeData" @uploadImg="richTextUploadImg"></RichText>
</el-form-item>
</el-form>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import RichText from '@/components/RichText/index.vue'
export default Vue.extend({
name: 'Index',
components: {
RichText
},
data() {
return {
ruleForm: {
reproduceStep: ''
}
}
},
mounted() {
this.setFormData()
},
methods: {
richTextChangeData(val: string) {
// 获取最新的html数据
// this.ruleForm.reproduceStep = val
},
richTextUploadImg(file: any, insertFn: any) {
// 插入图片，调接口返回图片url,通过插入conteng
let imgUrl = 'https://img1.baidu.com/it/u=608404415,1639465523&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
insertFn(imgUrl)
// 设置只读
this.readOnlys = true
},
setFormData() {
this.ruleForm.reproduceStep =
'<p>tupian </p><p>tupian</p><p><br></p><p><img src="https://img1.baidu.com/it/u=608404415,1639465523&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="tupian" data-href="https://img1.baidu.com/it/u=608404415,1639465523&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" style=""/></p>'
}
}
})
</script>
