关于tinymce富文本编辑器实现双向绑定的方法

 

 

 

我在做后台管理系统的时候有个模块需要使用tinymce富文本编辑器去数据初始化，但是会遇到dom没有渲染的报undefined和get,set的问题

在网上查过常用的方法：

1.tinyce中自带set初始化方法，但是这个方法在初始化的时候经常会报dom没有渲染的错，半天没解决得了。

2.使用watch监听，这个方法是我在花裤衩大神那里看到的，在监听到tinymce值发生变化时重新赋值，但是光标一直会处在第一个位置，果断放弃了

我这里使用的是vue官方提供的组件自定义v-model双向绑定

vue自定义双向绑定方法

先自己封装一下tinymce组件

        <tinymce  :value="value" @input="tinymcechange" style="z-index: 10000;" :height="height" :width="width"></tinymce>

model方法

model: {
    prop: "value",
    event: "tinymcechange"
  },

向父组件传递事件

​
tinymcechange(e) {
      this.$emit("tinymcechange", e);
    }

​

最后在父组件中监听v-model即可实现

如果看完还是不懂可以私信我