记录自己的一次开发记录和各种需求wangeditor 使用场景，本次介绍的是wangeditor5在vue2中的使用。学会这个在vue3或者其他项目中，也是手拿把捏。慢慢看，终将有所收获。

1.基本使用

1. 安装

2. 案例效果

3. 代码如下<template>

<div style=&#;border: 1px solid #ccc;&#;>

<Toolbar v-show=&#;showIndex===0&#; style=&#;border-bottom: 1px solid #ccc&#; :editor=&#;editor&#; :defaultConfig=&#;toolbarConfig&#; :mode=&#;mode&#; />

<div class=&#;content&#;>

<Editor style=&#;height: 300px; overflow-y: hidden;&#; v-model=&#;html&#; :defaultConfig=&#;editorConfig&#; :mode=&#;mode&#; @onCreated=&#;onCreated&#; @onChange=&#;onChange&#; @onDestroyed=&#;onDestroyed&#; @onMaxLength=&#;onMaxLength&#; @onFocus=&#;onFocus&#; @onBlur=&#;onBlur&#; @customAlert=&#;customAlert&#; @customPaste=&#;customPaste&#; />

</div>

</div>

</template>

<script>

import &#;@wangeditor/editor/dist/css/style.css&#;;

import { Editor, Toolbar } from &#;@wangeditor/editor-for-vue&#;;

export default {

components: { Editor, Toolbar },

data() {

return {

editor: null,

html: &#;<h2> 立秋</h2><p>阳气收，万物敛云天收夏色，木叶动秋声。</p>&#;,

toolbarConfig: {},

editorConfig: { placeholder: &#;请输入内容...&#; },

mode: &#;default&#;, // or &#;simple&#;通过设置 **mode** 改变富文本模式， **&#;default&#;** 默认模式，基础所有功能。 **&#;simple&#;** 简洁模式，仅有常用功能。

showIndex: 0,

};

},

methods: {

onCreated(editor) {

this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错

},

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

this.showIndex = 0;

},

onBlur(editor) {

console.log(&#;onBlur&#;, editor);

},

customAlert(info, type) {

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)

},

// 分割

},

mounted() {

// 模拟 ajax 请求，异步渲染编辑器

// setTimeout(() => {

// this.html = &#;<p>模拟 Ajax 异步设置内容 HTML</p>&#;;

// }, );

},

beforeDestroy() {

const editor = this.editor;

if (editor == null) return;

editor.destroy(); // 组件销毁时，及时销毁编辑器

},

};

</script>

<style scoped>

.content {

width: %;

height: 300px;

/* background-color: #fcfcfc; */

}

</style>

2. 多个编辑界面使用同一个工具栏

需求需要实现的效果，文章的小标题要不可修改。

这个需求也是花费了不少时间，实现的基本效果如下：

实现思路：

• 首先获取对应的编辑器文本格式，再统一处理成wangeditor所能识别的数据格式
• 多个编辑界面就显示多个工具栏，通过onFocus聚焦时，让用户看到的工具栏，也就是用户所选择的编辑器所对应的工具栏
• 注意onCreated这个函数的使用

实现过程，可以看下面的代码，慢慢看，终将会有所收获。具体的实现代码如下：<template>

<div style=&#;border: 1px solid #ccc;&#;>

<div v-for=&#;(item,index) in list&#; :key=&#;index&#;>

<!-- 通过v-show隐藏工具栏，使得每个编辑界面只对应自己的工具栏 -->

<div v-show=&#;showIndex===item.index&#;>

<Toolbar style=&#;border-bottom: 1px solid #ccc&#; :editor=&#;item[&#;editor&#;+item.index]&#; :defaultConfig=&#;item[&#;toolbarConfig&#;+item.index]&#; :mode=&#;item[&#;mode&#;+item.index]&#; />

</div>

</div>

<div class=&#;content&#;>

<div v-for=&#;(item,index) in list&#; :key=&#;index&#;>

