Vue 新手学习笔记：vue-element-admin 之 Tinymce 富文本编辑器回写问题

电玩女神 2023-02-15 01:23 62阅读 0赞

Vue 新手学习笔记：vue-element-admin 之 Tinymce 富文本编辑器回写问题

  • 问题描述
  • 问题分析
  • 解决方案

问题描述

Tinymce 富文本编辑器作为子组件引入时，如果富文本编辑器已经绑定过值，再通过 v-model 双向绑定去更新值时，值不会发生变化

这是我第三次单击编辑，此时由于富文本中已经有值，再次回写不生效，因此预览正确应该为 a，但是富文本中不正确。
在这里插入图片描述

问题分析

代码位置：/src/components/Tinymce/index.vue

该文件是 Tinymce 富文本子组件，其中监听器中 value 就是用来更新富文本中的值的

  1. watch: { 
  2.   value(val) { 
  3.     if (!this.hasChange && this.hasInit) { 
  4.       this.$nextTick(() =>
  5.         window.tinymce.get(this.tinymceId).setContent(val || ''))
  6.     }
  7.   },
  8. },

你会发现这个判断，含义是值不变化时才走下面的赋值，由于没研究过富文本，因此我通过简单粗暴的 console.log 对值进行分析，然后去找了这个值变动的地方，得出以下结论

  1. !this.hasChange
  • 第一次编辑： 由于富文本组件未初始化，直接通过 v-model 回写是成功的，此时没有触发这个监听器，但是会通过初始化函数 init_instance_callback 进行回写。
  • 第二次编辑： 富文本组件已初始化，此次编辑 value 监听器 成功触发回写，所以第二次也是成功的。但也会触发 init_instance_callback 中的 editor.on 函数，此时 this.hasChange 会被变成 true，目的是让你在编辑时候不会触发 value 监听器，因此 editor.on 这个函数应该是进入编辑状态的意思
  • 第三次编辑： 由于第二次中 this.hasChange 变成 true，因此 !this.hasChange 为 false，value 监听器 就不再起作用了，这也是为什么，第三次开始回写就不成功。

init_instance_callback

  1. init_instance_callback: editor => { 
  2.   if (_this.value) { 
  3.     editor.setContent(_this.value)
  4.   }
  5.   _this.hasInit = true
  6.   editor.on('NodeChange Change KeyUp SetContent', () => { 
  7.     this.hasChange = true
  8.     this.$emit('input', editor.getContent())
  9.   })
  10. },

解决方案

首先一点，我们不能去除 !this.hasChange 的判断，因为这个是为了防止你在编辑时候，触发回写导致卡顿与失去焦点，可以自己试下。

因此我的方案就是父组件去调用子组件中的赋值函数从而实现回写。

子组件函数：
搜下就有了，通过这个函数能实现回写

  1. setContent(value) { 
  2.   window.tinymce.get(this.tinymceId).setContent(value)
  3. },

父组件调用：
Tinymce 增加 ref 引用来获取子组件信息

  1. <tinymce ref="tinymce" v-model="form.text" :height="300" />

然后在编辑时候直接调用子组件的 setContent(value) 函数进行赋值

  1. if (this.$refs['tinymce'] !== undefined) { 
  2.   this.$refs['tinymce'].setContent(this.form.text)
  3. }

发表评论

表情：
评论列表 （有 0 条评论，62人围观）

还没有评论，来说两句吧...

相关阅读