5款免费的富文本编辑器

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

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

free-editor-88620_507x320

widgEditor

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

使用简便:

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

需要引入相应的 CSS 和 JS:

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

120131117232253

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

主要优点:朴素,代码小,易用;

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

TinyMCE

TinyMCE 易于使用:

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

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

220131117232311

优点:独立,易用;缺点:代码量大

MarkItUp

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

使用:

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

mySettings 参数用于初始化设置。

320131117232333

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

NicEdit

NicEdit 简便快捷。

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

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

420131117232352

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

YUI 2: Rich Text Editor

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

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

520131117232409

原文链接: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

 

责任编辑:陈四芳 来源: dev.oupeng.com
相关推荐

2022-03-11 08:00:49

编辑器框架Draft.js

2023-04-17 11:03:52

富文本编辑器MTE

2016-09-23 20:30:54

Javascriptuiwebview富文本编辑器

2011-05-11 10:27:42

文本编辑器

2012-08-10 10:47:45

JavaScript

2017-07-27 20:21:06

iOSUITableView富文本编辑器

2022-04-15 14:44:10

编辑器前端富文本

2019-05-30 08:43:45

JavaScript富文本编辑器编辑器

2023-05-11 07:34:36

Yjs协同编辑

2015-03-30 17:59:42

编程语言文本编辑器

2021-01-13 19:13:57

Atom文本编辑器

2020-12-23 22:25:11

Vi文本编辑器Unix

2020-04-09 19:07:12

Vuetiptap前端

2022-04-13 07:38:50

富文本编辑器设置表格列宽

2021-01-13 13:29:06

文本编辑器Atom开源

2011-03-03 09:53:15

Linux文本编辑器

2018-01-05 14:48:03

前端JavaScript富文本编辑器

2022-02-15 09:00:18

Vue编辑器字符串

2010-03-24 09:20:07

CentOS vi编辑

2014-08-05 17:05:42

LinuxCSS编辑器
点赞
收藏

51CTO技术栈公众号