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