1. NicEdit

演示 | 下载

NicEdit小巧精悍，拥有你所需要的大部分功能，而且也很容易集成到你的网站之中。它完全可以做为那些体积大、功能繁杂的编辑器的替代者。

2. TinyMCE

演示 | 下载

TinyMCE是一个基于JavaScript的开源HTML所见即所得编辑器。它易于集成，并且拥有可高度定制的主题和插件。TinyMCE是功能非常齐全和强大的编辑器之一，它可以达到微软Word类似的编辑体验。

3. CKEditor

演示 | 下载

CKeditor是在FCkEditor基础上开发的新版本，而FCkEditor的市场地位之前已经得到了证明。建立在这个基础上的新版本，是为了修复FCkEditor的一些已知问题。而其结果肯定是造就一个可媲美微软Word和OpenOffice的完美功能、高性能的所见即所得编辑器。

4. YUI Rich Text Editor

演示 | 下载

YUI富文本编辑器是由Yahoo开发，用来控制UI界面，并把textarea文本域变成功能齐全区域的所见即所得编辑器。它虽然有几个具有不同功能特性的版本，但是仍然用不拥挤的按钮和功能界面达到了完美的用户体验。

5. MarkItUp!

演示 | 下载

Markitup!是一个基于jQuery的插件，它可以让你把任何一个textarea文本框变成变成一个标记语言编辑器。 Html, Textile, Wiki Syntax, Markdown, BBcode 或者任何一个你自己专属的标记语言都可以轻松地实施。 Markitup!不是你所期待的那种全功能编辑器，而是一款轻量级的，可高度定制的编辑器。Markitup!也不是所见即所得的编辑器，而且永远也不会那么去做。

6. FreeTextBox

演示 | 下载

FreeTextBox是一个特别为ASP.NET打造的HTML编辑器。它的外观和使用感觉，跟你在使用微软 Word时的感觉很类似。它的免费版本缺少一些附加的功能，但是免费版本已经足够用了。

7. MooEditable

演示 | 下载

所见即所得编辑器是一种比较流行的jQuery插件，但是作为Mootools插件的所见即所得编辑器就没那么常见了。而MooEditable填补了这一空白，它在Mootools这个优秀的JavaScript库的基础上，为用户提供了一个简单而又高效的体验。如果你是一个Mootools爱好者，你也会喜欢上这个编辑器的。

8. OpenWysiwyg

演示 | 下载

OpenWysiwyg是一个跨浏览器的富文本编辑器，它几乎拥有你所需要的各种功能。它还有一个包含下拉列表和按钮的时尚用户界面，其功能亮点是可以用来编辑具有不同边框和颜色的表格。遗憾的是，暂时还不支持Chrome。

9. Spaw Editor

演示 | 下载

Spaw是一款基于Web浏览器的所见即所得编辑器，它使网站开发者可以轻松地把标准的textarea文本区域替换为功能齐全、完全可定制、多语言、可换肤的基于Web的所见即所得HTML编辑器。

10. jHtmlArea

演示 |下载

jHtmlArea是一款以jQuery插件形式构建的所见即所得文本编辑器。它的目标是简单、重量，并且很好地达到了这个目标，里面仅保留了最基本的功能选项。它的外观、功能和语言都可以轻松地进行定制。

想进一步探讨吗？

如果你用过其中的一种，或者用了另外的一种基于Web的文本编辑器。或者，你对这个话题感兴趣，请在下面留言讨论。很乐意听到你的观点和声音！

PS:原文链接

相关日志

• Notepad++配合QuickText打造快速高效的文本编辑器

分类：Web前端, 内容分享 | 发布日期：2010-04-16 | 14 条评论 | 标签：texteditor, Web编辑器, WYSIWYG, 所见即所得, 文本编辑器

近来发现好多网友开始关注编辑器的标签代码替换或者自动完成等相关功能，这也是我一直在使用的一个功能。的确，这是一个很好的功能，编辑器配合这个功能可以有效地提升代码的书写速度，提高自己的工作效率。

