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

1.基本使用

1. 安装

2. 案例效果

3. 代码如下

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

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

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

实现思路：

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

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

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

1. 安装防抖函数库

npm install lodash

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

   
   

   3. debounce函数延迟了debouncedSearch方法的执行，300毫秒内如果有新的输入，将重新计时，直到没有新的输入后触发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: 1024 * 1024 * 300, // 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/7407338184638496818

   Tags：css visible