web富文本编辑器的选择のxheditor

最近在研究web富文本编辑器，处理知道的

1、老牌fckeditor网址：/

2、百度退出的ueditor 网址：/website/index.html

3、还有几天要说的xheditor 网址：:/

csdn默认用的就是xheditor

cnblog默认用的是TinyMCE编辑器

Web 应用经常会用到富文本编辑器功能，当然如果是 JavaScript 大牛，重复造轮子也是可以的，如果想省时省力，可以关注下下面 5 款免费的文本编辑器框架。

1. widgEditor

widgEditor 体积小，只有 33.4 KB，简洁实用，支持 HTML 编码。

主要优点：朴素，代码小，易用；

缺点：功能不足，不易扩展，缺乏第三方支持。

实例：The Man in Blue – widgEditor下载：widgEditor 1.0.1文档：下载包中包括文档文件 使用方式：将源文件下载到本地磁盘，在适当的地方用下面代码进行引用

Html代码 <linkrel="stylesheet"href="widgEditor/css/widgEditor.css"/> <scriptsrc="widgEditor/scripts/widgEditor.js"></script>

2. TinyMCE

优点：独立，易用；

缺点：代码量大

实例：Tiny MCE 应用实例下载：Tiny MCE 4.0.x文档：Tiny MCE 维基文档 使用方式：

Html代码 <textareaid="TypeHere">Typesometexthere.</textarea> <textareaid="NoTinyMCE">Thisisatextarea.</textarea> <scriptsrc="/4.0/tinymce.min.js"></script> <scripttype="application/x-javascript"> tinymce.init({selector:'#TypeHere'}); </script>

3. MarkItUp

MarkItUp基于jQuery，是一款 jQuery 插件，非常灵活，轻量，下载页有许多扩展，插件，皮肤，解析器和其它功能，MarkItUp 学习曲线比较陡峭，特别是把一些功能组合使用的时候。

实例：markItUP! 实例下载：markItUp! 下载文档：markItUp! 文档 1.1 使用方式：

Html代码 <textareaid="markItUp"cols="80"rows="20"> SomeSampleText </textarea> <scriptsrc="/jquery-1.8.0.min.js"></script> <scriptsrc="MarkItUp/markitup/jquery.markitup.js"></script> <scriptsrc="MarkItUp/markitup/sets/default/set.js"></script> <linkrel="stylesheet"href="MarkItUp/markitup/skins/simple/style.css"/> <linkrel="stylesheet"href="MarkItUp/markitup/sets/default/style.css"/> <script> $(document).ready(function(){ $('#markItUp').markItUp(mySettings); }); </script>

4. NicEdit

NicEdit简便快捷，包含很全的格式化功能，支持各种元素类型。

实例：NicEdit 实例下载：NicEdit 组件文档：NicEdit 维基 使用方式：

Html代码 <textareaid="NicEdit"cols="80"rows="5">SomeSampleText</textarea> <textareaid="NotNicEdit"cols="80"rows="5">SomeSampleText</textarea> <divid="NicEdit2">SomeSampleText</div> <scriptsrc="/nicEdit-latest.js"></script> <script> bkLib.onDomLoaded(function() { newnicEditor().panelInstance('NicEdit'); newnicEditor().panelInstance('NicEdit2'); }); </script>

5. YUI 2

YUI2是一个极简的富文本编辑器。

实例：YUI 2 富文本编辑器举例下载：YUI 2.9 zip文件文档：Yahoo! UI 库 使用方式：

Html代码 <textareaid="RichTextEdit"cols="100"rows="5">SomeSampleText</textarea> <bodyclass="yui-skin-sam"> <linkrel="stylesheet"href="/2.9.0/build/fonts/fonts-min.css"/> <linkrel="stylesheet"href="/2.9.0/build/editor/assets/skins/sam/simpleeditor.css"/> <scriptsrc="/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"> </script> <scriptsrc="/2.9.0/build/element/element-min.js"></script> <scriptsrc="/2.9.0/build/container/container_core-min.js"> </script> <scriptsrc="/2.9.0/build/editor/simpleeditor-min.js"></script> <script> (function() { newYAHOO.widget.SimpleEditor('RichTextEdit').render(); })(); </script>

演示网站：