tinymce扩展功能：1、行高、段落间距、格式刷；2、视频上传进度条；3、对复制的图片设置尺寸

一、需求描述

使用技术：

vue2 + tinymce5.4.1

实现效果图：
一、扩展插件：

二、视频上传进度条

二、行高、段落间距、格式刷插件

下载引入相关扩展插件，可以放在components目录下

import '@/components/tinymcePlugins/importword'// 导入Word
import '@/components/tinymcePlugins/paragraphspacing' //段落间距
import '@/components/tinymcePlugins/formatpainter' //格式刷
import '@/components/tinymcePlugins/lineheight' //行高

在plugins和toolbar中引入

plugins: 'importword formatpainter paragraphspacing lineheight'
toolbar: 'importword formatpainter paragraphspacing lineheight'

三、实现视频上传的进度条、对复制的图片设置尺寸

1、DOM：

<editor v-if="!reloading" v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick"> </editor>
<a-modal v-model="progressShow" title="上传进度" :zIndex="1500" :closable="false" :footer="null" :mask="false">
  <a-progress :percent="uploadProgress" status="active"></a-progress>
</a-modal>

2、data:

progressShow: false,
uploadProgress: 0,

3、computed:

  computed: {
    init() {
      let that = this
      return {
      // ......
        // 省略了其他的基础配置
        file_picker_types: 'file image media',  //分别对应三个类型文件的上传：link插件，image和axupimgs插件，media插件。
        file_picker_callback: function (callback, value, meta) {
          that.uploadProgress = 0
          let filetype;
          // 上传视频
          if (meta.filetype === "media") {
            filetype='.mp4, ‌.avi‌, .mpg, .mpeg‌, .wmv, ‌.mov‌, ‌.flv‌, .swf‌, ‌.rm‌, ‌.ram, ‌.mkv‌';  //限制文件的上传类型
          }
          // 上传图片
          else if (meta.filetype === "image") {
            filetype='.jpg, .jpeg, .png, .svg, .webp, .tif, .tiff, .gif, .raw';
          }
          // 上传文件
          else if (meta.filetype === "file") {
            filetype='.pdf, .txt, .zip, .rar, .doc, .docx, .xls, .xlsx, .ppt, .pptx';  //限制文件的上传类型
          }
          let input = document.createElement("input");
          input.setAttribute("type", "file");
          input.setAttribute('accept', filetype);
          input.onchange = function () {
            let file = this.files[0];
            let fd = new FormData();
            fd.append("file", file);
            fd.append('biz', "jeditor");
            fd.append("jeditor","1");
            // 视频、文件上传，显示进度条
            if (meta.filetype === "media" || meta.filetype === "file") {
              axios.post("/minio/upload", fd, {
                // 主要是这里，获取实时的上传进度
                onUploadProgress: progressEvent => {
                  that.progressShow = true;
                  that.uploadProgress = parseInt(Math.round((progressEvent.loaded * 100) / progressEvent.total));
                },
              }).then(res => {
                that.progressShow = false;
                if (meta.filetype === "file") {
                  callback(res.url, {text: file.name});
                } else {
                  callback(res.url);
                }
              }).catch(err => {
                that.progressShow = false;
              })
            }
            // 图片上传
            else {
              uploadAction("/minio/upload", fd).then((res) => {
                callback(res.url, {alt: file.name});
              });
            }
          };
          input.click();
        },
        setup: function (editor) {
          // 给复制粘贴而来的图片设置尺寸
          editor.on('paste', function (e) {
            setTimeout(() => {
              // 遍历所有粘贴的图片元素
              const imageDoms = editor.getBody().getElementsByTagName('img')
              for (let i = 0; i < imageDoms.length; i++) {
                imageDoms[i].width = imageDoms[i].naturalWidth
                imageDoms[i].height = imageDoms[i].naturalHeight
              }
            }, 100)
          });
        }
      }
    },
  },

原文地址：https://blog.csdn.net/qq_38118138/article/details/143484655

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！