vue tinymce 控制图片大小上传,以及富文本编辑框在dialog的问题

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

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

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


      
      
 


问题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, //是否初始化
    }
  },

你可能感兴趣的:(vue tinymce 控制图片大小上传,以及富文本编辑框在dialog的问题)