軟件介紹

CKEditor 5漢化版是應該是全球范圍內最優秀的文字編輯工具之一了，軟件的使用擁有極強的可擴展性，因此在很多的網站在線文本編輯框的使用上都能見到軟件的身影，并且軟件的使用兼容幾乎所有的瀏覽器，在很多的語言腳本上都有很好的適應性，有需要的小伙伴們，可以在本站下載CKEditor中文版試試喲~

軟件特色

1、質量優秀

多年的連續測試驅動開發(5000多個測試)和代碼同行評審，讓一個成熟的產品擁有最高的可靠性。還有專用的核心開發團隊，以及活躍的開源社區支持的維持。

2、可訪問性

符合最新的Web可訪問性標準(WCAG 2、508節，WAI-ARIA)同時使您能夠創建可訪問的內容，以及內置的輔助檢查。

3、可定制性

自定義編輯器的每一個細節，定制您的需求，使用其強大的開發者友好的文檔和豐富的JavaScript API。

4、創新思維

不斷引領創新領域的豐富文本編輯。把你的內容創作過程由Word粘貼等獨特功能的全面控制，引申到先進的內容過濾，控件，自定義HTML格式以及更多。

軟件功能

1、高級文本格式

從基本的格式使用預定義的文本格式，文本樣式和創建數學公式或漂亮的代碼片段。

2、完整的多語言支持

本地化為超過60種語言，ckeditor支持從右到左的文本方向以及文本選擇分配一個特定的語言。

3、完全訪問

ckeditor符合最新的Web可訪問性標準(WCAG2.0，WAI-ARIA)可以訪問的內容，由于內置的輔助功能檢查器創建。

4、拼寫檢查

作為你的類型，看到正確的拼寫錯誤而打字。拼錯的單詞，你可以簡單地選擇替換不正確的單詞建議。

5、窗口小部件

創新CKEditor功能使定制內容豐富的實體如標題圖片創作，通過將多個HTML元素的代碼片段或內容模板。

6、干凈的代碼

CKEditor創建干凈的代碼，符合標準和可讀性。你也可以包括您的自定義格式設置規則來完全控制你的HTML輸出。

7、高級粘貼

此功能使粘貼的內容直接從微軟Word和保持原有的內容，用干凈的HTML輸出格式。

8、添加存儲庫和生成器

下載一個完美的定制的在線豐富的文本編輯器使用在線生成器，并輕松地集成額外的插件從庫中。

9、易于集成

CKEditor通過添加一個腳本到您的網頁。現成的zip安裝包之間選擇，你最喜歡的包管理器或CDN版本。

10、豐富的API

強大和廣泛的接口，讓您在運行時與編輯器交互，創建自定義功能，并將內容隨意操作。

11、完全可定制的

自定義CKEditor的每一個方面(如工具欄、調色板、皮膚、對話框、菜單、數據解析、造型、等)和調整你的需要。

12、先進的內容過濾

限制和調整輸入數據以對編輯器實例中允許的內容完全控制。

CKEditor編輯器綠色版使用說明

1. 下載CKEditor5庫

官方教程有CDN，npm， Zip download三種獲取方式，但這三種方式獲取的都是打包精簡之后的版本，有一些文本編輯特性并沒有，如對齊方式、字體大小等。如要更靈活的根據自己的需求添加或刪減編輯器的特性，建議從CKEditor5官方Github下載。CKEditor5有多個版本，我使用的是從github下載的ckeditor5-build-classic版本。

2. 開始使用

目錄ckeditor5-build-classic-master\build下的ckeditor.js是打包好的庫，可以直接引用去使用。 新建一個editor.html,

3. 定制自己的CKEditor5: 增刪特性

雖然build目錄下的ckeditor.js可以直接使用，但是特性較少。下面開始定制自己的CKEditor5(注：本人對webpack打包不是很熟悉，本章節可能有問題，在打包使用過程遇到了問題，但用一些方法解決了)。

首先需要的工具： npm,webpack;

了解文件：webpack.config.js，package.json，build-config.js，src/ckeditor.js;

webpack.config.js文件定義了打包的規則，package.json定義了用的包;build-config.js定義CKEditor5特性，src/ckeditor.js也是定義定義CKEditor5特性，似乎build-config.js和src/ckeditor.js只有一個就夠了，我使用的是src/ckeditor.js。

打包之后的工程上傳的Github

4. 上傳圖片

*****三種方法概述*****

官方教程中上傳圖片有三種方法(1)：使用CKEditor自帶云服務,圖片上傳到CKEditor服務器;(2)：使用ckfinder框架，在初始化CKEditor時，需要定義 ckfinder的uploadUrl參數，參數為上傳到自己服務器的地址;(3)自己寫上傳功能，定義UploadAdapter，實現upload()和 abort() 方法，并對UploadAdapter進行調用。

方法1大家幾乎不用，方法3要自己寫上傳功能，網上有個教程寫得不是很清楚，我也沒有很看懂，還存在疑問。

*****上傳圖片方法2詳解*****

網上有網友遇到用方法2上傳圖片，遇到一個奇葩問題：圖片明明已經上傳到服務器，返回數據也是按照所謂教程的{"default":"url"}格式。可是依然會報錯。

我也遇到了這個問題，遲遲沒有解決，直到今天看了CKEditor中ckfinder的源碼才發現問題。閱讀ckeditor5-adapter-ckfinder發現，ckfinder也定義了UploadAdapter，同樣實現了upload()和 abort() 方法。而問題就出現在upload()方法中。

從上面源碼中可以發現，ckfinder請求之后的返回體response應該不為空，且還要包括uploaded和url字段，所以返回數據實際格式應該是{"uploaded":1,"url":"/"}，如此就不會出錯了。所以，返回的數據并不是按照“教程“”說的那樣。