其实，具有文本替换或者代码自动完成这个功能的软件也是挺多的，Windows环境下，至少TopStyle、Komodo IDE、EditPlus、VIM、Emacs等编辑器都具有类似功能的插件。这些编辑器我个人也都曾经用过一段时间，就功能、授权方式以及资源占用方面比较来看，Notepad++和VIM无疑是最好的选择，两者功能都比较强大，都是开源软件，软件本身都比较小，占用系统资源也很少。但是VIM的前期学习成本却太大，全代码的操作方式学习起来确实很令人头疼。这也是我最终选择基本不用学习就可以轻松上手的Notepad++的原因所在。

前面说了一堆不知道算不算废话的废话，本想继续废话，但是想想这些废话本已经存在，我也就不再废话了。想详细了解Notepad++这款软件的请移步Notepad++官网或者维基百科。想了解QuickText这个插件的请移步SourceForge。

废话结束，下面开始上图，用图片的方式给大家带来一个从Notepad++下载、安装、配置，到QuickText下载、安装、配置，到体验快速代码自动完成的全过程。

• 1、打开Google，在搜索框中输入notepad++并搜索
  
• 2、在Google搜索结果中点击进入Notepad++官网
  
• 3、在Notepad++官网中点击上导航的“下载专区”进入下载页面，然后点击“下载Notepad++可执行程式码”
  
• 4、在打开的SourceForge页面中点击绿色的“Download Now!”按钮下载最新的Notepad++程序
  
• 5、双击下载的Notepad++程序进行安装
  
• 6、选择安装位置
  
• 7、如果你想把Notepad++设为默认的IE浏览器源代码查看程序，请勾选“As default html……”选项
  
• 8、完成安装并运行Notepad++程序
  
• 9、Notepad++运行后会打开一个显示软件最新属性的页面
  
• 10、点击下载我提供的Notepad++插件风格包并解压缩
  
• 11、复制QuickText.dll到Notepad++安装目录下的plugins文件夹中
  
• 12、复制QuickText.ini到Notepad++的安装根目录下
  
• 13、复制stylers.xml文件，XP用户到C:\Documents and Settings\用户名\Application Data\Notepad++\ Win7用户到C:\Users\用户名\AppData\Roaming\Notepad++\目录备份并替换原有的stylers.xml文件
  注意：Application Data和AppData两个目录为隐藏目录
  
• 14、打开Notepad++，在菜单中选择设置-管理快捷键
  
• 15、选择Main menu中36行单词自动完成
  
• 16、双击在弹出的窗口中勾选SHIFT选项完成更改
  
• 17、在Notepad++菜单中选择插件-QuickText，可见默认的Repalce Tag快捷键为Ctrl+Enter
  
• 18、点击插件-QuickText中的Options选项可进入QuickText的选项设置窗口
  
• 19、打开Notepad++，在语言菜单中将当前文档语言设置为HTML
  
• 20、在文档中输入dtd
  
• 21、按Ctrl+Enter快捷键，dtd标签自动替换为
  
• 22、打开Notepad++，在语言菜单中将当前文档语言设置为CSS
  
• 23、在文档中输入w
  
• 24、按Ctrl+Enter快捷键，w标签自动替换为
  
• 25、本篇教程也是用Notepad++写成的，截图如下：
  

俗话说，师傅领进门，修行在个人。我不敢自称师傅，只愿这个小小的分享能够有助于大家学习Notepad++和QuickText并利用它们有效地提升你的工作速度和效率。Notepad++的更多功能和技巧，需要在使用中慢慢探索。

相关日志

• 十个最好用的所见即所得编辑器(WYSIWYG Editor)
• PPT分享：CSS继承之详解
• 20个免费的高品质XHTML/CSS模板下载
• 对立统一视角下的设计与前端
• PPT分享：高效、可维护、组件化的CSS
• 精品阅读（10）20090914
• 精品阅读（7）20090831
• Web前端开发在企业中的发展

分类：内容分享 | 发布日期：2009-12-17 | 47 条评论 | 标签：Notepad++, QuickText, texteditor, Tools, Web前端, 代码替换, 文本编辑器, 标签替换, 编辑器, 自动完成