【Tinymce】富文本编辑器在vue项目中的使用；引入付费格式刷，上传视频、图片

引言

富文本编辑器有很多，对比了一下，还是决定用tinymce（号称宇宙最强），基础的插件确实好用，但是一些更好用的插件，比如格式刷等都是高级版（付费），当然也有人说去找不付费的富文本编辑器，那就考虑替换成本了

传送门：
tinymce中文文档

api英文版
本文项目的完整代码

基础概念&优势：

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

---

话不多说，先看效果图：

预览效果：

完整配置代码放在传送门&文末

一、如何使用免费格式刷

• 找到 tinymice 的配置文件，分别在二维数组 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, //开启内联模式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是一个功能强大、易于集成和高度可定制的富文本编辑器，适用于各种在线编辑场景，如内容管理系统、论坛、博客和电子邮件客户端等。