引言
富文本编辑器有很多，对比了一下，还是决定用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 fontfamily
items: '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 fontfamily
items: '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是一个功能强大、易于集成和高度可定制的富文本编辑器，适用于各种在线编辑场景，如内容管理系统、论坛、博客和电子邮件客户端等。
