一、需求描述

使用技術(shù)：

vue2 + tinymce5.4.1

實(shí)現(xiàn)效果圖：
一、擴(kuò)展插件：

二、視頻上傳進(jìn)度條

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

下載引入相關(guān)擴(kuò)展插件，可以放在components目錄下

import '@/components/tinymcePlugins/importword'// 導(dǎo)入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'

三、實(shí)現(xiàn)視頻上傳的進(jìn)度條、對(duì)復(fù)制的圖片設(shè)置尺寸

1、DOM：

<editor v-if="!reloading" v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick"> </editor>
<a-modal v-model="progressShow" title="上傳進(jìn)度" :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 {// ......// 省略了其他的基礎(chǔ)配置file_picker_types: 'file image media',  //分別對(duì)應(yīng)三個(gè)類型文件的上傳：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");// 視頻、文件上傳，顯示進(jìn)度條if (meta.filetype === "media" || meta.filetype === "file") {axios.post("/minio/upload", fd, {// 主要是這里，獲取實(shí)時(shí)的上傳進(jìn)度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) {// 給復(fù)制粘貼而來的圖片設(shè)置尺寸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)});}}},},