在 vue.js + element-ui 中安装 tinymce富文本编辑器

官网：http://tinymce.ax-z.cn/

一、简介

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。

二、TinyMCE的优势：

• 开源可商用，基于LGPL2.1
• 插件丰富，自带插件基本涵盖日常所需功能（示例看下面的Demo-2）
• 接口丰富，可扩展性强，有能力可以无限拓展功能
• 界面好看，符合现代审美
• 提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”）
• 对标准支持优秀（自v5开始）
• 多语言支持，官网可下载几十种语言。

三、安装组件

第三方集成专区 -- Vue

点击进去

进去后的文档

执行命令：npm install @packy-tang/vue-tinymce 或者 E:/HBuilderX/plugins/npm/npm.cmd install @packy-tang/vue-tinymce，最后在node_modules文件夹 生成 @packy-tang文件夹/vue-tinymce文件夹

四、官网的引用

五、实际项目

1、在node_modules文件夹 生成的 @packy-tang/vue-tinymce文件夹，将vue-tinymce文件夹 复制到 某个components文件夹里面

2、将tinymce.min.js放于 public/static/js文件夹

下载地址：https://unpkg.com/[email protected]/tinymce.min.js

tinymce.min.js的存放位置

3、问题：

3-1、tinymce.min.js的引用问题

可以直接引用线上的路径，本人建议将tinymce.min.js下载，引用自己项目的路径

• A、代码如下：

• B、报错：

报错.png

• C、解决：

我们项目的引用要放到public/index.html

3-2、vue-tinymce.vue里面的render位置问题

• A、代码如下：

• B、报错：

报错.png

• C、解决：

  
  
  将render方法 放于 所有方法的最后

3-3、CHANGELOG.md

• A、报错：

报错.png

• B、解决：

直接删除CHANGELOG.md

3-4、README.md

• A、报错：

报错.png

• B、解决：

直接删除README.md

3-5、LICENSE

• A、报错：

报错.png

• B、解决：

直接删除LICENSE

3-6、vue-tinymce.cjs.js.map缺少module.exports =

• A、代码如下：

代码.png

• B、报错：

报错.png

• C、解决：

解决.png

3-7、vue-tinymce.esm.js.map缺少module.exports =

• A、代码如下：

代码.png

• B、报错：

报错.png

• C、解决：

解决.png

3-8、vue-tinymce.umd.js.map缺少module.exports =

• A、代码如下：

代码.png

• B、报错：

报错.png

• C、解决：

解决.png

3-9、Uncaught SyntaxError: Unexpected token '<'

• A、代码如下：

代码.png

• B、报错：

报错.png

• C、解决：

不知道为什么引用线上的tinymce.min.js路径，就不会报错

四、效果图

tinymce编辑器终于出来啦！