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

最新推荐文章于 2024-08-12 09:03:45 发布

爱的叹息

最新推荐文章于 2024-08-12 09:03:45 发布

阅读量1.4k

点赞数

文章标签：富文本编辑器

本文链接：https://blog.csdn.net/zp357252539/article/details/54927143

版权

最近在研究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

优点：独立，易用；
缺点：代码量大

使用方式：

    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 学习曲线比较陡峭，特别是把一些功能组合使用的时候。

使用方式：

    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 是一个极简的富文本编辑器。

使用方式：

    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
 样式不好看,有近100K
 6.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来扩展对其它语言的支持。
 演示网站：http://www.aigou8.net