4款Bootstrap線上富文字編輯器
Bootstrap
已經大大簡化響應式 web
開發,但是,如果再加上不用手動一點點敲程式碼,而是可以快速選擇你想要使用的 Bootstrap
元件,然後直接將其拖進你的畫板中,開發是否會變得更加輕鬆?!
這便是所謂的所見即所得(What you see is what you get,WYSIWYG)開發模式,能幫你達成這一切的,便是“所見即所得編輯器”。
所見即所得編輯器通常分為以下兩大類:
- 富文字編輯器
- 框架編輯器
富文字編輯器側重於網頁中大塊連續文字的格式編輯,基本編輯樣式包括:字型、顏色、列表、連結、圖片等等,一般所生成的內容都是作為網頁的主體展示給使用者。
框架編輯器則用於快速搭建網頁的整體佈局,操作時,更多的是元件的選擇與拖放,以達到高效、批量地生產靜態頁面的目的,一般可操作的元件有:導航、列、行、面板等等。
本文會將所有流行的 Bootstrap
富文字編輯器集中介紹給大家。
而在另一篇文章中,將會重點介紹上述提及的框架編輯器,詳見:
CKEditor
是目前最優秀的免費、開源 web
富編輯器之一。
主要特點:
免費 開源 社群驅動 大量外掛 高度可定製 編輯體驗流暢 相容所有主流瀏覽器
預設不支援 Bootstrap
樣式,但其高度可配置可以輕鬆的滿足這一要求。
需要考慮的:
- 如果想自定義特性,需要一定的初期學習成本。
- 功能完善導致架構複雜,使得體積稍顯臃腫(作為前臺編輯器時,可能會考慮)。
- 需求特殊,且無外掛可以滿足時,如果考慮修改核心程式碼成本高昂。
- 國內無核心社群。
Tinymce
是目前最優秀的免費、開源 web
富編輯器之一。
主要特點:
免費 開源 社群驅動 大量外掛 高度可定製 編輯體驗流暢 相容所有主流瀏覽器
預設不支援 Bootstrap
樣式,但其高度可配置可以輕鬆的滿足這一要求。
需要考慮的:
- 如果想自定義特性,需要一定的初期學習成本。
- 功能完善導致架構複雜,使得體積稍顯臃腫(作為前臺編輯器時,可能會考慮)。
- 需求特殊,且無外掛可以滿足時,如果考慮修改核心程式碼成本高昂。
- 國內無核心社群。
Tinymce
與 CKEditor
是 web
富編輯器的兩大陣營,分別佔領了一定的富編輯器市場,如果一定要做個對比,較明顯的區別如下:
-
兩者都提供了極其豐富的外掛,但相比來說,同樣的功能,
CKEditor
-
對於拷貝貼上,
CKEditor
更加友好,它總是能更加精確的替換來源網站的標籤。 -
新特性來說,
CKEditor
也總是能領先其對手一步,更重要的是,它的開發者文件非常完善。 -
大小上,
Tinymce
具有明顯優勢,其幾乎是CKEditor
的一半,這也是後者為其它優勢所付出的代價。
UEditor
是由百度 WEB
前端研發部開發的所見即所得的開源富文字編輯器,具有輕量、可定製、使用者體驗優秀等特點。
開源基於 BSD
協議,所有原始碼在協議允許範圍內可自由修改和使用。
CFEditor
這是 全站所使用的所見即所得(WYSIWYG)富編輯器(Rich
Editor),其使用 BootStrap 3.x 樣式,最低支援 IE
8。
原文來自:http://classfoo.com/ccby/article/e3KsbU8