编辑器找了好多,包括百度(UEditor)后台(Java后台不支持)受限制,
wangEditor编辑器编辑的文章没有行高,
而且特别紧凑,后来果断选了Tinymce(最后有文件代码)
1、npm安装使用tinymce,以下两个都要安装
npm install tinymce -S
npm install @tinymce/tinymce-vue -S
2、node_modules里面的tinymce/skins包复制,放到根目录/static里面
3、下载中文包
中文包直通车
4、新建一个Vue文件,我叫tinymce-editor.vue (可以理解为工具类),并初始化tinymce,并导入相应的插件(基本的插件都在node_modules/tinymce/plugins里面,像行高这种没有,需要到Tinymce官网里面去下载第三方插件)
4.1导入插件
4.2 引入插件(plugins和toolbar缺一不可,如 表情包emoticons都要添加)
4.3 初始化
5、图片上传
6、调用初始化,可以在生命周期函数mounted方法调用
7、新建一个Vue文件,然后引用该编辑器文件即可,如下是效果图
编辑器源代码:
\
\
调用编辑器模板
import TinymceEditor from '@/components/tinymce-editor.vue';