富文本编辑器
市场上有不少富文本编辑器供选择,在这里参考了 vue-element-admin 的意见,使用了 Tinymce。
引用方式
vue-element-admin
未提供通过代码直接引用的方案(目前是异步加载 CDN
的引入方式),cloud-admin
通过研究解决了此问题,相关描述如下。可以在 src/views/dashboard/demo/editors/components/u-tinymce.js
查看具体实现。
难点
默认情况下,
Tinymce
有自己的样式加载方案,且css
路径均写死,所以在初始化的时候需要禁止Tinymce
自加载。禁用自加载后,则需要手动加载样式。样式分两块,一块是整个编辑器的样式,另一块是内容的样式。内容默认是采用
iframe
的形式进行渲染的。对于编辑器的样式可以直接import
即可,但是对于内容,由于其在iframe
内,则需要在初始化时传入!!raw-loader!tinymce/skins/ui/oxide/content.css
+!!raw-loader!tinymce/skins/content/default/content.css
。另一部分是
plugin
的js
文件的引入问题,这些文件路径也是写死的。一般情况下,我们可以通过copy-webpack-plugin
去解决。
vue
这里是直接使用官方直接封装的版本 tinymce-vue,如果另有需求,可以自行封装相关逻辑。