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

5款免费的富文本编辑器

Web 应用经常会用到富文本编辑器功能,当然如果是 JavaScript 大牛,重复造轮子也是可以的,如果想省时省力,可以关注下下面5款免费的文本编辑器框架。   widgEditor   有...
  • wenbing756169311
  • wenbing756169311
  • 2013年11月14日 10:10
  • 668

5款免费的富文本编辑器

Web 应用经常会用到富文本编辑器功能,当然如果是 JavaScript 大牛,重复造轮子也是可以的,如果想省时省力,可以关注下下面5款免费的文本编辑器框架。 widgEditor 有时需...
  • ljinkai_ljk
  • ljinkai_ljk
  • 2013年11月19日 23:06
  • 942

干货,10个免费的HTML编辑器

文章转载自:慧都控件网 [http://www.evget.com] 本文地址:http://www.evget.com/article/2015/2/4/22121.html 概述:你还在用...
  • Small_YX
  • Small_YX
  • 2015年02月27日 09:09
  • 639

MacDown一款Mac平台Markdown免费编辑器

Mac平台Markdown免费编辑器
  • loongshawn
  • loongshawn
  • 2017年03月28日 11:13
  • 3413

7 款优秀 Markdown 编辑工具推荐

解决作者编辑们的焦虑:7 款优秀 Markdown 编辑工具推荐 什么是 Markdown?简单地说,它就是一种语法,一门适合用于写作的简单语言。用过 Markdown 的人都知道,...
  • English0523
  • English0523
  • 2016年12月19日 11:05
  • 2131

博客编辑神器:Markdown编辑器

献给写作者的 Markdown 新手指南 为什么作家应该用 Markdown 保存自己的文稿 Markdown写作浅谈 Markdown 语法说明 Markdown 公式指导手册 什么是极客最爱的Ma...
  • axi295309066
  • axi295309066
  • 2015年10月16日 11:09
  • 1163

推荐10 款最好用的 Python IDE

Python 非常易学,强大的编程语言。Python 包括高效高级的数据结构,提供简单且高效的面向对象编程。 Python 的学习过程少不了 IDE 或者代码编辑器,或者集成的开发编辑器(IDE)。...
  • jiang314
  • jiang314
  • 2016年06月15日 11:25
  • 8032

有哪些好的 LaTeX 编辑器?

知乎用户 ,喜欢排版 收录于 编辑推荐 •577 人赞同 2016-04-21:更新 Atom 编辑器中文自动换行,见 Atom 配置中的备注 2016-03-06:更新 Ato...
  • GarfieldEr007
  • GarfieldEr007
  • 2016年05月26日 14:13
  • 5365

让Markdown写作更简单,免费极简编辑器:Typora

前言Markdown是一个很不错的标记语言,向来都是文字爱好者和码农们的小众需求,用它写东西几乎可以不用考虑排版的问题,它就会自动的生成还算美观的格式。对于作为学生党的我来说,平时记东西也很方便。 ...
  • qin528032307
  • qin528032307
  • 2017年04月25日 19:55
  • 293

Perl语言学习(Perl安装+编辑第一个程序)

由于公司需要,本人最近在学习Perl这种脚本语言,本文是我在学习Perl的过程中总结出来的一些心得和笔记,希望能够帮助也在学习Perl的各位同僚。废话不多说直接上干货!!! —————————————...
  • qq_33093199
  • qq_33093199
  • 2016年07月11日 14:37
  • 332
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:5款免费的富文本编辑器
举报原因:
原因补充:

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