vue集成CKEditor構建框架的使用,遇到富文本框不出現工具欄等操作


官方關於Vue集成CKEditor富文本框的文檔:https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#using-es6-modules

 

先說下依賴吧,

"@ckeditor/ckeditor5-vue" 這個是使用vue集成的時候,這個依賴必不可缺,當然,如果你是直接使用script腳本引入的話,這個依賴也不是必須的,通過ckeditor在線構建出的壓縮包里面就有一個例子,不過是 內聯腳本 版本的。

說下我遇到的問題, 集成官方提供的ckeditor版本可以正常使用,主要就是 引入
"@ckeditor/ckeditor5-vue"依賴和 npm install --save @ckeditor/ckeditor5-build-classic 安裝的版本,照文檔的操作就可以正常使用,但是我認為這里面包含的ckfinder功能我不是需要的,所以,我就是用官方提供的在線構建器,選擇需要的功能。

 

 

,當通過 npm folder形式進行安裝后,使用的問題情況是 頁面里並沒有出現工具欄和懸浮菜單框,通過查看提供的例子,里面是需要配置的,所以,通過vue配置一下就可以正常使用了

 

 

 總結的就一句話,官方提供的ckeditor版本可以照着官方文檔就可以正常使用;而通過ckeditor提供的在線構建器構建的版本,這個配置項不可或缺,不然,頁面不會出現菜單項。

這個是單文件組件的data項,Vue.use(CKEditor) 就可以使用這個組件了

<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>

至關重要的一句話啊,放在了API中說明。。。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM