5款免费的富文本编辑器

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

　　widgEditor

　　有时需要一款极简的文本编辑器，那么 widgEditor 再合适不过（只有33.4 KB），简洁实用。

　　使用简便：

Some Sample Text

　　需要引入相应的 CSS 和 JS：

　　点击放大镜按钮，支持 HTML 编码。

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

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

• 实例：The Man in Blue – widgEditor
• 下载：widgEditor 1.0.1
• 文档：下载包中有

　　TinyMCE

　　TinyMCE 易于使用：

Type some text here.
This is a text area.


</code> </div> <div class="line number6 index5 alt1"> <code class="plain">tinymce.init({selector:’#TypeHere’});</code> </div> <div class="line number7 index6 alt2"> <code class="plain">

　　tinymce.init() 也可以用 CSS3 选择器。

　　优点：独立，易用；缺点：代码量大

• 实例：Tiny MCE Full-Featured Example
• 下载：Tiny MCE 4.0.x
• 文档：Tiny MCE Wiki Documentation

　　MarkItUp

　　基于 jQuery ，MarkItUp 是 jQuery 插件。可以配置 MarkItUp ，把它当成标签标记器。

　　使用：

</code> </div> <div class="line number2 index1 alt1"> <code class="plain">Some Sample Text</code> </div> <div class="line number3 index2 alt2"> <code class="plain">








</code> </div> <div class="line number13 index12 alt2"> <code class="plain">$(document).ready(function() {</code> </div> <div class="line number14 index13 alt1"> <code class="plain">$(‘#markItUp’).markItUp(mySettings);</code> </div> <div class="line number15 index14 alt2"> <code class="plain">});</code> </div> <div class="line number16 index15 alt1"> <code class="plain">

　　mySettings 参数用于初始化设置。

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

• 实例：markItUP! in Action
• 下载：markItUp! Download
• 文档：markItUp! Documentation 1.1

　　NicEdit

　　NicEdit 简便快捷。

　　别的编辑器都用 标签，NicEdit 用其它标签也可以，比如 <div>：</p> <div> <div id="highlighter_815403" class="syntaxhighlighter plain ie"> <div class="toolbar"> <span>?</span> </div> <table border="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2"> 1 </div> <div class="line number2 index1 alt1"> 2 </div> <div class="line number3 index2 alt2"> 3 </div> <div class="line number4 index3 alt1"> 4 </div> <div class="line number5 index4 alt2"> 5 </div> <div class="line number6 index5 alt1"> 6 </div> <div class="line number7 index6 alt2"> 7 </div> <div class="line number8 index7 alt1"> 8 </div> <div class="line number9 index8 alt2"> 9 </div> <div class="line number10 index9 alt1"> 10 </div> <div class="line number11 index10 alt2"> 11 </div> <div class="line number12 index11 alt1"> 12 </div> <div class="line number13 index12 alt2"> 13 </div> </td> <td class="code"> <div> <div class="line number1 index0 alt2"> <code class="plain"><textarea id=”NicEdit” cols=”80″ rows=”5″>Some Sample Text

Some Sample Text
Some Sample Text



</code> </div> <div class="line number8 index7 alt1"> <code class="plain">bkLib.onDomLoaded(function()</code> </div> <div class="line number9 index8 alt2"> <code class="plain">{</code> </div> <div class="line number10 index9 alt1"> <code class="plain">new nicEditor().panelInstance(‘NicEdit’);</code> </div> <div class="line number11 index10 alt2"> <code class="plain">new nicEditor().panelInstance(‘NicEdit2′);</code> </div> <div class="line number12 index11 alt1"> <code class="plain">});</code> </div> <div class="line number13 index12 alt2"> <code class="plain">

　此款编辑器包含很全的格式化功能，支持各种元素类型。

• 实例：NicEdit Demos 1-5
• 下载：NicEdit Components
• 文档：NicEdit Wiki

　　YUI 2: Rich Text Editor

　　YUI2 富文本编辑器非常极简。

Some Sample Text





sam/simpleeditor.css” />

</code> </div> <div class="line number10 index9 alt1"> <code class="plain">

</code> </div> <div class="line number13 index12 alt2"> <code class="plain">


</code> </div> <div class="line number17 index16 alt2"> <code class="plain">(function()</code> </div> <div class="line number18 index17 alt1"> <code class="plain">{</code> </div> <div class="line number19 index18 alt2"> <code class="plain">new YAHOO.widget.SimpleEditor(‘RichTextEdit’).render();</code> </div> <div class="line number20 index19 alt1"> <code class="plain">})();</code> </div> <div class="line number21 index20 alt2"> <code class="plain">

• 实例：YUI 2 Rich Text Editor: Examples
• 下载：YUI 2.9 zip
• 文档：Yahoo! UI Library