tinymce编辑器使用(Vue版本)看过之后,相信一定会有收获哦

1,663 阅读1分钟

 编辑器找了好多,包括百度(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';