vue3 中使用tinymce 粘贴网络图片不执行上传

Question

在vue3 中使用tinymce 粘贴图片的时候粘贴本地图片images_upload_handler这个方法就执行 粘贴网页上的图片images_upload_handler这个就不执行 是为什么 怎么样做才能在粘贴网络图片时也上传到服务器那？

const initOptions = computed(() => {
  const {height, options, toolbar, plugins} = props
  const publicPath = '/'
  return {
    selector: `#${unref(tinymceId)}`,
    // urlconverter_callback: function (url, node, onSave, name) {
    //   if (node === 'img' && url.startsWith('blob:')) {
    //     tinymce.activeEditor && tinymce.activeEditor.uploadImages()
    //     return url
    //   }
    //   if (node === 'img' && !url.startsWith('blob:')) {
    //     ElMessage.warning('复制网络图片时，外部机器可能无法访问，请下载到本地在复制')
    //     tinymce.activeEditor && tinymce.activeEditor.uploadImages()
    //     return "";
    //   }
    // },
    images_upload_handler: function (blobInfo, success, failure, progress) {
      let blob = blobInfo.blob();
      let data = new FormData();
      data.append('file', blob);
      data.append('newsId', props.newsId);
      uploadImg(data).then((res) => {
        //并且把返回之后的数据给加载到图片上面
        success(axios.defaults.baseURL + res.FILEPATH);
      })
    },
    // height,
    height: 800,
    toolbar,
    // menubar: 'file edit insert view format table',
    menubar: false,
    // 初始化完成
    init_instance_callback: (editor) => {
      console.log("初始化完成：", editor, props.newsId)
    },
    plugins,
    language_url: '/ERDSTrafficSystem/resource/tinymce/langS/zh_CN.js',
    language: 'zh-Hans',
    branding: false,
    default_link_target: '_blank',
    //黏贴功能
    paste_word_import: 'propmt',// 参数可以是propmt, merge, clear，效果自行切换对比
    paste_html_import: 'propmt',// propmt, merge, clear
    paste_allow_local_images: true,
    paste_data_images: true,
    paste_as_text: false,
    link_title: true,
    object_resizing: true,
    auto_focus: true,

    skin: 'oxide',
    skin_url: '/ERDSTrafficSystem/resource/tinymce/skins/ui/oxide',
    content_css: '/ERDSTrafficSystem/resource/tinymce/skins/ui/oxide/content.min.css',
    resize: false,

    ...options,
    setup: (editor) => {
      editorRef.value = editor
      editor.on('init', (e) => initSetup(e))
    }
  }
})

Answer 1

• 这篇博客: Vue项目引入自定义字体 && tinymce自定义字体的使用中的 tinymce富文本编辑器中进行购买字体的自定义 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• tinymce的默认字体是在node_modules的tinymce/themes/silver 下的theme.js和theme.min.js中，搜defaultFontsFormats就能看到。如果使用@tinymce/tinymce-vue的Editor未进行使用字体的定义，即font_formats参数的定义，则会默认启用defaultFontsFormats参数下的字体（这下面有一些也不可以商用的）。所以要进行font_formats的定义过滤那些收费的，修改font_formats修改富文本编辑器的字体选择列表，并加入自己购买的字体。

  

   

  因为theme.js和theme.min.js文件是在构建项目的时候加载进来的，手动篡改它肯定是不靠谱的。虽然font_formats加入了自己购买的字体，App.vue也配置过了自定义的字体，但有个问题是编辑的时候富文本编辑器上不能即时看到自定义的字体，只有在本机安装了的情况下才能即时看到，但是编辑完了在页面上可以看到。所以这就有个问题，就是编辑的那个人电脑上得装该字体，浏览的人不需要安装就可以正常访问看到该字体。