一、TinyMCE官网
二、官网介绍
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。
TinyMCE的优势：
开源可商用，基于LGPL2.1
插件丰富，自带插件基本涵盖日常所需功能（示例看下面的Demo-2）
接口丰富，可扩展性强，有能力可以无限拓展功能
界面好看，符合现代审美
提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”）
对标准支持优秀（自v5开始）
多语言支持，官网可下载几十种语言。
三、TinyMCE有三种模式
经典模式：基于表单，使用表单某字段填充内容，编辑器始终作为表单的一部分。
内联模式（inline）：将编辑视图与阅读视图合二为一，当其被点击后，元素才会被编辑器替换，而不是编辑器始终可见。
沉浸无干扰模式（distraction-free）：所谓‘沉浸模式’感觉就是TinyMCE强行将inline模式解释成了另一种风格。我们也不要揭穿它，假装不知道就好了。
重要的是，当使用内联模式时，TinyMCE没有使用iframe将编辑的内容与页面隔离，这样做的好处是内容可继承页面的CSS样式。编辑的内容将完全按照页面规定好的样式显示，从而提供真正的“所见即所得”的编辑体验。
四、vue3.3.4 + ts 集成 TinyMCE
要在Vue 3.3.4 + TypeScript项目中集成TinyMCE，可以按照以下步骤进行操作：
4.1、安装TinyMCE
使用npm或yarn安装最新版本的TinyMCE：
pnpm add tinymce @tinymce/tinymce-vue
4.2、业务页面使用
<template> <div class="container"> <div class="container-tinymce"> <Editor ref="tinymceEle" id="tinymceEle" :init="{plugins: 'link image code table'}" v-model="content"></Editor> </div> </div> </template> <script setup lang="ts"> import Editor from '@tinymce/tinymce-vue' let content:any = ref('') </script> <style scoped lang="less"> </style>
4.3、浏览器测试
看了好多资料，有的写的很复杂，实践下来，就是这么简单，更多tinymce插件集成待补充~
五、更多插件集成
待补充
参考链接
vue3 中 tinymce+tinymce-vue 富文本编辑器使用_vue富文本编辑器插件_MENGCAIXIU520的博客-CSDN博客
