web富文本编辑器的选择のxheditor
最近在研究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
- 文档：下载包中包括文档文件
使用方式 ：将源文件下载到本地磁盘，在适当的地方用下面代码进行引用
- <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 维基文档
使用方式 ：
- <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
使用方式 ：
- <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 维基
使用方式 ：
- <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 库
使用方式 ：
- <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 以下是我觉得一般的(个人感觉哈!) 总结:我所认为值得一用的编辑器,一般都有完整的帮助文档,有社区在持续开发,最近有更新,在使用上方便灵活,支持多种定义方式,能所见即所得,在编码上安全与快捷,程序界面支持中文,界面风格比较漂亮,功能完整. 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。 · 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
web富文本编辑器的选择のxheditor相关推荐
- wangEditor - 轻量级web富文本编辑器（可带图片上传）
业务需求: 通过后台编辑文章和图片,上传到前端界面,展示新闻消息模块.这个时候,需要一款简洁的编辑器,百度编辑器是最常用的一种,但是功能太过于复杂,而wangEditor - 轻量级web富文本编辑器 ...
- 富文本_轻量级 web 富文本编辑器 —— wangEditor
介绍 wangEditor -- 轻量级 web 富文本编辑器,配置方便,使用简单.支持 IE10+ 浏览器. 官网:www.wangEditor.com 文档:www.kancloud.cn/wan ...
- web文本编辑器php源码,超级轻量web富文本编辑器HandyEditor
HandyEditor 是一套十分轻量且同时适用于手机端和pc端的web富文本编辑器,主要用于让用户在网站上获得所见即所得编辑效果,可以用 HandyEditor 把传统的多行文本输入框(textar ...
- web 富文本编辑器总结
前言 富文本编辑器,就是除了能输入不同的文本之外,还可以之间粘贴图画等其他的多媒体信息.也可说是所见即所得的编辑器. 目前可以使用的编辑器有很多, 在网络上有找到这样一份比较表格: 编辑器 产地 稳定 ...
- 如何配置一个最基本的web富文本编辑器？--之wangEditor（验证成功）
第一步,引用wangEditor的css文件,css文件最好在<head>中引用 <link rel="stylesheet" type="text/c ...
- 富文本编辑器的选择和使用
1.明白需求 (1)电子邮件 图片需要嵌入html,所以不需要做上传处理,因此选择summernote很轻松 (2)其他场合 还是iceEditor更好 2.iceEditor使用介绍 (1)准备容器 ...
- 项目中的富文本编辑器该如何选择?
项目中经常需要用到富文本编辑器的时候,而常见的富文本编辑器都有哪些?该如何选择? 先看看市面上都有哪些可用的富文本编辑器: TinyMCE(插件式的,支持 Vue,React,Angular 框架) ...
- 14款web前端常用的富文本编辑器插件
富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一 ...
- vue富文本编辑器 Vue-Quill-Editor
主流富文本编辑器对比 前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想.所以果断使用vue-quill-editor来实现. wangEditor( ...
最新文章
- C语言实现傅里叶变换函数dft,idft,fft,ifft
- oracle完全卸載,Oracle10g的完全卸載
- （补充）常用端口大全
- C++ 默认参数和占位符
- MySQL往数据库中存入中文字符时变问号
- ElementUI中使用el-calendar实现基于日历的节假日的增删改查
- linux命令 查看某安装包是否已安装
- android旋转角度,android 旋转角度总结
- oracle_最常见的 5 个导致节点重新启动、驱逐或 CRS 意外重启的问题
- 摘录一些介绍Linux DKMS的博客文章
- 基础算法之插入排序Insertion Sort
- MFC编程——Where is WinMain?
- C#.NET身份证验证算法
- 计算机系相声剧本,大学相声剧本:两种学生
- Windows 7 IE主页被篡改，如何修复？
- RedisClient下载地址
- 选择排序总结以及排序算法的稳定性
- 微信公众平台开发(3)--成为开发者并购置服务器环境
- Java获取Aix系统cpu和内存使用率
- 电商商城之分类实现（重点）