TinyMCE 6 （Vue 3 + 阿里云上传）
TinyMCE编辑器简介
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。跟其他富文本编辑器相比，有着丰富的插件，支持多种语言，能够满足日常的业务需求并且免费。
话不多说直接干货：：
TinyMCE安装：
安装 tinymce
npm install tinymce -S安装 tinymce - vue
npm install @tinymce/tinymce-vue -S
组件安装完之后，在public目录下新建文件夹tinymce
找到node_modules文件夹下的tinymce，将tinymce文件夹中的 icons，plugins，skins，themes，tinymce.min.js 文件统统复制丢进去
langs文件内为中文包需下载 （官方语言包地址：zh-Hans.jsLanguage Packages | Trusted Rich Text Editor | TinyMCE）
下载地址在最下方如图
下载完成后丢入文件
TinyMCE使用：
引入插件
import Editor from "@tinymce/tinymce-vue";使用
引入所需要的富文本编辑器内部组件
import "tinymce/icons/default"; // 引用图标文件
// import "tinymce/skins/content/default/content.css";
import "tinymce/themes/silver";
import "tinymce/icons/default/icons";
import "tinymce/models/dom";
// tinymce插件可按自己的需要进行导入
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import "tinymce/plugins/advlist";
import "tinymce/plugins/anchor";
import "tinymce/plugins/autolink";
import "tinymce/plugins/autoresize";
import "tinymce/plugins/autosave";
import "tinymce/plugins/charmap"; // 特殊字符
import "tinymce/plugins/code"; // 查看源码
import "tinymce/plugins/codesample"; // 插入代码
import "tinymce/plugins/directionality";
import "tinymce/plugins/emoticons";
import "tinymce/plugins/fullscreen"; //全屏
import "tinymce/plugins/help";
import "tinymce/plugins/image"; // 插入上传图片插件
import "tinymce/plugins/importcss"; //图片工具
import "tinymce/plugins/insertdatetime"; //时间插入
import "tinymce/plugins/link";
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/nonbreaking";
import "tinymce/plugins/pagebreak"; //分页
import "tinymce/plugins/preview"; // 预览
import "tinymce/plugins/quickbars";
import "tinymce/plugins/save"; // 保存
import "tinymce/plugins/searchreplace"; //查询替换
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/template"; //插入模板
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/visualchars";
import "tinymce/plugins/wordcount"; // 字数统计插件
// import "tinymce/plugins/print";
// import "tinymce/plugins/hr";
// import "tinymce/plugins/imagetools";
// import "tinymce/plugins/textpattern";
import "tinymce/themes/silver/theme"; // 引用主题文件
import "tinymce/icons/default"; // 引用图标文件TinyMCE的init配置
const init = {
language_url: "/tinymce/langs/zh-Hans.js", // 中文语言包路径
language: "zh-Hans",
skin_url: "/tinymce/skins/ui/oxide", // 编辑器皮肤样式
content_css: "/tinymce/skins/content/default/content.min.css",
// menubar: false, // 隐藏菜单栏
content_editable: true, //其他配置项
autoresize_bottom_margin: 50,//初始化时指定编辑器集底部的大小
forced_root_block: "",//调整用于包装非块元素和文本节点的默认块元素 默认为p 可写入 div span 等
max_height: 800,
min_height: 650,
// height: 320,
branding: false,//禁用状态栏中显示的“由 Powered by Tiny”链接进行产品归属
toolbar_mode: "none",//扩展工具栏以容纳溢出的工具栏按钮
plugins:
'preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker formatpainter pageembed charmap mentions quickbars linkchecker advtable footnotes mergetags autocorrect typography advtemplate',
toolbar:
"code undo redo | aidialog aishortcuts | blocks fontsizeinput | align numlist bullist | forecolor backcolor bold italic underline strikethrough anchor lineheight | removeformat selectall image",
content_style: "p {margin: 5px 0; font-size: 16px;font-family: PingFangSC-Regular, PingFang SC;color: #555555}",//自定义 CSS 样式
font_size_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",//覆盖下拉工具栏按钮和菜单项中显示的字体大小
font_family_formats:
"微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方= PingFang SC, Microsoft YaHei, sans- serif; 宋体 = simsun, serif; 仿宋体 = FangSong, serif; 黑体 = SimHei, sans - serif; Arial = arial, helvetica, sans - serif;Arial Black = arial black, avant garde;Book Antiqua = book antiqua, palatino; ",//下拉工具栏按钮和菜单项中显示的字体
elementpath: false,//禁用编辑器底部状态栏
resize: false, // 禁止改变大小
statusbar: false, // 隐藏底部状态栏
powerpaste_allow_local_images: true,//不使用数据 URI 的 Base64 编码图像
autosave_ask_before_unload: false,//关闭当前窗口时是否应提示用户告知他们有未保存的更改
// images_upload_url: "https://project-homedo.oss-cn-shanghai.aliyuncs.com/",
images_upload_handler: (blobInfo) =>
//自定义上传到阿里云
new Promise(async (resolve, reject) => {
const obj = await selectHotTopic();
const name =
obj.data.key + "_" + String(blobInfo.filename()).replace(/&/g, "");
console.log("看一眼接口返回的参", obj);
var formData = new FormData();
formData.append("name", name); // 添加参数 key
formData.append("key", name); // 添加参数 name
formData.append("policy", obj.data.policy); // 添加参数 name
formData.append("OSSAccessKeyId", obj.data.OSSAccessKeyId); // 添加参数 name
formData.append("success_action_status", 200); // 添加参数 name
formData.append("signature", obj.data.signature); // 添加参数 name
formData.append("file", blobInfo.blob()); // 添加图片文件
try {
await uploadFile(formData);
resolve("https://project-homedo.oss-cn-shanghai.aliyuncs.com/" + name);
} catch (error) {
reject("上传失败");
}
}),
};TinyMCE需初始化
tinymce.init; // 初始化完整代码参考：
效果展示：
官方文档参考地址：TinyMCE 6