web富文本编辑器的选择のxheditor

2024-04-27 15:14:24

字体：大中小

来源：转载

供稿：网友

最近在研究web富文本编辑器，处理知道的

1、老牌fckeditor 网址：http://ckeditor.com/

2、百度退出的ueditor 网址：http://ueditor.baidu.com/website/index.html

3、还有几天要说的xheditor 网址：:http://xheditor.com/

csdn默认用的就是xheditor

cnblog默认用的是TinyMCE编辑器

Web 应用经常会用到富文本编辑器功能，当然如果是 javaScript 大牛，重复造轮子也是可以的，如果想省时省力，可以关注下下面 5 款免费的文本编辑器框架。 1. widgEditor widgEditor 体积小，只有 33.4 KB，简洁实用，支持 HTML 编码。主要优点：朴素，代码小，易用；缺点：功能不足，不易扩展，缺乏第三方支持。

实例：The Man in Blue – widgEditor下载：widgEditor 1.0.1文档：下载包中包括文档文件使用方式：将源文件下载到本地磁盘，在适当的地方用下面代码进行引用 Html代码<link rel="stylesheet" href="widgEditor/CSS/widgEditor.css" /> <script src="widgEditor/scripts/widgEditor.js"></script> 2. TinyMCE 优点：独立，易用；缺点：代码量大

实例：Tiny MCE 应用实例下载：Tiny MCE 4.0.x文档：Tiny MCE 维基文档使用方式： Html代码 <textarea id="TypeHere">Type some text here.</textarea> <textarea id="NoTinyMCE">This is a text area.</textarea> <script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script> <script type="application/x-Javascript"> tinymce.init({selector:'#TypeHere'}); </script> 3. MarkItUp MarkItUp 基于jQuery ，是一款 jQuery 插件，非常灵活，轻量，下载页有许多扩展，插件，皮肤，解析器和其它功能，MarkItUp 学习曲线比较陡峭，特别是把一些功能组合使用的时候。

实例：markItUP! 实例下载：markItUp! 下载文档：markItUp! 文档 1.1使用方式： Html代码<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> 4. NicEdit NicEdit 简便快捷，包含很全的格式化功能，支持各种元素类型。

实例：NicEdit 实例下载：NicEdit 组件文档：NicEdit 维基使用方式： Html代码 <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> 5. YUI 2 YUI2是一个极简的富文本编辑器。

实例：YUI 2 富文本编辑器举例下载：YUI 2.9 zip文件文档：Yahoo! UI 库使用方式： Html代码<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" /> <link rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/editor/assets/skins/sam/simpleeditor.css" /> <script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"> </script> <script src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script> <script src="http://yui.yahooapis.com/2.9.0/build/container/container_core-min.js"> </script> <script src="http://yui.yahooapis.com/2.9.0/build/editor/simpleeditor-min.js"></script> <script> (function() { new YAHOO.widget.SimpleEditor('RichTextEdit').render(); })(); </script>

1.FCKeditor他怎么样,我就不用多说了,网上多的很,不过有近300K的体积~~~2.xheditor这个控件好象用的人比较少,不过看起来感觉不错!JS+CSS+图片一共有50K,小啊,中文!3.tinyMCE网上的评价很高,值得一试,不过比较大,近200K了,中文!4.xinha网上的评价也很高,值得一试,不过体积也有120多K~~~5.CuteEditor据说CSDN用的是这个,收费的,不过有破解的版本.呵呵6.kindeditor美化的不错,有兴趣可以玩一玩,很好用,70~80K的样子,有中文语言!7.HTMLArea功能都大同小异的,可以试一试8.Cross-Browser Rich Text Editor 很小,全部体积不超过40K,可以试一试9.SinaEditor新浪编辑器应该算是最贴近网友体验的编辑器，简洁、大方，并且使用方便、功能强大。不过体积嘛,自己去看吧~~

