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 使用的方法就行,直接綁定當前上下文對象