軟件介紹

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

軟件特色

1、質(zhì)量優(yōu)秀

多年的連續(xù)測(cè)試驅(qū)動(dòng)開發(fā)(5000多個(gè)測(cè)試)和代碼同行評(píng)審，讓一個(gè)成熟的產(chǎn)品擁有最高的可靠性。還有專用的核心開發(fā)團(tuán)隊(duì)，以及活躍的開源社區(qū)支持的維持。

2、可訪問性

符合最新的Web可訪問性標(biāo)準(zhǔn)(WCAG 2、508節(jié)，WAI-ARIA)同時(shí)使您能夠創(chuàng)建可訪問的內(nèi)容，以及內(nèi)置的輔助檢查。

3、可定制性

自定義編輯器的每一個(gè)細(xì)節(jié)，定制您的需求，使用其強(qiáng)大的開發(fā)者友好的文檔和豐富的JavaScript API。

4、創(chuàng)新思維

不斷引領(lǐng)創(chuàng)新領(lǐng)域的豐富文本編輯。把你的內(nèi)容創(chuàng)作過程由Word粘貼等獨(dú)特功能的全面控制，引申到先進(jìn)的內(nèi)容過濾，控件，自定義HTML格式以及更多。

軟件功能

1、高級(jí)文本格式

從基本的格式使用預(yù)定義的文本格式，文本樣式和創(chuàng)建數(shù)學(xué)公式或漂亮的代碼片段。

2、完整的多語言支持

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

3、完全訪問

ckeditor符合最新的Web可訪問性標(biāo)準(zhǔn)(WCAG2.0，WAI-ARIA)可以訪問的內(nèi)容，由于內(nèi)置的輔助功能檢查器創(chuàng)建。

4、拼寫檢查

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

5、窗口小部件

創(chuàng)新CKEditor功能使定制內(nèi)容豐富的實(shí)體如標(biāo)題圖片創(chuàng)作，通過將多個(gè)HTML元素的代碼片段或內(nèi)容模板。

6、干凈的代碼

CKEditor創(chuàng)建干凈的代碼，符合標(biāo)準(zhǔn)和可讀性。你也可以包括您的自定義格式設(shè)置規(guī)則來完全控制你的HTML輸出。

7、高級(jí)粘貼

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

8、添加存儲(chǔ)庫和生成器

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

9、易于集成

CKEditor通過添加一個(gè)腳本到您的網(wǎng)頁。現(xiàn)成的zip安裝包之間選擇，你最喜歡的包管理器或CDN版本。

10、豐富的API

強(qiáng)大和廣泛的接口，讓您在運(yùn)行時(shí)與編輯器交互，創(chuàng)建自定義功能，并將內(nèi)容隨意操作。

11、完全可定制的

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

12、先進(jìn)的內(nèi)容過濾

限制和調(diào)整輸入數(shù)據(jù)以對(duì)編輯器實(shí)例中允許的內(nèi)容完全控制。

CKEditor編輯器綠色版使用說明

1. 下載CKEditor5庫

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

2. 開始使用

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

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

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

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

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

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

打包之后的工程上傳的Github

4. 上傳圖片

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

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

方法1大家?guī)缀醪挥茫�方�?要自己寫上傳功能，網(wǎng)上有個(gè)教程寫得不是很清楚，我也沒有很看懂，還存在疑問。

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

網(wǎng)上有網(wǎng)友遇到用方法2上傳圖片，遇到一個(gè)奇葩問題：圖片明明已經(jīng)上傳到服務(wù)器，返回?cái)?shù)據(jù)也是按照所謂教程的{"default":"url"}格式。可是依然會(huì)報(bào)錯(cuò)。

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

從上面源碼中可以發(fā)現(xiàn)，ckfinder請(qǐng)求之后的返回體response應(yīng)該不為空，且還要包括uploaded和url字段，所以返回?cái)?shù)據(jù)實(shí)際格式應(yīng)該是{"uploaded":1,"url":"/"}，如此就不會(huì)出錯(cuò)了。所以，返回的數(shù)據(jù)并不是按照“教程“”說的那樣。