首先向官网致敬(www.tiny.cloud/tinymce/)
其次膜拜大佬(panjiachen.github.io/vue-element…)
前言
文中描述的代码是6.X版本的。接触Tinymce是通过上文提到的参考项目vue-element-admin,和其他几种富文本组件对比后觉得这个功能相对丰富些且文档也比较详细了。因为纯英文也花了大量时间去研究配置参数的使用,百度一下还有中文的fullscreen 全屏 | TinyMCE中文文档中文手册 (ax-z.cn),但是要注意版本区分。
一、最新版本引入方式(依次执行)
npm install tinymce -S //当前版本
npm install @tinymce/tinymce-vue -S //当前版本
二、文件引入
完成第一步后,从node_modules中将tinymce复制一份到静态文件夹(打包不被编译的文件夹)中
然后在index.html中将其引入
<script type="text/javascript" src="<%= BASE_URL %>./tinymce/tinymce.min.js"></script>
三、使用
1、 参数简要
使用部分我就直接上图了里面也有使用到的参数详解,源码片段上传有问题(有需要私聊)
- id:自己随机生成或者组件传递就看个人业务
- editorValue:就是富文本内容下面会详解赋值
- init:就是配置参数了
2、 图片上传
因为使用内置的图片上传会莫名其妙多出来bable字符;这里图片上传我们就自己封装了一个组件加了个按钮进去; 里面也有一些其他上传方式的尝试,感兴趣可以自己试试。 最后一张图片是引用的模板
3、上文引用的模板文件
这里写类名的话样式带不过去,我就只能行内样式搞了。官方说用.html,这个我没尝试成功,有成功的不妨让我也借鉴一下