以下是我觉得一般的(个人感觉哈!)1.InnovaStudio WYSIWYG Editor要收费2.eWebEditor国人制作,收费的3.jwysiwyg虽然小,但不好用4.WYMeditor样式不好看,个人不喜欢~~5.openWYSIWYG样式不好看,有近100K6.Free Rich Text Editor 相当不好用,连加个表格都是用专门的html页面,维护太复杂了7.MarkitUp无法"所见即所得"

总结:我所认为值得一用的编辑器,一般都有完整的帮助文档,有社区在持续开发,最近有更新,在使用上方便灵活,支持多种定义方式,能所见即所得,在编码上安全与快捷,程序界面支持中文,界面风格比较漂亮,功能完整.如果想选择功能强大,流行的,可以选FCKeditor与tinyMCE,但代价为体积较大,在性能上值得考虑一下,如果功能要求不是很高,或者对性能有需求,则可以选择xheditor或者kindeditor,当然还有更小的,比如jwysiwyg或Damn Small Rich Text Editor ,但使用上很不方便,得不偿失.

PS:如果有代码着色的需求,可以使用一个jquery的插件:highlighter,它对highlighter的非jquery版本做了一定的封装,使用非常方便!

引用来源：http://hi.baidu.com/sxwlty/blog/item/dc5cc30942e78a2e6b60fbb6.html

jwysiwyg

WYSIWYG jQuery插件。整个编辑器文件大小只有17Kb。

Damn Small Rich Text Editor

基于jQuery开发，能够从IFRAME元素创建一个Rich Text Editor。提供了所有基本的Rich Text功能，可设置文本编辑区大小，Ajax上传图片等。

EditArea

EditArea是一个javascript源代码编辑器。支持：文本格式化，搜索与替换，实时语法着色加亮。当前支持的语言包括：php、CSS、Javascript、Python、HTML、xml、VB、C、CPP、SQL、Pascal、Basic、Brainf*ck。

NicEdit

NicEdit是一个轻量级，跨平台的Inline Content Editor。NicEdit能够让任何 element/div变成可编辑或者能够把标准的textareas转换成Rich文本编辑器。

Damn Small Rich Text Editor

基于jQuery开发，压缩之后只有18k左右的Rich Text Editor。提供所有基本的Rich Text功能，调整文本区域大小，使用AjaxFileUpload插件上传图片，清除HTML标签，标记文本修改，支持多种浏览器（FF1.5+、IE7、IE6）。此外还支持通过插件来扩展文本处理功能。

WYMeditor

WYMeditor是一个web WYSIWYM XHTML编辑器。

TinyMCE

TinyMCE是一个开源，纯JavaScript HTML WYSIWYG编辑器。它能够把HTML TEXTAREA或其它HTML标签转换成Rich编辑器。TinyMCE非常易于集成到其它内容管理系统中。可以通过外观/主题和插件来定制满足自己需求的编辑器。提供汉化语言包。多浏览器支持：Mozilla、MSIE、Firefox、Opera和Safari。此外你还可以很方便地使用Ajax来保存和加载内容。

Yahoo! UI : Rich Text Editor

来自Yahoo! UI库中一个功能强大的Rich文本编辑器。

FCKeditor

FCKeditor是一个类似于MS Word的HTML文本编辑器。兼容多种浏览器，输出符合XHTML1.0标准，支持CSS以便能够与你的网站更好的结合，提供右键操作菜单，支持直接从Word粘贴，可以自己定制功能工具条，支持皮肤更换和通过插件扩展功能等。

Control.Editor

Control.Editor是一个基于Mootools开发的WYSIWYG Editor。

openWYSIWYG

纯javascript开发的，跨浏览器WYSIWYG Editor。只一行简单的代码就能够将<textarea>标签转换成一个强大的WYSIWYG editor。

Free Rich Text Editor

