前端開發:一款開源且功能強大的富文本編輯器(CKEditor)

文本編輯器 Excel Word HTML IT痕跡 IT痕跡 2017-10-05

CKEditor是一個免費的、開源(GPL license)的HTML文本編輯器旨在簡化網站內容創作,支持從Excel複製粘貼數據,擁有先進的內容過濾、控件、自定義HTML格式等功能,豐富的API文檔,是一個成熟、可靠性高的產品,提供了100+的強大功能,如先進的文本格式、內置60多種語言、內容過濾等。

前端開發:一款開源且功能強大的富文本編輯器(CKEditor)

1、下載及初始化

https://ckeditor.com/download

訪問以上網站下載,下載完成後解壓文件並放到項目任意位置,在頁面中引入CKeditorjs文件。

前端開發:一款開源且功能強大的富文本編輯器(CKEditor)

在頁面中創建一個<textarea>元素,並設置id屬性。

<textarea name="editor1" id="editor1" rows="10" cols="80">This is my textarea to be replaced with CKEditor.</textarea>

輸入如下腳本代碼。

CKEDITOR.replace('editor1');

前端開發:一款開源且功能強大的富文本編輯器(CKEditor)

完成後在頁面打開測試,效果如下所示。

前端開發:一款開源且功能強大的富文本編輯器(CKEditor)

2、功能展示

①基本文本

前端開發:一款開源且功能強大的富文本編輯器(CKEditor)

②文檔編輯

前端開發:一款開源且功能強大的富文本編輯器(CKEditor)

③內聯編輯

前端開發:一款開源且功能強大的富文本編輯器(CKEditor)

④代碼編輯

前端開發:一款開源且功能強大的富文本編輯器(CKEditor)

前端開發:一款開源且功能強大的富文本編輯器(CKEditor)

⑤拖拽編輯

前端開發:一款開源且功能強大的富文本編輯器(CKEditor)

⑥Excel粘貼

前端開發:一款開源且功能強大的富文本編輯器(CKEditor)

⑦高級表格選擇

前端開發:一款開源且功能強大的富文本編輯器(CKEditor)

前端開發:一款開源且功能強大的富文本編輯器(CKEditor)

⑧Word粘貼

前端開發:一款開源且功能強大的富文本編輯器(CKEditor)

⑨圖片上傳

前端開發:一款開源且功能強大的富文本編輯器(CKEditor)

官方網站:

https://ckeditor.com/

API文檔:

https://sdk.ckeditor.com/


同時他也支持其他富文本編輯器所具備的基礎功能,如樣式調整、源代碼編輯、媒體嵌入、超鏈接、快捷鍵操作、自定義寬高、自定義工具欄、自定義小組件等,我比較喜歡的就是他的內聯編輯和Excel、Word粘貼,這是比較實用且大多富文本編輯器所沒有的功能。

前端開發:一款開源且功能強大的富文本編輯器(CKEditor)

相關推薦

推薦中...