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

這就意味著，開發者可以通過<ckeditor />標簽以 Vue.js 組件的形式使用 CKEditor 4 ，而作為 Vue.js 的原生組件，開發者可以更快地將其應用到網站上。

為了盡可能簡單直觀地安裝使用 CKEditor 4，集成 Vue.js 的 CKEditor 4 已在?npm?和?CDN?中提供，也可通過 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

總結

以上是生活随笔為你收集整理的CKEditor 4编辑器已与Vue.js集成的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。