环境
VUE webpack tinymce4
额外插件
- 用于优化本地图片上传的第三方插件：tinymce-imageupload
- 用于加强word源复制粘帖的官方插件（这是收费插件，我这里不提供资源，只是教大家怎么配置）：wordpress
开撸
安装tinymce-vue
npm install @tinymce/tinymce-vue -S
安装tinymce 4.x.x
npm install tinymce@4.5.10 -S
安装好之后，需要将node_modules目录下面的tinymce/skins目录放到一个可以访问到的地方（一般来说是static目录，也可以是CDN之类的，反正能访问到就行）
<u>特别注意：本文内容是基于tinymce4所搭建的，现在最新的已经是5.x.x的版本了，结构目录有所改变，需要调整skin_url和导入对应的主题。</u>
安装中文语言包
官网语言包下载地址
选择你想要的语言下载即可（别跟我说不认识Chinese (China)）
下载后将得到zh_CN.js文件（以简体中文为例），同样，放到一个你能访问到的地方（static目录或CDN）
引入依赖项
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/modern/theme'; // 具体有有些默认主题，可以在`node_modules`的`tinymce`下找到（这个据我所知，也是必须要引入的）
import Editor from '@tinymce/tinymce-vue';
初始化编辑器
添加配置对象：
content: '',
editorInit: {
language: 'zh_CN', // 指定语言
language_url: '/static/tinymce/zh_CN.js', // 指定语言包地址
skin_url: '/static/tinymce4/skins/lightgray', // 指定主题地址（必须项，否则编辑器不能成功渲染出来）
height: 300
}
在templete中添加一个Editor元素
<editor v-model='content' :init='editorInit'></editor>
完成！应该就可以看到页面能成功将编辑器渲染出来了。
添加插件
tinymce已自带了很多常用插件，但是很多默认是不启用的，需要主动引用并配置才行，这里我们以添加全屏插件fullscreen为例：
- 引入
import 'tinymce/plugins/fullscreen';
在editorInit中配置
editorInit: {
...
plugins: "fullscreen", // 多个插件，用空格分隔
...
}
常用配置
editorInit: {
...
statusbar: false, // 是否显示底部状态栏
menubar: false, // 配置菜单栏（设置为false则隐藏）
toolbar: "fullscreen | bold italic", // 工具之间用空格分隔，| 表示显示一个分块符
// editor为当前编辑器的实例对象
setup: function(editor) {
// 这里为给编辑器绑定一个单击事件
editor.on('click', function(e) {
console.log('Editor was clicked');
});
}
}
...
}
支持粘帖图片
- 引入
import 'tinymce/plugins/paste'
- 添加配置
editorInit: {
...
paste_data_images: true, // 设置为允许粘帖图片
// 上传方式1：填写images_upload_url和images_upload_base_path
images_upload_url: '/upload', // 图片上传地址
images_upload_base_path: '/some/basepath',
// 上传方式2（建议这种）：自定义上传逻辑
images_upload_handler: function (blobInfo, success, failure) {
}
...
}
优化图片上传
其实我觉得开启支持粘帖图片和powerpaste之后，就不需要这个了。如果有这方面的需求，可以参考这个。安装比较简单，给个github地址，自己看下吧，和普通plugins基本无异。
https://github.com/x-shadow-x/tinymce-imageupload
效果图：
PS：这个插件在tinymce5上无法使用，而且配置上不是那么的灵活，如果想用，建议基于改插件，做一些修改。
添加powerpaste插件
- 需要自行下载好对应版本的
powerpaste（实在找不到可以私信我），我下载的是powerpast4.0.1-317
image - 放到一个一个你能访问到的地方
- 很重要的一步，我看到网上很多“教程”说如果是用npm安装tinymce不能使用powerpaste，其实呢，只要花点心思读读官方文档，就可以发现，其实是可以的，只要利用
external_plugins配置一下就OJBK了
editorInit: {
...
// 添加扩展插件
external_plugins: {
'powerpaste': '/static/tinymce/powerpaste/plugin.min.js'
}
powerpaste_word_import: 'propmt',// 参数可以是propmt, merge, clear，效果自行切换对比
powerpaste_html_import: 'propmt',// propmt, merge, clear
powerpaste_allow_local_images: true,
...
}
- powerpaste详细配置项可以再参考powerpaste插件使用手册
-
添加好之后，当从word复制内容到tinymce时，便会提示是否要保留格式：
image
PS:如果是从WPS复制带有图片的内容，会无法成功粘帖图片，从office复制是可以的。
切换/生成主题
主题生成网站：http://skin.tiny.cloud/
下载下来的主题怎么用？
很简单，用skin_url配置一下目录地址就OK了
editorInit: {
...
skin_url: '/static/tinymce4/skins/myskin',
...
}
