安徽时时彩计划软件qq|安徽时时彩
您的位置:零度軟件園編程工具編程工具CKEditor5富文本編輯器 v11.2.0 中文版

CKEditor5富文本編輯器 v11.2.0 中文版CKEditor5富文本編輯器 v11.2.0 中文版

軟件大小:0 KB

軟件官網:HomePage

用戶評分:

軟件類型:國產軟件

運行環境:WinAll

軟件語言:簡體中文

軟件分類:編程工具

更新時間:2019/3/17

授權方式:免費軟件

插件情況:無 插 件

平臺檢測 無插件 360通過 騰訊通過 金山通過 瑞星通過
軟件標簽: CKEditor
CKEditor5是一款前端代碼編輯軟件,用戶能夠使用CKEditor5對HTML等代碼進行快捷的編寫,同時還擁有在線編譯功能,讓用戶能夠更加直觀的看到自己編寫的代碼所產生的效果,CKEditor5兼容多種瀏覽器,用戶只需要將軟件放入到瀏覽器的根目錄中就能夠對網頁進行快速的編寫。

CKEditor5下載第1張預覽圖

軟件介紹

CKEditor 是 Fckeditor html編輯器了一個升級版本,用過 FCKeditor 的站長都知道,由于其打開速度的不理想把 FCKeditor 用于網站做為在線編輯器并不是明智的選擇,ckeditor正好彌補了這一缺陷,ckeditor是由Frederico Knabben.針對網絡而開發的在線編輯器。

官方介紹

CKEditor是全球最優秀的網頁在線文字編輯器之一,因其驚人的性能與可擴展性而廣泛的被運用于各大網站。CKEditor5支持IE8以上、Netscape、Mozilla等多種瀏覽器。遵循LGPL版權,支持多種腳本語言調用,如asp、asp.net、php、pl、jsp 等,是目前市場使用廣泛的一款在線HTML編輯器之一。

軟件特色

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、先進的內容過濾
限制和調整輸入數據以對編輯器實例中允許的內容完全控制。

使用說明

1. 下載CKEditor5庫
官方教程有CDN,npm, Zip download三種獲取方式,但這三種方式獲取的都是打包精簡之后的版本,有一些文本編輯特性并沒有,如對齊方式、字體大小等。如要更靈活的根據自己的需求添加或刪減編輯器的特性,建議從零度軟件園中下載完整版

2. 開始使用
目錄ckeditor5-build-classic-master\build下的ckeditor.js是打包好的庫,可以直接引用去使用。 新建一個editor.html,基本使用代碼如下:
<div name="content" id="editor">
<p></p>
</div>
<script src="./ckeditor.js"></script>
<script>
var data;
ClassicEditor.create(document.querySelector('#editor'), {
ckfinder: {
uploadUrl: '/'
}
}
).then(editor => {
window.editor = editor;
data = editor.getData();
console.log(data);
} )
.catch(error => {
console.log(error);
} );
</script>

3. 定制自己的CKEditor5: 增刪特性
雖然build目錄下的ckeditor.js可以直接使用,但是特性較少。下面開始定制自己的CKEditor5(注:本人對webpack打包不是很熟悉,本章節可能有問題,在打包使用過程遇到了問題,但用一些方法解決了)。
首先需要的工具: npm,webpack;
了解文件:webpack.config.js,package.json,build-config.js,src/ckeditor.js;
ckeditor5-build-classic目錄結構.png
webpack.config.js文件定義了打包的規則,package.json定義了用的包;build-config.js定義CKEditor5特性,src/ckeditor.js也是定義定義CKEditor5特性,似乎build-config.js和src/ckeditor.js只有一個就夠了,我使用的是src/ckeditor.js。
CKEditor5下載第2張預覽圖

如何上傳圖片

1. 三種方法概述
官方教程中上傳圖片有三種方法(1):使用CKEditor自帶云服務,圖片上傳到CKEditor服務器;(2):使用ckfinder框架,在初始化CKEditor時,需要定義 ckfinder的uploadUrl參數,參數為上傳到自己服務器的地址;(3)自己寫上傳功能,定義UploadAdapter,實現upload()和 abort() 方法,并對UploadAdapter進行調用。
方法1大家幾乎不用,方法3要自己寫上傳功能,網上有個教程寫得不是很清楚,我也沒有很看懂,還存在疑問。代碼如下:
class UploadAdapter {
constructor(loader) {
this.loader = loader;
}
upload() {
return new Promise((resolve, reject) => {
const data = new FormData();
data.append('upload', this.loader.file);
data.append('allowSize', 10);//允許圖片上傳的大小/兆
$.ajax({
url: '/QingXiao/Article/uploadArticleImage4',
type: 'POST',
data: data,
dataType: 'json',
processData: false,
contentType: false,
success: function (data) {
if (data.res) {
resolve({
default: data.url
});
} else {
reject(data.msg);
}
}
});
});
}
abort() {
}
}
// 加載了適配器
editor.plugins.get('FileRepository').createUploadAdapter = (loader)=>{
return new UploadAdapter(loader);
};

2. 上傳圖片方法2詳解
網上有網友遇到用方法2上傳圖片,遇到一個奇葩問題:圖片明明已經上傳到服務器,返回數據也是按照所謂教程的{"default":"url"}格式。可是依然會報錯。報錯如下:
CKEditor5下載第3張預覽圖

我也遇到了這個問題,遲遲沒有解決,直到今天看了CKEditor中ckfinder的源碼才發現問題。閱讀ckeditor5-adapter-ckfinder發現,ckfinder也定義了UploadAdapter,同樣實現了upload()和 abort() 方法。而問題就出現在upload()方法中。下面貼出upload()方法的源碼:
upload() {
return new Promise( ( resolve, reject ) => {
this._initRequest();
this._initListeners( resolve, reject );
this._sendRequest();
} );
}
_initListeners( resolve, reject ) {
const xhr = this.xhr;
const loader = this.loader;
const t = this.t;
const genericError = t( 'Cannot upload file:' ) + ` ${ loader.file.name }.`;
xhr.addEventListener( 'error', () => reject( genericError ) );
xhr.addEventListener( 'abort', () => reject() );
xhr.addEventListener( 'load', () => {
const response = xhr.response;
if ( !response || !response.uploaded ) {
return reject( response && response.error && response.error.message ? response.error.message : genericError );
}
resolve( {
default: response.url
} );
} );
// Upload progress when it's supported.
/* istanbul ignore else */
if ( xhr.upload ) {
xhr.upload.addEventListener( 'progress', evt => {
if ( evt.lengthComputable ) {
loader.uploadTotal = evt.total;
loader.uploaded = evt.loaded;
}
} );
}
}
從上面源碼中可以發現,ckfinder請求之后的返回體response應該不為空,且還要包括uploaded和url字段,所以返回數據實際格式應該是{"uploaded":1,"url":"/"},如此就不會出錯了。所以,返回的數據并不是按照“教程“”說的那樣。
  • 下載地址
有問題? 投訴報錯

用戶評論

(您的評論需要經過審核才能顯示)0人參與,0條評論
140

最新評論

我要搶沙發

請簡要描述您遇到的錯誤,我們將盡快予以修訂

返回頂部
安徽时时彩计划软件qq