引言

富文本編輯器有很多，對比了一下，還是決定用tinymce（號稱宇宙最強），基礎的插件確實好用，但是一些更好用的插件，比如格式刷等都是高級版（付費），當然也有人說去找不付費的富文本編輯器，那就考慮替換成本了

傳送門：
tinymce中文文檔

api英文版
本文項目的完整代碼

基礎概念&優(yōu)勢：

如何引入vue直接看文檔就行

---

話不多說，先看效果圖：

預覽效果：

完整配置代碼放在傳送門&文末

一、如何使用免費格式刷

• 找到 tinymice 的配置文件，分別在二維數(shù)組 plugins 、toolbar 安原有格式增加工具單詞名 formatpainter

• 下載格式刷 js 文件 ：傳送門

• 將格式刷文件 (包含下載的目錄), 放到如下目錄 項目 \public\vendor\dcat-admin\dcat\plugins\tinymce\plugins
  

• 大功告成：
  

二、上傳視頻 圖片 配置

先看效果:

圖片上傳

視頻上傳

代碼展示：

 // 圖片上傳const example_image_upload_handler = (blobInfo, progress) =>new Promise((resolve, reject) => {const xhr = new XMLHttpRequest();const url = `${process.env.BASE_URL}` + `api/upload/multipartFile`xhr.withCredentials = false;xhr.open("POST", url);xhr.upload.onprogress = (e) => {progress((e.loaded / e.total) * 100);};xhr.onload = () => {if (xhr.status === 403) {reject({message: "HTTP錯誤：" + xhr.status,remove: true});return;}if (xhr.status < 200 || xhr.status >= 300) {reject("HTTP錯誤：" + xhr.status);return;}const json = JSON.parse(xhr.responseText);if (!json || typeof json.location != "string") {reject("無效的JSON格式： " + xhr.responseText);return;}const location = `${process.env.BASE_URL}` + `api/static` + json.location// http: //192.168.10.231:8080/static// resolve(json.location);resolve(location);};xhr.onerror = () => {reject("由于XHR傳輸錯誤，圖像上傳失敗。錯誤代碼 " + xhr.status);};const formData = new FormData();formData.append("file", blobInfo.blob(), blobInfo.filename());xhr.send(formData);});const example_file_picker_callback = (callback, value, meta) => {if (meta.filetype === "media") {const input = document.createElement("input");input.setAttribute("type", "file");const that = this;input.onchange = async function () {const file = this.files[0];const isValid = await validateVideo(file);if (isValid) {var formData = new FormData();formData.append('file', file); // 假設file變量是你的視頻文件$.ajax({url: `${process.env.BASE_URL}` + `api/upload/multipartFile`,type: 'POST',data: formData,processData: false,contentType: false,success: function (response) {callback(`${process.env.BASE_URL}` + `api/static` + response.location);},error: function (xhr, status, error) {callback(error);}});} else {callback();}};input.click();}}

三、自定義具體的菜單欄–格式

有一個需求是要去除默認是字體選項（fontfamily）
效果圖如下：

具體配置：

menu: {format: {title: 'Format',// blocks fontfamilyitems: 'bold italic underline strikethrough superscript subscript codeformat | styles fontsize align lineheight | forecolor backcolor | language | removeformat'},},

四、完整的項目初始化配置

主要要展示 plugins 和 toolbar 、 menu

 tinyMCE.init({selector: "#mytextarea", // 選擇器，要初始化的textarea的ID// 其他配置項auto_focus: true,branding: false,language_url: window.PPATH + "/libs/tinymce/langs/zh_CN.js",language: "zh_CN",toolbar: true, //工具欄menubar: true, //菜單欄branding: false, //右下角技術支持inline: false, //開啟內聯(lián)模式elementpath: false,min_height: 400, //最小高度max_height: 500, //高度skin: "oxide",toolbar_sticky: true,visualchars_default_state: true, //顯示不可見字符image_caption: true,paste_data_images: true,relative_urls: false,// remove_script_host : false,removed_menuitems: "newdocument", //清除“文件”菜單plugins: "formatpainter,lists, advlist,autolink,autoresize,charmap,code,codesample,emoticons,fullscreen,image,media,pagebreak,preview,searchreplace,table,visualchars,wordcount", //依賴lists插件toolbar1: "undo redo | blocks | bold italic indent outdent  alignleft aligncenter alignright | bullist numlist ",toolbar2: "formatpainter emoticons alignjustif fullscreen  image insertdatetime media  preview  searchreplace textcolor wordcount",menu: {format: {title: 'Format',// blocks fontfamilyitems: 'bold italic underline strikethrough superscript subscript codeformat | styles fontsize align lineheight | forecolor backcolor | language | removeformat'},},images_upload_handler: example_image_upload_handler,// 視頻上傳----file_picker_callback: example_file_picker_callback,setup: function (editor) {// 省略。。。。},});

---

完整的項目代碼:

本文項目的完整代碼

綜上所述，TinyMCE是一個功能強大、易于集成和高度可定制的富文本編輯器，適用于各種在線編輯場景，如內容管理系統(tǒng)、論壇、博客和電子郵件客戶端等。