5款免费的富文本编辑器

转载 2013年11月14日 10:10:49
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>

ASP.NET一款免费富文本(RichText)编辑器KindEditor,实现在线排版编辑文章。这里简单介绍下如何使用

一般用到富文本编辑器的地方:留言板,论坛的发帖页以及回复页等。 所用软件VS2012 KindEditor下载地址(本文实例中所用版本4.1.10): http://download.csdn...
  • DongGeGe214
  • DongGeGe214
  • 2015年02月23日 14:10
  • 3726

8款流行前沿的HTML5文本编辑器

如果你是一名Web开发人员,当你需要开发一个独特的网站时,你就会知道文本编辑器的重要性。小编为大家整理了8款非常前沿的HTML5文本编辑器,简化开发流程,喜欢就转走吧! Mercury Edit...
  • qq_20545159
  • qq_20545159
  • 2016年03月26日 15:34
  • 2308

百度富文本编辑器Ueditor的使用

前言最近项目需要集成一个编辑器,于是听从了同事的推荐用的是百度的Ueditor,集成很顺利,本地也很顺利,然后部署到linux上就各种不能用。。。 期间也百度了很多的帖子,但是多数帖子都是使用的旧版...
  • tianxing0412
  • tianxing0412
  • 2016年04月16日 17:53
  • 2448

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

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

C# winform下的富文本编辑器

下载地址:http://pan.baidu.com/s/1i3Jq8HR 该编辑器是在网上找到的,用了之后发现有点问题: DocumentText内容修改后webbrowser就不能再编辑了 解...
  • blacksource
  • blacksource
  • 2014年01月17日 12:32
  • 10690

免费的javascript富文本编辑器

简介 Javascript富文本编辑器使我们添加、编辑网站中的文章更加方便和容易。这些富文本编辑器提供了所见即所得(What You See Is What You Get - WYSIWYG)的功...
  • zhangzhifei1991
  • zhangzhifei1991
  • 2014年11月15日 19:18
  • 343

12款可用于前端开发的免费文本编辑器(重点推荐)

作为前端开发工程师,你有能力编写复杂的代码,但你真正需要的是你最喜爱的,可信赖的文本编辑器。你可以使用一个简单的,如微软的记事本,但往往比较有益的文字编辑器具有语法突出/高亮功能,支持多种语言,包含一...
  • liaozhongping
  • liaozhongping
  • 2015年08月05日 23:30
  • 568

首选5款免费svn软件

http://www.infogenra.com/top-5-free-open-source-svn-tools-for-windows.html
  • xunileida
  • xunileida
  • 2012年01月04日 11:54
  • 333

免费开源富文本编辑器推荐

国内: 百度的ueditor以及kindeditor 国外: ckeditor 综合实力,推荐百度ueditor,毕竟从资源、社区、插件等方面来看,ueditor都更有潜力。 注:先挖坑,后续...
  • szh_61
  • szh_61
  • 2016年09月08日 13:55
  • 171

几款SNS开源框架

1. UCenter Home http://u.discuz.net/ 2. iWebSNS http://sns.jooyea.cn/service.html 3. ThinkSNS ...
  • monkey888_embeded
  • monkey888_embeded
  • 2012年06月14日 15:29
  • 603
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:5款免费的富文本编辑器
举报原因:
原因补充:

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