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>

相关文章推荐

10个免费的javascript富文本编辑器(jQuery and non-jQuery)

http://www.cnblogs.com/ywqu/archive/2009/12/25/1631766.html 祝愿园子里的朋友圣诞节快乐。 本文介绍了10个免费易用富文本编辑器(ri...

Adobe免费开源的文本编辑器Brackets 支持Win/Linux/OS X

Update: http://brackets.io/ Adobe发布的Brackets,是一款针对Web设计人员的免费开源文本编辑器,内置HTML,CSS和JavaScript,方便开发者进行...

10款最流行的免费Mac OS文本编辑器

1) XEmacs 是一种强大的文本编辑器,在程序员和其他以技术工作为主的计算机用户中广受欢迎。EMACS,即 Editor MACroS(宏编辑器)的缩写,最初由Richard Stallman于1...

苹果上免费开源文本编辑器 -MacVim

MacVim是一款免费的支持多窗口的文本编辑软件.对于写文本和写代码的人来说这是一款非常棒的编辑器.MacVim来源于传说中的 Unix系统,很自然的Mac OS X继承了Unix的传统.所以Vim也...

10个最流行免费的Mac OS文本编辑器

转载自:http://www.open-open.com/home/space-4293-do-blog-id-1335.html 1) XEmacs 是一种强大的文本编辑器,在程序员和其他...

10个免费的富文本编辑器(JavaScript)

转载自慧都控件http://www.evget.com/zh-CN/Info/catalog/13816.html 简介 Javascript富文本编辑器使我们添加、编辑网站中的文章更加方便和容易...

FlexEdit-强大的文本编辑器(免费的!)

FlexEdit是Windows下的文本/十六进制编辑器,为编程人员提供方便强大的编辑器。FlexEdit为公益软件,你可以自由拷贝使用,包括商业应用。 更多关于FlexEdit的信息请点击:Fle...

HTML文本编辑器绿色免费

  • 2010年08月17日 12:17
  • 491KB
  • 下载

免费的、可编码转换的文本编辑器

  • 2011年01月14日 14:32
  • 1.13MB
  • 下载

QsciScintilla的使用方法总结(一个很好用的文本编辑器库)

今天就整理一下Qt下使用qsciscintilla的心得吧。什么是qsciscintillaScintilla是一个免费、跨平台、支持语法高亮的编辑控件。它完整支持源代码的编辑和调试,包括语法高亮、错...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:5款免费的富文本编辑器
举报原因:
原因补充:

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