Free Rich Text Editor是一个易于使用的HTML WYSIWYG编辑器。只需要三行代码，就能够安装该编辑器。支持以下浏览器：

Xinha

Xinha是一个功能强大的WYSIWYG HTML编辑器，支持所有基于Mozilla的浏览器和MS IE。它具有易于扩展，功能模块丰富等特性。并且提供文件管理、图片上传插件、还可以对图片进行简单的编辑等功能。

MarkitUp

MarkitUp是一个轻量级，可定制，灵活的WYSIWYG Editor。

· 支持快捷键

· 支持Ajax动态预览

· 支持IE7、Safari3.1、Firefox2、Firefox3、IE6和Opera9+

· 支持html、Wiki、BBScode等编辑格式

SmartMarkUP

SmartMarkUP是一个轻量级，强大的JavaScript library，它能够将Textarea控件转换成富文本编辑器。支持HTML、CSS、XML、Wiki语法、BBCode等，可按实际需求配置。SmartMarkUP没有基于任何javascript框架开发，易于现有项目结合使用。

CKEditor

CKEditor是FCKeditor的3.0版本，具有更好的性能和丰富、强大的集成/交互接口以及一个崭新的用户界面等。

KindEditor

KindEditor是用JavaScript编写的HTML可视化编辑器。具有：

· 代码量少，加载速度快。

· 内置自定义range，完美地支持span标记。

· 所有功能都是插件，增加自定义功能非常简单。

· 编辑器风格定义在一个CSS文件里。

· 支持大部分浏览器，比如IE、Firefox、Safari、Chrome、Opera。

WMD-Editor

WMD（Wysiwym Markdown Editor）是一个简单，轻量级的HTML编辑器。适合在博客发表评论，论坛发贴中使用。

jHtmlArea

一个简单、轻量级、可扩展、基于jQuery开发的WYSIWYG HTML编辑器。这个组件可以很方便将页面中的TextArea标签转换成一个WYSIWYG HTML Editor。整个编辑器包括图片和CSS大小只有22k。

Reditor

Reditor是一个基于JQuery和JQuery UI开发的HTML Editor。

HtmlBox

HtmlBox是一个基于jQuery开发的HTML/XHTML编辑器。易于使用。支持多种浏览器Mozilla Firefox、Internet Explorer6.0、Opera、Safari和Netscape。非常小只有15kb。HtmlBox默认返回HTML，但也可以输出XHTML。集成Ajax支持。

KISSY Editor

一个小巧精简的HTML编辑器，仅依赖 yahoo-dom-event, min后不超过50k，gzip后不超过20k。拥有编辑器基本功能。测试过的浏览器： IE6+、Firefox3.5+、Safari4+、Chrome2+、Opera10+。

KISSY Editor

xhEditor

xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器，基于网络访问并且兼容IE 6.0-8.0,Firefox 3.0,Opera 9.6,Chrome 1.0,Safari 3.22。 Features(特性)：

· Small：初始加载5个文件，包括：1个js(45k)+2个css(7k)+2个图片(4k)，总共56k。若js和css文件进行gzip压缩传输，可以进一步缩减为21k左右。

· Fast：基于jQuery引擎开发，提供高效的代码执行效率

· Simple：简单的调用方式，加一个class属性就能将您的textarea立马变成一个功能丰富的可视化编辑器。

· Word：实现Word代码自动检测并清理，提供高效完美的Word代码过滤方案，生成代码最优化精简，但是却不丢失任何细节效果。

· UBB: 提供完美的UBB可视化编辑解决方案，在您获得安全高效代码存储的同时，又能享受可视化编辑的便捷

FileManager

这是一个开源，基于jQuery开发的文件管理器，可以集成到CKEditor/FCKEditor 和其它HTML编辑器中使用。实现文件上传、下载、重命名、删除。FileManager默认服务器端处理采用Python实现，但可以通过其提供的一个简单JavaScript API来扩展对其它语言的支持。