web富文本編輯器的選擇のxheditor

2024-04-27 15:14:24

字體：大中小

來源：轉載

供稿：網友

最近在研究web富文本編輯器，處理知道的

1、老牌fckeditor 網址：http://ckeditor.com/

2、百度退出的ueditor 網址：http://ueditor.baidu.com/website/index.html

3、還有幾天要說的xheditor 網址：:http://xheditor.com/

csdn默認用的就是xheditor

cnblog默認用的是TinyMCE編輯器

Web 應用經常會用到富文本編輯器功能，當然如果是 javaScript 大牛，重復造輪子也是可以的，如果想省時省力，可以關注下下面 5 款免費的文本編輯器框架。 1. widgEditor widgEditor 體積小，只有 33.4 KB，簡潔實用，支持 HTML 編碼。主要優點：樸素，代碼小，易用；缺點：功能不足，不易擴展，缺乏第三方支持。

實例：The Man in Blue – widgEditor下載：widgEditor 1.0.1文檔：下載包中包括文檔文件使用方式：將源文件下載到本地磁盤，在適當的地方用下面代碼進行引用 Html代碼<link rel="stylesheet" href="widgEditor/CSS/widgEditor.css" /> <script src="widgEditor/scripts/widgEditor.js"></script> 2. TinyMCE 優點：獨立，易用；缺點：代碼量大

實例：Tiny MCE 應用實例下載：Tiny MCE 4.0.x文檔：Tiny MCE 維基文檔使用方式： Html代碼 <textarea id="TypeHere">Type some text here.</textarea> <textarea id="NoTinyMCE">This is a text area.</textarea> <script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script> <script type="application/x-Javascript"> tinymce.init({selector:'#TypeHere'}); </script> 3. MarkItUp MarkItUp 基于jQuery ，是一款 jQuery 插件，非常靈活，輕量，下載頁有許多擴展，插件，皮膚，解析器和其它功能，MarkItUp 學習曲線比較陡峭，特別是把一些功能組合使用的時候。

實例：markItUP! 實例下載：markItUp! 下載文檔：markItUp! 文檔 1.1使用方式： Html代碼<textarea id="markItUp" cols="80" rows="20"> Some Sample Text </textarea> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script src="MarkItUp/markitup/jquery.markitup.js"></script> <script src="MarkItUp/markitup/sets/default/set.js"></script> <link rel="stylesheet" href="MarkItUp/markitup/skins/simple/style.css" /> <link rel="stylesheet" href="MarkItUp/markitup/sets/default/style.css" /> <script> $(document).ready(function() { $('#markItUp').markItUp(mySettings); }); </script> 4. NicEdit NicEdit 簡便快捷，包含很全的格式化功能，支持各種元素類型。

實例：NicEdit 實例下載：NicEdit 組件文檔：NicEdit 維基使用方式： Html代碼 <textarea id="NicEdit" cols="80" rows="5">Some Sample Text</textarea> <textarea id="NotNicEdit" cols="80" rows="5">Some Sample Text</textarea> <div id="NicEdit2">Some Sample Text</div> <script src="http://js.nicedit.com/nicEdit-latest.js"></script> <script> bkLib.onDomLoaded(function() { new nicEditor().panelInstance('NicEdit'); new nicEditor().panelInstance('NicEdit2'); }); </script> 5. YUI 2 YUI2是一個極簡的富文本編輯器。

實例：YUI 2 富文本編輯器舉例下載：YUI 2.9 zip文件文檔：Yahoo! UI 庫使用方式： Html代碼<textarea id="RichTextEdit" cols="100" rows="5">Some Sample Text</textarea> <body class="yui-skin-sam"> <link rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" /> <link rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/editor/assets/skins/sam/simpleeditor.css" /> <script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"> </script> <script src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script> <script src="http://yui.yahooapis.com/2.9.0/build/container/container_core-min.js"> </script> <script src="http://yui.yahooapis.com/2.9.0/build/editor/simpleeditor-min.js"></script> <script> (function() { new YAHOO.widget.SimpleEditor('RichTextEdit').render(); })(); </script>

