5款免费的富文本编辑器

2024-1-12

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

widgEditor

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

使用简便：

 
 
 
 
    
  
  
  
  
  1. <textarea id=”widgEditor”>Some Sample Text</textarea> 
    2.

需要引入相应的 CSS 和 JS：

 
 
 
 
    
  
  
  
  
  1. <link rel=”stylesheet” href=”widgEditor/css/widgEditor.css” /> 
    2. 
  
  
  
  
  2. <script src=”widgEditor/scripts/widgEditor.js”></script> 
    3.

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

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

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

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

TinyMCE

TinyMCE 易于使用：

 
 
 
 
    
  
  
  
  
  1. <textarea id=”TypeHere”>Type some text here.</textarea> 
    2. 
  
  
  
  
  2. <textarea id=”NoTinyMCE”>This is a text area.</textarea> 
    3. 
  
  
  
  
  3.   
    4. 
  
  
  
  
  4. <script src=”http://tinymce.cachefly.net/4.0/tinymce.min.js”></script> 
    5. 
  
  
  
  
  5. <script type=”application/x-javascript”> 
    6. 
  
  
  
  
  6. tinymce.init({selector:’#TypeHere’}); 
    7. 
  
  
  
  
  7. </script> 
    8.

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

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

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

MarkItUp

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

使用：

 
 
 
 
    
  
  
  
  
  1. <textarea id=”markItUp” cols=”80″ rows=”20″> 
    2. 
  
  
  
  
  2. Some Sample Text 
    3. 
  
  
  
  
  3. </textarea> 
    4. 
  
  
  
  
  4.   
    5. 
  
  
  
  
  5. <script src=”http://code.jquery.com/jquery-1.8.0.min.js”></script> 
    6. 
  
  
  
  
  6. <script src=”MarkItUp/markitup/jquery.markitup.js”></script> 
    7. 
  
  
  
  
  7. <script src=”MarkItUp/markitup/sets/default/set.js”></script> 
    8. 
  
  
  
  
  8.   
    9. 
  
  
  
  
  9. <link rel=”stylesheet” href=”MarkItUp/markitup/skins/simple/style.css” /> 
    10. 
  
  
  
  
  10. <link rel=”stylesheet” href=”MarkItUp/markitup/sets/default/style.css” /> 
    11. 
  
  
  
  
  11.   
    12. 
  
  
  
  
  12. <script> 
    13. 
  
  
  
  
  13. $(document).ready(function() { 
    14. 
  
  
  
  
  14. $(‘#markItUp’).markItUp(mySettings); 
    15. 
  
  
  
  
  15. }); 
    16. 
  
  
  
  
  16. </script> 
    17.

mySettings 参数用于初始化设置。

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

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

NicEdit

NicEdit 简便快捷。

别的编辑器都用 <textarea> 标签，NicEdit 用其它标签也可以，比如 <div>：

 
 
 
 
    
  
  
  
  
  1. <textarea id=”NicEdit” cols=”80″ rows=”5″>Some Sample Text</textarea> 
    2. 
  
  
  
  
  2. <textarea id=”NotNicEdit” cols=”80″ rows=”5″>Some Sample Text</textarea> 
    3. 
  
  
  
  
  3. <div id=”NicEdit2″>Some Sample Text</div> 
    4. 
  
  
  
  
  4.   
    5. 
  
  
  
  
  5. <script src=”http://js.nicedit.com/nicEdit-latest.js”></script> 
    6. 
  
  
  
  
  6.   
    7. 
  
  
  
  
  7. <script> 
    8. 
  
  
  
  
  8. bkLib.onDomLoaded(function() 
    9. 
  
  
  
  
  9. { 
    10. 
  
  
  
  
  10. new nicEditor().panelInstance(‘NicEdit’); 
    11. 
  
  
  
  
  11. new nicEditor().panelInstance(‘NicEdit2′); 
    12. 
  
  
  
  
  12. }); 
    13. 
  
  
  
  
  13. </script> 
    14.

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

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

YUI 2: Rich Text Editor

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

 
 
 
 
    
  
  
  
  
  1. <textarea id=”RichTextEdit” cols=”100″ rows=”5″>Some Sample Text</textarea> 
    2. 
  
  
  
  
  2.   
    3. 
  
  
  
  
  3. <body class=”yui-skin-sam”> 
    4. 
  
  
  
  
  4.   
    5. 
  
  
  
  
  5. <link rel=”stylesheet” href=”http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css” /> 
    6. 
  
  
  
  
  6. <link rel=”stylesheet” href=”http://yui.yahooapis.com/2.9.0/build/editor/assets/skins/ 
    7. 
  
  
  
  
  7. sam/simpleeditor.css” /> 
    8. 
  
  
  
  
  8.   
    9. 
  
  
  
  
  9. <script src=”http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js”> 
    10. 
  
  
  
  
  10. </script> 
    11. 
  
  
  
  
  11. <script src=”http://yui.yahooapis.com/2.9.0/build/element/element-min.js”></script> 
    12. 
  
  
  
  
  12. <script src=”http://yui.yahooapis.com/2.9.0/build/container/container_core-min.js”> 
    13. 
  
  
  
  
  13. </script> 
    14. 
  
  
  
  
  14. <script src=”http://yui.yahooapis.com/2.9.0/build/editor/simpleeditor-min.js”></script> 
    15. 
  
  
  
  
  15.   
    16. 
  
  
  
  
  16. <script> 
    17. 
  
  
  
  
  17. (function() 
    18. 
  
  
  
  
  18. { 
    19. 
  
  
  
  
  19. new YAHOO.widget.SimpleEditor(‘RichTextEdit’).render(); 
    20. 
  
  
  
  
  20. })(); 
    21. 
  
  
  
  
  21. </script> 
    22.

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

原文链接：http://blog.smartbear.com/programming/five-free-javascript-libraries-to-add-text-editing-to-your-web-application/

译文链接：http://dev.oupeng.com/articles/5-free-text-editor

 

版权声明：
作者：后浪云
链接：https://www.idc.net/help/385726/
文章版权归作者所有，未经允许请勿转载。
THE END
Copyright © 2025 后浪云 网站地图