5款免费的富文本编辑器

翻译 2013年11月15日 12:37:20

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

  widgEditor

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

  使用简便:

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

  需要引入相应的 CSS 和 JS:

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

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

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

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

  TinyMCE

  TinyMCE 易于使用:

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

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

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

  MarkItUp

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

  使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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 参数用于初始化设置。

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

  NicEdit

  NicEdit 简便快捷。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

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

  YUI 2: Rich Text Editor

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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” />
sam/simpleeditor.css” />
 
</script>
</script>
 
<script>
(function()
{
new YAHOO.widget.SimpleEditor(‘RichTextEdit’).render();
})();
</script>

  英文原文:five-free-javascript-libraries-to-add-text-editing-to-your-web-application

百度富文本编辑器UEditor指南

-
  • 1970年01月01日 08:00

IDC产品销售业务系统正式

  • 2014年10月18日 11:59
  • 3.16MB
  • 下载

富文本编辑器kindeditor

  • 2017年12月27日 10:26
  • 1.06MB
  • 下载

5款免费主流杀毒软件评测

  • 2014年05月26日 10:43
  • 3.97MB
  • 下载

10个免费的jQuery富文本编辑器

Javascript富文本编辑器使我们添加、编辑网站中的文章更加方便和容易。这些富文本编辑器提供了所见即所得(What You See Is What You Get - WYSIWYG)的功能,可以...
  • a137268431
  • a137268431
  • 2013-12-08 21:53:24
  • 6333

防简书富文本编辑器

  • 2017年12月27日 10:11
  • 24.46MB
  • 下载

froala富文本编辑器的相关

今天把一个问题复杂化了,也就是富文本编辑器 http://wangeditor.github.io/ 比如这个东西,人家很好的掌握了js写了很多东西,我只是用用 当然我用的是froala ...
  • charliefromkansas
  • charliefromkansas
  • 2016-05-11 17:00:48
  • 872

Android平台5款GPS导航软件横向对比测试 ---- 路试-实际导航体验

路试-实际导航体验现在是该让导航软件回归道路的时刻了。只有实际道路使用才能检验出导航软件的真实效果。我们设计了两条测试路线,第一条是从市区边缘至市中心的路线,在观察软件各种特性的同时,我们会故意走错路...
  • SuperArthur
  • SuperArthur
  • 2011-06-09 14:54:00
  • 1535

5款性能出色的JavaScript图表插件

近日国外某网站发表了一篇JavaScript图表插件的介绍,jQuery插件中包含了许多强大的图表绘制插件,不过这里介绍的这些插件并不是jQuery附带的。它们的性能也十分出色,有望成为Flash在这...
  • kj_zx19854
  • kj_zx19854
  • 2009-08-10 22:30:00
  • 704
收藏助手
不良信息举报
您举报文章:5款免费的富文本编辑器
举报原因:
原因补充:

(最多只允许输入30个字)