vue 项目中使用tinymce+tinymce-vue

vue3.x版本

npm install tinymce -S
npm install @tinymce/tinymce-vue -S

再然后把node_modules/tinymce下的skins 文件夹copy到public文件夹下

最后下载语言包，把里面的js文件也放进去

语言包下载

2.x版本

需要固定版本

npm install tinymce@5.1.0 -S
npm install @tinymce/tinymce-vue@3.0.1 -S

然后把上面说的文件copy到static文件夹下

修改edit的init配置，文件路径要指向你刚才放置的路径

      init: {
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide',
	content_css: '/tinymce/skins/content/default/content.css',
      }

桌面端富文本组件正常，移动端不显示

​ F12，切换到移动模式显示，发现是mobile/theme.js中的<!DOCTYPE html>报错，原来是针对移动端有专门的js文件渲染，在/node_modules/tinymce/themes下存在两个目录，分别是silver和mobile，在封装组件的时候只引用了这个：

import 'tinymce/themes/silver'

加上如下引用：

import 'tinymce/themes/mobile'

参考

posted @ 2021-12-21 22:04  aitansi  阅读(833)  评论(0)  编辑  收藏  举报