vue集成ckeditor富文本框,怎么獲取CKEditor實例?


CKEDITOR 版本5 ,vue集成形式

 

vue集成ckeditor富文本框,由於不是通過js創建的富文本對象,所以,無法取得實例對象,官方說明

 

 

 官方在builds--》Getting and saving data 欄中有進行說明,

 

既然我們使用了vue,那就只能通過CKEditor的ready事件來獲取 實例對象 了。

官方使用的例子,去這里看index.html文件即可:https://github.com/ckeditor/ckeditor5-vue/tree/master/sample

這是關於ready事件的說明,網址:https://ckeditor.com/docs/ckeditor5/latest/api/module_editor-balloon_ballooneditor-BalloonEditor.html#static-function-create

 

 

 翻譯的,看個大概就行 /(ㄒoㄒ)/~~

 

它的參數就是 實例的CKEditor富文本框的對象 ,當然,這個對象你可以自己保存起來為js代碼使用;;;這個 ckeditor 自定義標簽,是 ckeditor5-vue 插件聲明的。不過你需要照這個文檔熟悉完后就明白了:https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html

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

這里說明一下,我們使用的vue數據對象中的 editor屬性 並不是這個ckeditor的實例對象,
通過 @ready 的事件方法的形參就是CKEDITOR的實例對象,自己進行保存起來就行了(@(縮寫形式)===(等同於) v-on);如果是個別方法使用需要這個富文本框實例的話,則參考 Function.bind 使用的方法就行,直接綁定當前上下文對象


免責聲明!

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



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