Vue使用tinymce富文本编辑器组件 实现多附件上传、批量上传

场景：

由于维护老项目 用的tinymce富文本编辑器，运营人员觉得单个上传附件太复杂了于是提出了 多附件上传的优化

查看文档发现 tinymce插件本身并不支持选择多附件上传，但是他会有拓展组件支持此功能。

再次放下拓展组件传送门ax多图片批量上传插件 | TinyMCE中文文档中文手册

实现：

最下方会给出完整使用代码

1.资源配置

首先根据上面链接下载相应的文件axupimgs.zip

解压后可以将upfiles.html放在public目录，js文件可以放在assets文件夹中（目录名无所谓只要引入正确就可以）

由于我们移动了html文件的位置 因此也需要需改一下响应plugin.js的引入路径 见下图  （代码实现非常简单，有能力的可以阅读下代码 修改想要的其他需求）

2.代码实现

如何使用这个拓展插件

首先在使用的页面进行引用上方的plugin.js

import "@/assets/js/plugins/axupimgs/plugin";

初始化配置富文本配置

以下为完整配置：其实主要的改动就是

toolbar里添加axupimgs

plugins里添加axupimgs

     setting: {
        menubar: false,
        toolbar:
          "undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | image axupimgs table | numlist bullist | link unlink | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |",
        plugins: "link image  table lists fullscreen axupimgs",
        language: "zh_CN",
        height: 350,
        images_upload_url: true,
        images_upload_handler: function (blobInfo, succFun, failFun) {
          var formData = new FormData();
          let url = "/common/qiniu/upload";
          formData.append("file", blobInfo.blob()); //此处与源文档不一样

          axios
            .post(url, formData, {
              headers: signActionTime("post", formData),
            })
            .then((response) => {
              console.log(response);
              succFun(response.data.result.url);
            })
            .catch((error) => {
              failFun(error);
            });
        },
      },

3.完整代码

<template>
  <div class="company_add">
    <vue-tinymce v-model="ruleForm.content" :setting="setting" />
  </div>
</template>

<script>
import constant from "constant";
import { ERR_OK } from "constant/statusCode";// 请求状态吗200
import axios from "axios";
import { signActionTime } from "util/js/headerToken";  //为上传服务器的请求头 无需在意
import "@/assets/js/plugins/axupimgs/plugin";
export default {
  data() {
    return {
      uploadUrl: constant.GLOBAL_CONFIG.UPLOADIMG_Url,
      myHeaders: {},
      ruleForm: {
        content: "", //内容
      },
      setting: {
        menubar: false,
        toolbar:
          "undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | image axupimgs table | numlist bullist | link unlink | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |",
        plugins: "link image  table lists fullscreen axupimgs",
        language: "zh_CN",
        height: 350,
        images_upload_url: true,
        images_upload_handler: function (blobInfo, succFun, failFun) {
          var formData = new FormData();
          let url = "/common/qiniu/upload";
          formData.append("file", blobInfo.blob()); //此处与源文档不一样

          axios
            .post(url, formData, {
              headers: signActionTime("post", formData),
            })
            .then((response) => {
              console.log(response);
              succFun(response.data.result.url);
            })
            .catch((error) => {
              failFun(error);
            });
        },
      },
    };
  },
};
</script>

<style lang="scss" scoped></style>