1.FCKeditor他怎么樣,我就不用多說了,網上多的很,不過有近300K的體積~~~2.xheditor這個控件好象用的人比較少,不過看起來感覺不錯!JS+CSS+圖片一共有50K,小啊,中文!3.tinyMCE網上的評價很高,值得一試,不過比較大,近200K了,中文!4.xinha網上的評價也很高,值得一試,不過體積也有120多K~~~5.CuteEditor據說CSDN用的是這個,收費的,不過有破解的版本.呵呵6.kindeditor美化的不錯,有興趣可以玩一玩,很好用,70~80K的樣子,有中文語言!7.HTMLArea功能都大同小異的,可以試一試8.Cross-Browser Rich Text Editor 很小,全部體積不超過40K,可以試一試9.SinaEditor新浪編輯器應該算是最貼近網友體驗的編輯器，簡潔、大方，并且使用方便、功能強大。不過體積嘛,自己去看吧~~

以下是我覺得一般的(個人感覺哈!)1.InnovaStudio WYSIWYG Editor要收費2.eWebEditor國人制作,收費的3.jwysiwyg雖然小,但不好用4.WYMeditor樣式不好看,個人不喜歡~~5.openWYSIWYG樣式不好看,有近100K6.Free Rich Text Editor 相當不好用,連加個表格都是用專門的html頁面,維護太復雜了7.MarkitUp無法"所見即所得"

總結:我所認為值得一用的編輯器,一般都有完整的幫助文檔,有社區在持續開發,最近有更新,在使用上方便靈活,支持多種定義方式,能所見即所得,在編碼上安全與快捷,程序界面支持中文,界面風格比較漂亮,功能完整.如果想選擇功能強大,流行的,可以選FCKeditor與tinyMCE,但代價為體積較大,在性能上值得考慮一下,如果功能要求不是很高,或者對性能有需求,則可以選擇xheditor或者kindeditor,當然還有更小的,比如jwysiwyg或Damn Small Rich Text Editor ,但使用上很不方便,得不償失.

PS:如果有代碼著色的需求,可以使用一個jquery的插件:highlighter,它對highlighter的非jquery版本做了一定的封裝,使用非常方便!

引用來源：http://hi.baidu.com/sxwlty/blog/item/dc5cc30942e78a2e6b60fbb6.html

jwysiwyg

WYSIWYG jQuery插件。整個編輯器文件大小只有17Kb。

Damn Small Rich Text Editor

基于jQuery開發，能夠從IFRAME元素創建一個Rich Text Editor。提供了所有基本的Rich Text功能，可設置文本編輯區大小，Ajax上傳圖片等。

EditArea

EditArea是一個javascript源代碼編輯器。支持：文本格式化，搜索與替換，實時語法著色加亮。當前支持的語言包括：php、CSS、Javascript、Python、HTML、xml、VB、C、CPP、SQL、Pascal、Basic、Brainf*ck。

NicEdit

NicEdit是一個輕量級，跨平臺的Inline Content Editor。NicEdit能夠讓任何 element/div變成可編輯或者能夠把標準的textareas轉換成Rich文本編輯器。

Damn Small Rich Text Editor

基于jQuery開發，壓縮之后只有18k左右的Rich Text Editor。提供所有基本的Rich Text功能，調整文本區域大小，使用AjaxFileUpload插件上傳圖片，清除HTML標簽，標記文本修改，支持多種瀏覽器（FF1.5+、IE7、IE6）。此外還支持通過插件來擴展文本處理功能。

WYMeditor

WYMeditor是一個web WYSIWYM XHTML編輯器。

TinyMCE

TinyMCE是一個開源，純JavaScript HTML WYSIWYG編輯器。它能夠把HTML TEXTAREA或其它HTML標簽轉換成Rich編輯器。TinyMCE非常易于集成到其它內容管理系統中。可以通過外觀/主題和插件來定制滿足自己需求的編輯器。提供漢化語言包。多瀏覽器支持：Mozilla、MSIE、Firefox、Opera和Safari。此外你還可以很方便地使用Ajax來保存和加載內容。

Yahoo! UI : Rich Text Editor

來自Yahoo! UI庫中一個功能強大的Rich文本編輯器。

FCKeditor

FCKeditor是一個類似于MS Word的HTML文本編輯器。兼容多種瀏覽器，輸出符合XHTML1.0標準，支持CSS以便能夠與你的網站更好的結合，提供右鍵操作菜單，支持直接從Word粘貼，可以自己定制功能工具條，支持皮膚更換和通過插件擴展功能等。

Control.Editor

Control.Editor是一個基于Mootools開發的WYSIWYG Editor。

openWYSIWYG

