吐槽

不得不说使用Tinymce富文本的过程中可是出现了不少问题bug，搞得真让人发狂！！！

1. 前端默认写在data（）中的初始标题数据传不到后端（！）
2. 标题能传到后端但是自己自定义输入的内容传不了（！！）
3. 自定义输入的内容能传了，但是对于多个 富文本 框输入不同的内容 传到后端的确实 前一次某个 富文本框 输入的一个固定内容（！！！）
   一顿操作以为解决了，没想到还是太年轻
4. 能正确传递多个自定义输入的文本框内容，但是修改的时候出问题了，修改之后还是原来的内容（叹气！！！！）
5. 又又是一系列操作，解决了修改问题，但是 修改页面内容回显又不干了（。。。。。。）
   好在最后还是成功了

一、问题描述

前端采用Tinymce富文本框录入用户输入的文本信息数据

问题1-表单中富文本初始标题内容可以传递后端，自定义输入的内容却不可以

表单中 的 初始标题数据 能传入到后端

而输入的内容却不能传过去

开始感觉是 双向绑定出了问题，删了value="xxx"数据绑定之后发现，修改之后只有一个数据一致能传递

不论填写什么，都传之前填写的内容

最后发现竟然是 getHtml()方法前加了 await

问题1-解决

将await删除，然后测试就可以了

问题2-内容不能修改

thymce/index.vue代码

<template>
  <div>
    <section :id="tinymceId"></section>
  </div>
</template>

<script>
import "./themes/silver/theme.min.js";
import "./langs/zh_CN.js";
export default {
  props: {
    // 对比其他vue-tinymce组件都要传入id我感到很不解，因为根本没这个必要，所以接下来先解决id自管理问题。
    id: {
      type: String,
      default: function () {
        return (
          "vue-tinymce-" +
          +new Date() +
          ((Math.random() * 1000).toFixed(0) + "")
        );
      },
    },
    value: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      // 自动生成的id
      tinymceId: this.id,
      tinymceFlag: 1,
      hasChange: false,
      hasInit: false,
    };
  },
  mounted() {
    tinymce.init({
      selector: `#${this.tinymceId}`,
      language: "zh_CN",
      //菜单栏
      menubar: "bar1 bar2",
      menu: {
        bar1: { title: "菜单栏", items: "copy paste" },
      },
      //工具栏
      toolbar:
        "undo redo | styleselect | bold italic | forecolor backcolor | alignleft aligncenter alignright ",

      init_instance_callback: (editor) => {
        // if (this.value) {
        //   editor.setContent(this.value);
        // }
        // this.hasInit = true;
        // editor.on("", () => {
        //   this.hasChange = true;
        //   this.$emit("input", editor.getContent());
        // });
        
      //input和change事件
        editor.on('input',(e) => {
          this.$emit('input',e.target.innerHTML);
        });
        editor.on('change',(e) => {
          this.$emit('input',e.level.content)
        })
      },
      //初始化内容
      setup: (editor) => {
        editor.on("init", (e) => {
          editor.setContent(this.value);
          //this.hasInit = true;
        });
      },
      height: 600,
    });
  },
  created() {},
  // 监听 富文本 的 值，根据hasInit自定义属性判断是否初始化了
  watch: {
    // 当传入值变化时跟新富文本内容
    value: function (val, old) {
      if (this.hasInit) {
        this.$nextTick(() =>
          window.tinymce.get(this.tinymceId).setContent(val)
        );
      }
    },
  },
  methods: {
    // 设置内容
    setContent(value) {
      window.tinymce.get(this.tinymceId).setContent(value);
    },
    // 获取内容
    getContent() {
      window.tinymce.get(this.tinymceId).getContent();
    },
    // 销毁
    destroyTinymce() {
      const tinymce = window.tinymce.get(this.tinymceId);
      if (this.status) tinymce.destroy();
      if (tinymce) {
        tinymce.destroy();
      }
      console.log('aa')
    },
  },
};
</script>

<style>
@import url("./skins/ui/oxide/skin.min.css");
</style>

参考：https://segmentfault.com/a/1190000009621081

只要传入字段(props)包含value，使用v-model就能从value获得绑定数据，然后当富文本编辑器数据跟新时使用$emit(‘input’, value)方法便能通知变化跟新value。

代码解析参考这个：

# main.js
tinymce.init({
    selector: 'textarea',
    // 获得editor，当有多个textarea实例时会多次调用setup
    setup: (editor)=> {
        // 初次化编辑器
        editor.on('init', ()=>{
            // 设置默认值
            editor.setContent('<p>Default Value!</p>');
            // 注册事件
            editor.on('input change undo redo', ()=>{
                // 获得编辑结果
                console.log(editor.getContent());
            });
        });
    }
})

问题3-修改时内容不能回显

前端的说，这个应该是因为tinymce在获取后台数据之前就创建好了 但他不支持数据的双向传递 所以html的变化没传到里边

也就是value变化的慢，所以要延缓setContent

修改后

直接使用v-model传值即可

目前理解就这些