环境
VUE
webpack
tinymce4
额外插件
- 用于优化本地图片上传的第三方插件:tinymce-imageupload
- 用于加强word源复制粘帖的官方插件(这是收费插件,我这里不提供资源,只是教大家怎么配置):wordpress
开撸
安装tinymce-vue
npm install @tinymce/tinymce-vue -S
安装tinymce
npm install tinymce -S
安装好之后,需要将node_modules
目录下面的tinymce/skins
目录放到一个可以访问到的地方(一般来说是static
目录,也可以是CDN之类的,反正能访问到就行)
安装中文语言包
官网语言包下载地址
选择你想要的语言下载即可(别跟我说不认识Chinese (China)
)
下载后将得到zh_CN.js
文件(以简体中文为例),同样,放到一个你能访问到的地方(static
目录或CDN)
引入依赖项
import tinymce from 'tinymce/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详细配置项可以再参考powerpaste插件使用手册
-
添加好之后,当从word复制内容到tinymce时,便会提示是否要保留格式:
image
切换/生成主题
主题生成网站:http://skin.tiny.cloud/
下载下来的主题怎么用?
很简单,用skin_url
配置一下目录地址就OK了
editorInit: {
...
skin_url: '/static/tinymce4/skins/myskin',
...
}
网友评论