powerpaste 粘贴时弹窗提醒安装flush

Question

vue2使用tinymce self-hosted，手动引入werpaste插件后，编辑器能正常运行，但粘贴Microsoft word时老是提示安装flush插件：

浏览器安装了flush插件后依然弹窗

项目结构：

封装的tinymce组件，Tinymce.vue:

<!-- tinymc富文本 -->
<template>
  <div>
    <editor
      v-model="myValue"
      :init="init"
      :disabled="disabled"
      @onClick="onClick"
    >
    </editor>
  </div>
</template>

<script>
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/skins/ui/oxide/skin.css";
import "@/assets/tinymce/zh_CN.js"; // 本地汉化
import "tinymce/themes/silver/theme";
import "tinymce/plugins/image";
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/icons/default"; // 图标 -解决测试环境找不icon问题
import "tinymce/plugins/autoresize";
import 'tinymce/plugins/paste'
export default {
  name: "tinymce",
  components: {
    Editor,
  },
  props: {
    //传入一个value，使组件支持v-model绑定
    value: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    plugins: {
      type: [String, Array],
      default:
        'lists code pagebreak charmap emoticons save preview print image media link powerpaste ' +
        'anchor codesample table wordcount fullscreen help searchreplace hr insertdatetime autoresize',
    },
    toolbar: {
      type: [String, Array],
      default:
      // 'undo redo | searchreplace | bold  italic | underline | strikethrough | alignleft  aligncenter alignright | outdent indent  blockquote  removeformat subscript superscript code codesample hr bullist numlist link image charmap preview anchor pagebreak insertdatetime  table  forecolor backcolor'
        "undo redo |  formatselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat hr",
    },
  },
  data() {
    return {
      //初始化配置
      init: {
        language_url: "@/asset/tinymce/langs/zh_CN.js", // 这里需要单独处理
        language: "zh_CN",
        height: 500,
        width:"100%",
        plugins: this.plugins,
        // 添加扩展插件
        external_plugins: {
          powerpaste: '../../assets/tinymce/powerpaste/plugin.min.js',
        },
        paste_merge_formats: false,
        powerpaste_word_import: 'propmt', // 参数可以是propmt, merge, clear，效果自行切换对比
        powerpaste_html_import: 'propmt',
        powerpaste_allow_local_images: true,

        toolbar: this.toolbar,
        branding: true,
        menubar: true,

        //    上传方式1：填写images_upload_url和images_upload_base_path
        images_upload_url: '/upload', //  图片上传地址
        images_upload_base_path: '/some/basepath',
        //此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
        //如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        //    上传方式2（建议这种）：自定义上传逻辑
        images_upload_handler: (blobInfo, success, failure) => {
          const img = "data:image/jpeg;base64," + blobInfo.base64();
          success(img);
        },
        resize: true,
      },
      myValue: this.value,
    };
  },
  mounted() {
    tinymce.init({});
  },
  methods: {
    //添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    //需要什么事件可以自己增加
    onClick(e) {
      this.$emit("onClick", e, tinymce);
    },
    clear() {
      this.myValue = "";
    },
  },
  watch: {
    value(newValue) {
      this.myValue = newValue;
    },
    myValue(newValue) {
      this.$emit("input", newValue);
    },
  },
};
</script>
<style scoped></style>

这是调用时的代码：

Answer 1

引自免费微信小程序：皆我百晓生

从你描述的问题来看，你在使用tinymce的powerpaste插件时遇到了粘贴Microsoft Word内容时提示安装flash插件的问题。但实际上，这个问题并不是由于缺少flash插件导致的，而是由于某些内容在粘贴时，tinymce无法正确解析，从而提示需要flash来处理这部分内容。实际上，现代的浏览器已经不再支持flash插件，因此这个提示是不必要的。

对于这个问题，你可以尝试以下解决方案：

1. 更新powerpaste插件版本：首先确保你的powerpaste插件是最新的版本。在某些旧版本中可能会存在这种问题，更新版本可能已经解决了这个问题。
2. 设置powerpaste的配置参数：在你的代码中，你已经设置了powerpaste_word_import和powerpaste_html_import为'propmt'，这意味着在粘贴Word或HTML内容时，会提示用户是否合并格式。你可以尝试将这两个参数设置为'merge'，这样在粘贴内容时会自动合并格式，而不是提示用户安装flash。同样地，设置paste_merge_formats为true也可以帮助合并格式。

对于你的代码，我注意到你的初始化配置init中有一些属性可能是不必要的或者设置不当的。例如，language_url应该指向的是语言文件的路径，而不是单独的语言代码。此外，你的外部插件路径也可能存在问题。以下是一个更新的配置示例：

import "tinymce/plugins/powerpaste"; // 确保正确引入powerpaste插件

// ...

init: {
  language: "zh_CN", // 直接设置语言代码，无需设置language_url
  height: 500,
  width: "100%",
  plugins: this.plugins, // 这里可以直接使用this.plugins变量，无需再次声明
  external_plugins: {
    powerpaste: '../../assets/tinymce/powerpaste/plugin.min.js', // 确保路径正确指向powerpaste插件
  },
  paste_merge_formats: true, // 合并格式设置
  powerpaste_word_import: 'merge', // 修改合并方式
  powerpaste_html_import: 'merge', // 修改合并方式
  // 其他配置...
}

如果问题仍然存在，可能需要检查你的项目结构和文件路径是否正确。确保所有依赖项都已正确安装和引入。另外，检查浏览器的控制台是否有任何错误提示或警告信息，这可能会提供有关问题的更多线索。