Vue解决报错5_Tinymce 富文本不能传递双向绑定的数据到后端、使用过程遇到问题及解决

吐槽

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

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

一、问题描述

前端采用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传值即可
在这里插入图片描述

目前理解就这些