vue tinymce 控制图片大小上传，以及富文本编辑框在di

项目需求需要用到富文本编辑框，表格中操作富文本编辑框，最后选择用弹框的形式显示，注意弹框和富文本编辑框的坑

问题1：第二次打开弹框，富文本编辑框的内容为第一次的，未更新全新

原因：第一次弹框tinymce 组件未销毁，因此先于第二次dialog弹出，而第二次dialog中的传值也就后于富文本组件初始化，也就未被渲染了。
v-if="dialogFormVisible"

<el-dialog title="富文本编辑" :visible.sync="centerDialogVisible" center>
      <Tinymce v-model="conclusionDesc" v-if="dialogFormVisible"></Tinymce>
      <div slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEdit(conclusionDesc)">保存</el-button>
      </div>
 </el-dialog>

<script>
methods: {
  submitEdit(val) {
      this.centerDialogVisible = false
      this.dialogFormVisible = false
      console.log(Base64.encode(val)) //base64编码
   },
}
</script>

问题2：弹窗中的富文本组件的工具栏点击无响应

原因：tinycme和dialog中的样式冲突了，当我们F12把页面缩小，会发现，并不是点击toolbar没反应，而是菜单栏（toolbar）被置于底层了，dialog盖住了菜单栏
解决：修改tinycme中的样式文件，z-index: 都+00000，此文件中有多处z-index,请全部修改（另外，z-index = -1 这种就不需要修改了）

image.png
image.png

需求：上传图片的大小限制M以内

data() {
    const that = this
    return {
      // 自动生成的id
      tinymceId: this.id,
      init: {
        selector: `#${this.tinymceId}`,
        language_url: '/mtinymce/langs/zh_CN.js', // 语言包的路径
        language: 'zh_CN', //语言
        skin_url: '/mtinymce/skins/ui/oxide', // skin路径
        content_css: "/mtinymce/skins/content/default/content.css",
        icons_url: '/mtinymce/icons/default/icons.js',
        icons: 'default',
        height: this.height, //编辑器高度
        branding: false, //是否禁用“Powered by TinyMCE”
        menubar: false, //顶部菜单栏显示
        statusbar: false, //是否显示底部的状态栏
        plugins: this.plugins,
        toolbar: this.toolbar, // （自定义工具栏）
        // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
        // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        images_upload_handler: (blobInfo, success, failure) => {
          console.log(blobInfo, success, failure)
          const isLt10M = blobInfo.blob().size / 1024 / 1024 < 10;
          if (!isLt10M) {
            failure('上传图片大小不能超过 10MB!');
          } else {
            const img = 'data:image/jpeg;base64,' + blobInfo.base64()
            success(img)
          }
        },
        setup: (editor) => {
          // 初次化编辑器
          editor.on('init', () => {
            that.isInit = true //告知是初始化\
            if (that.value) {
              editor.setContent(that.value)
              that.isInit = false
            }
            editor.on('input change undo redo', () => {
              // this.value = editor.getContent()
              //此处设置为false很好解决光标前置问题
              that.isInit = false
            })
          })
        },
      },
      myValue: this.value,
      isInit: false, //是否初始化
    }
  },