Vue3中使用tinymce全功能演示，包括开源功能

效果图：

1、下载插件:

npm i tinymce
npm i @tinymce/tinymce-vue

2、在node_modules文件夹中找到tinymce下的skins复制到项目public文件夹中

    （可以先创建一个tinymce文件夹）：

 

3、在tinymce官网中下载中文包，并放在刚刚创建的tinymce文件夹中

• Language Packages | Trusted Rich Text Editor | TinyMCE   前往官网
• 点击按钮下载全部语言包，解压放至tinymce文件夹
• TinyMCE中文文档中文手册  中文文档给大家作参考

4、在项目中建立components/TEditor文件夹封装tinymce(注释比较全 涵盖90%的功能)：

补充：

1、引入中文语言包有两种方案：

• 方案一：可以通过上面的第三步把所有语言包下载后，在初始化tinymce的时候指定语言及语言包

  language_url: "../../../public/tinymce/langs/zh_CN.js", // 语言包的路径，具体路径看自己的项目
  language: "zh_CN",

• 方案二：直接下载Chinese Simplified后将下载下来的zh-Hans解压放入tinymce中

language_url: "../../../public/tinymce/langs/zh-Hans.js", // 语言包的路径，具体路径看自己的项目
language: "zh-Hans",

2、如果使用 tinymce.activeEditor.setContent发现没办法为编辑器赋值的话可以考虑使用setTimeout等编辑器init初始化完后再赋值内容：

setTimeout(()=>{
 tinymce.activeEditor.setContent('123')
},1000)