vite + vue3 + ts 安装 tinymce 富文本编辑器

TinyMCE

TinyMCE 是一个轻量级的基于浏览器的所见即所得编辑器，支持目前流行的各种浏览器，由JavaScript写成。功能配置灵活简单（两行代码就可以将编辑器嵌入网页中），支持AJAX。

项目：https://github.com/tinymce/tinymce
官网：https://www.tiny.cloud

TinyMCE 针对不同的框架有三个版本：tinymce-vue、tinymce-react、tinymce-angular。

TinyMCE-Vue

tinymce-vue，是 TinyMCE 官方，把 TinyMCE 集成到 Vue 项目中。这个包是 TinyMCE 的一个应用安装包，使它更容易在 Vue 应用程序中使用。tinymce-vue 依赖 tinymce ，所以使用的时候，需要两个包：tinymce和@tinymce/tinymce-vue。TinyMCE 官网安装文档。

Using the Tiny Cloud，需要免费申请api-key，会得到一个api-key 密钥。申请的时候，需要自己有单独的域名，便于绑定使用。在使用的时候，会自动从官方项目中，加载最新版本的tinymce，所以在本地只下载@tinymce/tinymce-vue即可。
Using a package manager，是自托管方式，需要把两个包：tinymce和@tinymce/tinymce-vue，下载到本地。我们采用这种方式来安装制作 vue 组件。

第一步：安装

与vue3相匹配的@tinymce/tinymce-vue@^4版本。

#安装 tinymce
npm install tinymce

#安装 typscript版
npm install @types/tinymce -D#安装 tinymce-vue
npm install "@tinymce/tinymce-vue@^4"

查看已经安装的全部包

npm list

查看已经安装的 tinymce 包

npm list tinymce

显示如下：
├─┬ @tinymce/tinymce-vue@4.0.7
│ └── tinymce@5.10.5
└── tinymce@6.1.2

查看已经安装的 tinymce-vue 包

npm list @tinymce/tinymce-vue

显示如下：
@tinymce/tinymce-vue@4.0.7

在项目根目录下，查看安装目录

tree -L 2 ./

此应用包共有两个目录文件：tinymce和@tinymce。以后若需要卸载的话，可以直接删除这两个目录文件。

第二步：安装汉化语言包

tinymce 默认是英文的，需要汉化。语言包下载列表，选择Chinese Simplified，解压得到zh-Hans.js文件。

然后，在/node_modules/tinymce下，新建设目录langs，把zh-Hans.js复制过去。注意：langs目录必须与themes，处于同等目录下，否则不起作用。

第三步：创建皮肤样式目录

在项目根目录下的/pulic下，新建设tinymce目录，并且把node_modules/tinymce/skins目录下所有文件（是 tinymce 皮肤样式文件）复制过来。

mkdir -p ./public/tinymce
cp -rf ./node_modules/tinymce/skins/* ./public/tinymce

tinymce 的主题（theme）跟皮肤（skin）是相互分离的，皮肤（skin）主要是字体、图标、css等一些内容。tinymce6 主题风格（theme）默认主题称为Silver，可以在./node_modules/tinymce/themes目录中。主题（theme）提供编辑器用户界面组件，例如按钮、对话框和菜单。要更改编辑器外观，请自定义皮肤、图标和其他用户界面元素，例如工具栏。

安装了依赖为什么还要从 node_modules 里复制一份出来？因为复制出来的是 tinymce 的皮肤资源文件，放到 public 中，在项目打包时 public 文件夹的静态资源会直接复制，而不经过 webpack 处理，这样部署在线上才能保证 tinymce 不会缺失样式。

第四步：创建组件

在components下，新建设TinymceEditor.vue文件。

 
 
.tinymce-box {
  width: 100%;
} 

第五步：使用组件

在TopicPost.vue中，使用此组件的方式：

 element-plus 表单
  
    
      
    
    ......  ......
    双向数据绑定了，element-plush 表单数据。
    
      提交 

第六步：创建 typescript 类型声明文件

使用 typescript 版本的时候，会出现提示：无法找到模块“tinymce/models/dom”的声明文件。xxxxxx。解决办法，在项目根目录下，新建设tinymce.d.ts文件：

/// 

declare module 'tinymce/models/dom';
declare module 'tinymce/themes/silver';
declare module 'tinymce/icons/default';
declare module 'tinymce/langs/zh-Hans';
declare module 'tinymce/plugins/advlist';
declare module 'tinymce/plugins/anchor';
declare module 'tinymce/plugins/autolink';
declare module 'tinymce/plugins/autoresize';
declare module 'tinymce/plugins/autosave';
declare module 'tinymce/plugins/charmap';
declare module 'tinymce/plugins/code';
declare module 'tinymce/plugins/codesample';
declare module 'tinymce/plugins/directionality';
declare module 'tinymce/plugins/emoticons';
declare module 'tinymce/plugins/fullscreen';
declare module 'tinymce/plugins/help';
declare module 'tinymce/plugins/image';
declare module 'tinymce/plugins/importcss';
declare module 'tinymce/plugins/insertdatetime';
declare module 'tinymce/plugins/link';
declare module 'tinymce/plugins/lists';
declare module 'tinymce/plugins/media';
declare module 'tinymce/plugins/nonbreaking';
declare module 'tinymce/plugins/pagebreak';
declare module 'tinymce/plugins/preview';
declare module 'tinymce/plugins/quickbars';
declare module 'tinymce/plugins/save';
declare module 'tinymce/plugins/searchreplace';
declare module 'tinymce/plugins/table';
declare module 'tinymce/plugins/template';
declare module 'tinymce/plugins/visualblocks';
declare module 'tinymce/plugins/visualchars';
declare module 'tinymce/plugins/wordcount'; 

卸载 tinymce-vue

出于某种原因（比如重新安装最新版）需要卸载 tinymce-vue 的时候，使用命令，包的名称与安装的时候相同：

npm remove @tinymce/tinymce-vue
npm remove @types/tinymce
npm remove tinymce

手工卸载 tinymce-vue

上面的命令，一般是能卸载掉了。若卸载失败。那么使用rm命令，强制删除安装包目录文件，然后再从package.json文件中手工去掉加载项。

cd ./node_modules

rm -rf  @tinymce
rm -rf  @types/tinymce
rm -rf  tinymce

查看缓存目录

npm config get cache

显示结果，用来清空其中缓存，不同设置上，会不同
/root/.npm

删除缓存

rm -rf /root/.npm/*

到此手工删除完毕，可以重新安装了。

tiptap

tiptap 编辑器基于 Prosemirror，完全可扩展且无渲染。可以轻松地将自定义节点添加为 Vue 组件。使用无渲染组件（函数式组件），你将（几乎）完全控制标记和样式。菜单的外观或在DOM中的显示位置。这完全取决于使用者。多人在线实时协同编辑。

项目：https://github.com/ueberdosis/tiptap
官网：https://tiptap.dev/

tiptap 最初是为 Vue2 开发的，现在已发展成为独立框架工具，对 Vue3、React、Svelte 集成友好。它基于 Prosemirror 进行扩展开发，是一款无头(headerless)富文本编辑器，默认情况下，它没有任何 UI 样式，你完全可以自己来配置想要的 UI，不需要重写 class，也不需要 important 代码。

tiptap 功能非常强大，功能插件丰富。但它比其他编辑器更棒的地方在于多人在线实时编辑。类似于谷歌文档那种效果，所有使用者在同一个页面彼此能看到对方的光标位置和名字，大家同时在线协同编辑。整个协同体验流畅，如果你的应用场景需要多人实时协同编辑，选 tiptap 就对了。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com