TinyMCE与vue2详细使用

TinyMCE与vue2详细使用

因为最近有一个需求，需要整一个编辑器，查看各种资料，看了许许多多，后来发现TinyMCE功能强大，界面美观，已经拥有非常好的拓展性，文档中也是写的非常详细，在此基础上我加上我的思考。
TinyMCE中文文档

安装TinyMCE

现在TinMCE已经推到了v6版本，兼容Vue3.0X版本，现在我们要说的是Vue2.0X版本和我们的TinyMEC，所以选用v5版本选用v3的组件，其实说到底不同版本的Vue只不过一些细微的差异和版本不同，其大体都是差不多的。

创建Vue文件，通过指令安装我们的编辑器

npm install tinymce@5.1.0 -S
npm install @tinymce/tinymce-vue@3.0.1 -S

安装好后在node_modules里找到这个文件

将里面你所需要的文件拉到我们本地文件中，Vue2的版本是public，其他的东西不是非常重要，唯独必须的就是skins其他则可以按需引入，这里我为了方便我结构目录是这样的。

其他没有用的可以删除。

使用组件，并自己封装一个组件

1. 创建文件MyTiny，名字自己取

2. 引用富文本组件，这个组件是通过v-model双向绑定内容数据，
   

3. 配置初始化内容。
   

这是从文档里弄的一些常用配置

• newdocument（新文档）
• bold（加粗）
• italic（斜体）
• underline（下划线）
• strikethrough（删除线）
• alignleft（左对齐）
• aligncenter（居中对齐）
• alignright（右对齐）
• alignjustify（两端对齐）
• styleselect（格式设置）
• formatselect（段落格式）
• fontselect（字体选择）
• fontsizeselect（字号选择）
• cut（剪切）
• copy（复制）
• paste（粘贴）
• bullist（项目列表UL）
• numlist（编号列表OL）
• outdent（减少缩进）
• indent（增加缩进）
• blockquote（引用）
• undo（撤销）
• redo（重做/重复）
• removeformat（清除格式）
• subscript（下角标）
• superscript（上角标）

其实这一步完成可以用了，也没有报错。

但其实还有两个问题，一个是我们需要中文汉化他，然后中间那一段黄色的内容，是告诉我们需要他们的账号申请秘钥。
4. 引入中文包，这里提供一个我用的

链接：https://pan.baidu.com/s/1XA0al3Zb_vvfomP1dUDvtQ
提取码：57oj

我们将中文包拉到这个位置

配置中文包识别的路径

已经是中文了

6. 解决黄色提示文字
   这里我们有两种方式去隐藏，第一种通过css隐藏这个提示框即可，不行可以加一个V-deep样式穿透

.tox .tox-notifications-container .tox-notification {
  display: none;
}

其实，用这种方式解决，如果只是个人玩玩是足够的，为什么需要秘钥其实是因为我们使用是他们线上的资源，这样我们最开始引入本地的资源文件没有用，而且用线上文件，挺影响性能的。

引入本地资源的Tinymce

在index.html里面映入js文件，这里还需要讲tinymce文件拉到本地资源（public）

至此大致已经完成了。

侧边无法映射的提示其实只需要找到这几个文件底部的那一行代码重新注释保存一下就好了

这样重新注释保存

接下来我们就试试引入插件，这里我插一嘴，在开篇我没什么要说这个功能强大以及拓展性大，只要是因为大部分可以通过插件形式去加入功能，可以自定义插件，提供一个良好的二次编辑环境，但是这个需要一点思维，不用担心这点，其库中有非常多功能齐全强大的插件，甚至我们没有必要去造这个轮子，还可以通过魔改一些插件达到自己的想法。

引入插件

使用code插件，首先这个插件存在于我们本地的plugins里面，如果没有的去官网下载，拖到自己的本地文件里就好了

用这种方式去引就好了

这样就可以查看你的源代码了同时还可以编辑

小结

vue2配置就是这样子，具体的细节需要翻文档，关于插件，我会后续研究，可能会进行具体讲解实现。
接下来让我们开始TinyMCE富文本之旅吧