Web 應(yīng)用經(jīng)常會(huì)用到富文本編輯器功能，當(dāng)然如果是 JavaScript 大牛，重復(fù)造輪子也是可以的，如果想省時(shí)省力，可以關(guān)注下下面5款免費(fèi)的文本編輯器框架。
widgEditor
有時(shí)需要一款極簡(jiǎn)的文本編輯器，那么 widgEditor 再合適不過（只有33.4 KB），簡(jiǎn)潔實(shí)用。
使用簡(jiǎn)便：
<textarea id=”widgEditor”>Some Sample Text</textarea>
需要引入相應(yīng)的 CSS 和 JS：
<link rel=”stylesheet” href=”widgEditor/css/widgEditor.css” /> <script src=”widgEditor/scripts/widgEditor.js”></script>
點(diǎn)擊放大鏡按鈕，支持 HTML 編碼。
主要優(yōu)點(diǎn)：樸素，代碼小，易用；
缺點(diǎn)：功能不足，不易擴(kuò)展，缺乏第三方支持。
- 實(shí)例：The Man in Blue – widgEditor
- 下載：widgEditor 1.0.1
- 文檔：下載包中有
TinyMCE
TinyMCE 易于使用：
<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>
tinymce.init() 也可以用 CSS3 選擇器。
優(yōu)點(diǎn)：獨(dú)立，易用；缺點(diǎn)：代碼量大
MarkItUp
基于 jQuery ，MarkItUp 是 jQuery 插件?？梢耘渲?MarkItUp ，把它當(dāng)成標(biāo)簽標(biāo)記器。
使用：
<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>
mySettings 參數(shù)用于初始化設(shè)置。
MarkItUp 非常靈活，輕量，下載頁有許多擴(kuò)展，插件，皮膚，解析器和其它功能，MarkItUp 學(xué)習(xí)曲線比較陡峭，特別是把一些功能組合使用的時(shí)候。
- 實(shí)例：markItUP! in Action
- 下載：markItUp! Download
- 文檔：markItUp! Documentation 1.1
NicEdit
NicEdit 簡(jiǎn)便快捷。
別的編輯器都用 <textarea> 標(biāo)簽，NicEdit 用其它標(biāo)簽也可以，比如 <div>：
<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>
此款編輯器包含很全的格式化功能，支持各種元素類型。
- 實(shí)例：NicEdit Demos 1-5
- 下載：NicEdit Components
- 文檔：NicEdit Wiki
YUI 2: Rich Text Editor
YUI2 富文本編輯器非常極簡(jiǎn)。
<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>
- 實(shí)例：YUI 2 Rich Text Editor: Examples
- 下載：YUI 2.9 zip
- 文檔：Yahoo! UI Library
英文原文：five-free-javascript-libraries-to-add-text-editing-to-your-web-application
哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無需額外費(fèi)用，即可穩(wěn)步提升排名至首頁。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。