純javascript開發的，跨瀏覽器WYSIWYG Editor。只一行簡單的代碼就能夠將<textarea>標簽轉換成一個強大的WYSIWYG editor。

Free Rich Text Editor

Free Rich Text Editor是一個易于使用的HTML WYSIWYG編輯器。只需要三行代碼，就能夠安裝該編輯器。支持以下瀏覽器：

Xinha

Xinha是一個功能強大的WYSIWYG HTML編輯器，支持所有基于Mozilla的瀏覽器和MS IE。它具有易于擴展，功能模塊豐富等特性。并且提供文件管理、圖片上傳插件、還可以對圖片進行簡單的編輯等功能。

MarkitUp

MarkitUp是一個輕量級，可定制，靈活的WYSIWYG Editor。

· 支持快捷鍵

· 支持Ajax動態預覽

· 支持IE7、Safari3.1、Firefox2、Firefox3、IE6和Opera9+

· 支持html、Wiki、BBScode等編輯格式

SmartMarkUP

SmartMarkUP是一個輕量級，強大的JavaScript library，它能夠將Textarea控件轉換成富文本編輯器。支持HTML、CSS、XML、Wiki語法、BBCode等，可按實際需求配置。SmartMarkUP沒有基于任何javascript框架開發，易于現有項目結合使用。

CKEditor

CKEditor是FCKeditor的3.0版本，具有更好的性能和豐富、強大的集成/交互接口以及一個嶄新的用戶界面等。

KindEditor

KindEditor是用JavaScript編寫的HTML可視化編輯器。具有：

· 代碼量少，加載速度快。

· 內置自定義range，完美地支持span標記。

· 所有功能都是插件，增加自定義功能非常簡單。

· 編輯器風格定義在一個CSS文件里。

· 支持大部分瀏覽器，比如IE、Firefox、Safari、Chrome、Opera。

WMD-Editor

WMD（Wysiwym Markdown Editor）是一個簡單，輕量級的HTML編輯器。適合在博客發表評論，論壇發貼中使用。

jHtmlArea

一個簡單、輕量級、可擴展、基于jQuery開發的WYSIWYG HTML編輯器。這個組件可以很方便將頁面中的TextArea標簽轉換成一個WYSIWYG HTML Editor。整個編輯器包括圖片和CSS大小只有22k。

Reditor

Reditor是一個基于JQuery和JQuery UI開發的HTML Editor。

HtmlBox

HtmlBox是一個基于jQuery開發的HTML/XHTML編輯器。易于使用。支持多種瀏覽器Mozilla Firefox、Internet Explorer6.0、Opera、Safari和Netscape。非常小只有15kb。HtmlBox默認返回HTML，但也可以輸出XHTML。集成Ajax支持。

KISSY Editor

一個小巧精簡的HTML編輯器，僅依賴 yahoo-dom-event, min后不超過50k，gzip后不超過20k。擁有編輯器基本功能。測試過的瀏覽器： IE6+、Firefox3.5+、Safari4+、Chrome2+、Opera10+。

KISSY Editor

xhEditor

xhEditor是一個基于jQuery開發的簡單迷你并且高效的可視化XHTML編輯器，基于網絡訪問并且兼容IE 6.0-8.0,Firefox 3.0,Opera 9.6,Chrome 1.0,Safari 3.22。 Features(特性)：

· Small：初始加載5個文件，包括：1個js(45k)+2個css(7k)+2個圖片(4k)，總共56k。若js和css文件進行gzip壓縮傳輸，可以進一步縮減為21k左右。

· Fast：基于jQuery引擎開發，提供高效的代碼執行效率

· Simple：簡單的調用方式，加一個class屬性就能將您的textarea立馬變成一個功能豐富的可視化編輯器。

· Word：實現Word代碼自動檢測并清理，提供高效完美的Word代碼過濾方案，生成代碼最優化精簡，但是卻不丟失任何細節效果。

· UBB: 提供完美的UBB可視化編輯解決方案，在您獲得安全高效代碼存儲的同時，又能享受可視化編輯的便捷

FileManager

這是一個開源，基于jQuery開發的文件管理器，可以集成到CKEditor/FCKEditor 和其它HTML編輯器中使用。實現文件上傳、下載、重命名、刪除。FileManager默認服務器端處理采用Python實現，但可以通過其提供的一個簡單JavaScript API來擴展對其它語言的支持。