<h4>{{item[&#;title&#;+item.index]}}</h4>

<Editor style=&#;height: 100px; overflow-y: hidden;&#; v-model=&#;item[&#;html&#;+item.index]&#; :defaultConfig=&#;item[&#;editorConfig&#;+item.index]&#; :mode=&#;item[&#;mode&#;+item.index]&#; @onCreated=&#;onCreated(item,$event)&#; @onChange=&#;onChange&#; @onDestroyed=&#;onDestroyed&#; @onMaxLength=&#;onMaxLength&#; @onFocus=&#;onFocus(item,editor)&#; @onBlur=&#;onBlur&#; @customAlert=&#;customAlert&#; @customPaste=&#;customPaste&#; />

</div>

</div>

</div>

</template>

<script>

import &#;@wangeditor/editor/dist/css/style.css&#;;

import { Editor, Toolbar } from &#;@wangeditor/editor-for-vue&#;;

export default {

components: { Editor, Toolbar },

data() {

return {

editor: null,

html: &#;&#;,

toolbarConfig: {},

editorConfig: { placeholder: &#;请输入内容...&#; },

mode: &#;default&#;, // or &#;simple&#;

// 分割

html1: &#;&#;,

editor1: null,

toolbarConfig1: {},

editorConfig1: { placeholder: &#;请输入内容...&#; },

mode1: &#;default&#;, // or &#;simple&#;

showIndex: 1,

// 数据

list: [

{

index: 1,

title1: &#;标题一&#;,

editor1: &#;&#;,

html1: &#;&#;,

editorConfig1: { placeholder: &#;请输入内容...&#; },

mode1: &#;default&#;, // or &#;simple&#;

toolbarConfig1: {},

},

{

index: 2,

title2: &#;标题二&#;,

editor2: &#;&#;,

html2: &#;&#;,

editorConfig2: { placeholder: &#;请输入内容...&#; },

mode2: &#;default&#;, // or &#;simple&#;

toolbarConfig2: {},

},

{

index: 3,

title3: &#;标题三&#;,

editor3: &#;&#;,

html3: &#;&#;,

editorConfig3: { placeholder: &#;请输入内容...&#; },

mode3: &#;default&#;, // or &#;simple&#;

toolbarConfig3: {},

},

],

indextag: 1,

};

},

computed: {},

methods: {

onCreated(item, $event) {

let editor = $event;

this.list[item.index - 1][&#;editor&#; + item.index] = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错

console.log(&#;onCreated&#;, editor);

},

onChange(editor) {

console.log(&#;onChange&#;, editor.children);

},

onDestroyed(editor) {

console.log(&#;onDestroyed&#;, editor);

},

onMaxLength(editor) {

console.log(&#;onMaxLength&#;, editor);

},

onFocus(item, editor) {

this.indextag = item.index - 1; //list元素的下标

console.log(&#;item&#;, item);

console.log(&#;onFocus&#;, editor);

this.showIndex = item.index;

},

onBlur(editor) {

console.log(&#;onBlur&#;, editor);

},

customAlert(info, type) {

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)

},

},

mounted() {

// 模拟 ajax 请求，异步渲染编辑器

// setTimeout(() => {

// this.html = &#;<p>模拟 Ajax 异步设置内容 HTML</p>&#;;

// }, );

},

beforeDestroy() {

const editor = this.list[this.indextag][&#;editor&#; + (this.indextag + 1)];

if (editor == null) return;

editor.destroy(); // 组件销毁时，及时销毁编辑器

},

};

</script>

<style scoped>

.content {

width: %;

height: 300px;

background-color: #fcfcfc;

}

</style>

3. 边编辑边保存时，使用防抖

1. 安装防抖函数库

npm install lodash

2. 在Vue组件中引入并使用防抖函数<template>

<div>

<input type=&#;text&#; v-model=&#;searchText&#; @input=&#;debouncedSearch&#; placeholder=&#;Search...&#;>

<ul>

<li v-for=&#;result in searchResults&#; :key=&#;result.id&#;>{{ result.name }}</li>

</ul>

</div>

</template>

<script>

import { debounce } from &#;lodash&#;;

export default {

data() {

return {

searchText: &#;&#;,

searchResults: [],

};

},

methods: {

// 防抖函数，延迟毫秒执行搜索操作

debouncedSearch: debounce(function() {

// 执行搜索操作，例如发送网络请求或处理数据

// 可以在这里调用搜索函数

this.performSearch();

}, ),

performSearch() {

// 在这里执行实际的搜索操作，例如发送网络请求或处理数据

// 使用this.searchText来获取输入的搜索文本

// 然后更新this.searchResults数组来显示搜索结果

},

},

};

</script>

3. debounce函数延迟了debouncedSearch方法的执行，毫秒内如果有新的输入，将重新计时，直到没有新的输入后触发performSearch方法进行实际的搜索操作。
4. 通过使用防抖函数，可以节省资源并提高用户体验，避免在频繁触发的事件中重复执行操作。记得在组件销毁前取消防抖函数的注册，避免潜在的内存泄漏问题。

结合这个案例，可以在onChange的时候，进行防抖。如果事件被频繁触发，防抖能保证只有最后一次触发生效！ 前面 N 多次的触发都会被忽略。

节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件！

防抖相当于回城，节流相当于技能冷却

4. 图片和视频上传

onCreated是编辑器创建完毕时的回调函数

// 常事件如下：

onCreated1(editor) {

this.editor = Object.seal(editor)

console.log(&#;onCreated&#;, editor)

// 获取编辑器的配置

const editorConfig = this.editor.getConfig()

// 配置富文本图片的上传路径

editorConfig.MENU_CONF[&#;uploadImage&#;] = {

// server对应的 是上传图片的接口

server: &#;/api/MyExperiencePrimary/UploadRichResFile&#;,

fieldName: &#;wangeditor-uploaded-image&#;,

//这里的header是自己的请求头

headers: this.headers,

// 自定义插入图片

customInsert: (res, insertFn) => {

if (res.IsSuccess) {

这个数组是存储所有图片视频

this.conventionList.push(res.Data)

//insertFn 是回显插入的图片地址，地址由上传成功后端返回

insertFn(`/Content/ExperFile/${res.Data}`, &#;&#;, &#;&#;)

} else {

this.$message.error(res.ErrorMessage)

}

},

// 单个文件上传成功之后

onSuccess(file, res) {

console.log(`${file.name} 上传成功`, res.Data)

},

// 上传错误，或者触发 timeout 超时

onError(file, err, res) {

console.log(`${file.name} 上传出错`, err, res)

},

}

// 视频上传

editorConfig.MENU_CONF[&#;uploadVideo&#;] = {

// 上传视频的配置

fieldName: &#;wangeditor-uploaded-video&#;,

// server对应的 是上传视频的接口

server: &#;/api/MyExperiencePrimary/UploadRichResFile&#;,

maxFileSize: * * , // 300M

headers: this.headers,

// 自定义插入视频

customInsert: (res, insertFn) => {

//console.log(this.uploadFileArr)

console.log(res)

if (res.IsSuccess) {

this.conventionList.push(res.Data)

// 回显插入的视频

insertFn(`/Content/ExperFile/${res.Data}`, &#;&#;)

} else {

this.$message.error(res.ErrorMessage)

}

},

onSuccess(file, res) {

console.log(`${file.name} 上传成功`, res)

},

onError(file, err, res) {

console.log(`${file.name} 上传出错`, err, res)

},

}

// // 预览事件 (自定义的)

// this.editor.on(&#;preview&#;, () => {

// this.editorPreHtml = this.editor.getHtml()

// console.log(this.editorPreHtml)

// this.isPreViewVisible = true

// })

// //#endregion

// // 自定义全屏

// this.editor.on(&#;cusFullScreen&#;, () => {

// this.cusFullScreen = !this.cusFullScreen

// console.log(this.cusFullScreen ? &#;全屏&#; : &#;退出全屏&#;)

// })

// this.$nextTick(() => {

// //获取富文本中的图片和视频

// this.oldUploadFileArr = this.getUploadFile()

// console.log(&#;初始时&#;, this.oldUploadFileArr)

// })

},

在上传图片后,我们可能还会有删除图片的操作,删除的时候需要将后端的图片也删除掉。这里我给出我的思路

1. 在上传成功之后，保存每次上传成功返回的图片数据
2. 在onchange中获得所有的图片和视频数据，二者进行对比，过滤出需要删除的数据。

注：onchange编辑器内容、选区变化时的回调函数。

原文链接：https://juejin.cn/post/