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 = thisreturn {// ......// 省略了其他的基础配置file_picker_types: 'file image media',  //分别对应三个类型文件的上传：link插件，image和axupimgs插件，media插件。file_picker_callback: function (callback, value, meta) {that.uploadProgress = 0let 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].naturalWidthimageDoms[i].height = imageDoms[i].naturalHeight}}, 100)});}}},},