5 款免费实用的富文本编辑器
- - ITeye资讯频道Web 应用经常会用到富文本编辑器功能,当然如果是 JavaScript 大牛,重复造轮子也是可以的,如果想省时省力,可以关注下下面 5 款免费的文本编辑器框架. widgEditor 体积小,只有 33.4 KB,简洁实用,支持 HTML 编码. 主要优点:朴素,代码小,易用;. 缺点:功能不足,不易扩展,缺乏第三方支持.
<link rel="stylesheet" href="widgEditor/css/widgEditor.css" /> <script src="widgEditor/scripts/widgEditor.js"></script>
<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>
<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>
<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>
<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>