CKEditor 4 編輯器已與 Vue.js 集成

局長
 局長
發布于 2020年02月12日
收藏 34

雖然 CKEditor 4 不是目前主要維護的分支,不過官方并沒有讓它落后于潮流。近日,CKEditor 團隊發布了與 Vue.js 框架原生集成的 CKEditor 4。

這就意味著,開發者可以通過<ckeditor />標簽以 Vue.js 組件的形式使用 CKEditor 4 ,而作為 Vue.js 的原生組件,開發者可以更快地將其應用到網站上。為了盡可能簡單直觀地安裝使用 CKEditor 4,集成 Vue.js 的 CKEditor 4 已在 npmCDN 中提供,也可通過 zip 包使用。

根據官方的介紹,CKEditor 4 只是一個 JavaScript 富文本編輯組件,與大家熟知的 JavaScript 框架都兼容,它沒有使用小眾技術或要求在不常見的環境中運行。只要開發者使用的框架沒有奇怪的限制,CKEditor 4 都能與其兼容。

瀏覽器支持

CKEditor 4 Vue 組件可在除 Internet Explorer 之外的所有受支持的瀏覽器中使用。

注意:即使 CKEditor 4 支持包括 IE8、IE9 和 IE10 在內的較舊 Internet Explorer 版本,但集成 Vue 的 CKEditor 4 僅支持在最新的 Internet Explorer 11 中使用。

要啟用對 Internet Explorer 11 的支持,不應采用標準導入的方式,而是需要導入一個包含所有必需的 polyfill 的特定文件dist/legacy.js

import CKEditor from 'ckeditor4-vue/dist/legacy.js'

安裝和使用

要從 npm 安裝 Vue.js 的 CKEditor 4 組件,只需運行:

npm install ckeditor4-vue

安裝完成后將其導入項目中,并通過調用Vue.use()方法進行使用:

import Vue from 'vue';
import CKEditor from 'ckeditor4-vue';
 
Vue.use( CKEditor );
 
new Vue( {
    // ... options
} )

然后應在模板中添加<ckeditor />標簽以創建 CKEditor 4 實例:

<template>
  <div id="app">
    <ckeditor value="Hello, World!"></ckeditor>
  </div>
</template>

上面代碼中使用的value屬性負責設置初始的編輯器數據。

文檔和示例:https://ckeditor.com/docs/ckeditor4/latest/examples/vue.html

本站文章除注明轉載外,均為本站原創或編譯。歡迎任何形式的轉載,但請務必注明出處,尊重他人勞動共創開源社區。
轉載請注明:文章轉載自 OSCHINA 社區 [http://www.unfhffyc.icu]
本文標題:CKEditor 4 編輯器已與 Vue.js 集成
加載中

精彩評論

養大蝦
養大蝦
5.x 跟 4.x 比,5.x 少了很多功能。4.x 雖臃腫,但有些功能實用,比如插入代碼功能 5.x 就沒有。
隕落人間
隕落人間
沒有 tinymce好用。

最新評論(7

隕落人間
隕落人間
沒有 tinymce好用。
O
OSC_jxieGr
放棄了,本來升級到5了,發現不是那么回事了,不再是HTML編輯器了。
依舊永恒
依舊永恒
跟ueditor相比,有什么優缺點?
紅薯
紅薯
CKEditor 最新版應該是 5.0 了
養大蝦
養大蝦
5.x 跟 4.x 比,5.x 少了很多功能。4.x 雖臃腫,但有些功能實用,比如插入代碼功能 5.x 就沒有。
東勝神洲
東勝神洲
昨天還想著,找一個能配合 vue 的編輯器。。。。研究一下看看。。
知足2020
路過
返回頂部
頂部
真人龙虎斗论坛