vue 项目中使用tinymce+tinymce-vue


vue3.x版本

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

再然后把node_modules/tinymce下的skins 文件夹copypublic文件夹下

最后下载语言包,把里面的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'

参考


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM