若依

前言 若依RuoYi-Vue自带的富文本编辑器是quill，但是quill的功能比较少，没有TinyMCE插件多。 安装tinymce、tinymce-vue 注意：基于vue2 npm install tinymce@5.4.1 -S --registry=https://registry.npmmirror.com npm install @tinymce/tinymce-vue@3.0.1 -S --registry=https://registry.npmmirror.com 配置中文语言包 下载地址：https://www.tiny.cloud/get-tiny/language-packages/ 下载完后放到静态文件public目录下，在public目录下新建tinymce目录，将上面下载的语言包中的zh_CN.js放到该目录 配置 在node_modules里面找到tinymce目录,将此目录下skins目录复制到public/tinymce里面 解决页面被覆盖问题 层级错误，和element框架的el-dialog冲突，需要调整z-index 修改：ruoyi-ui/src/assets/styles/index.scss 文件，添加如下css .tox-fullscreen .tox.tox-tinymce.tox-fullscreen { z-index: 8000 !important; } .tox-tinymce-aux { z-index: 8001 !important; } 配置行高插件 下载行高插件：http://tinymce.ax-z.cn/more-plugins/lineheight.php 放在ruoyi-ui/src/tinymcePlugins文件夹下 并在init中配置plugins和toolbar import '@/tinymcePlugins/lineheight/plugin'; tinymce.init({ plugins: "lineheight", toolbar: "lineheight", }); 配置段落间距插件 npm install tinymce-paragraphspacing 并在init中配置plugins和toolbar import 'tinymce-paragraphspacing' tinymce.init({ plugins: "paragraphspacing", toolbar: "paragraphspacing", }); 配置首行缩进插件 下载插件：http://tinymce.ax-z.cn/more-plugins/indent2em.php 放在ruoyi-ui/src/tinymcePlugins文件夹下,并在init中配置plugins和toolbar import '@/tinymcePlugins/indent2em/plugin'; tinymce.init({ plugins: "indent2em", toolbar: "indent2em", }); 配置文字间距插件 下载插件：https://github.com/Five-great/tinymce-plugins 把里面的letterspacing文件夹放在ruoyi-ui/src/tinymcePlugins文件夹下,并在init中配置plugins和toolbar import '@/tinymcePlugins/letterspacing'; tinymce.init({ plugins: "letterspacing", toolbar: "letterspacing", }); 封装为组件 创建文件：ruoyi-ui/src/components/TinyEditor/index.vue ...