一.lhgeditor文本编辑器
lhgeditor组件文件结构:
1. lhgeditor.js: 组件的核心JS文件
2. lhgeditor.css:组件的样式表文件
3. images:组件所需的图片都在此文件夹中
以上三个文件为组件所必须的三个文件,组件包中其它以“_”开头的文件为示例的演示文件,实际使用中不需要这些文件。当然框架核心文件lhgcore.js是每个组件都必须用到的文件,记得加载组件前先要加载此文件。
lhgeditor组件使用说明:
1. 在调用组件的页面加载lhgcore.js和lhgeditor.js两个文件。
2. 在window.onload函数里加入J.editor.add(编辑器的id).init();。
二.nicEdit文本编辑器
//默认模式
new nicEditor().panelInstance('textarea的Id');
//All Available Buttons
new nicEditor({fullPanel : true}).panelInstance(textarea的Id);
new nicEditor({iconsPath : '../nicEditorIcons.gif'}).panelInstance(' textarea的Id ');
//自定义按钮
new nicEditor({buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript','html','image']}).panelInstance(' textarea的Id ');
//设置文本编辑器的最大高度
new nicEditor({maxHeight : 100}).panelInstance(' textarea的Id ');
三.kindeditor文本编辑器
(1) 支持多种语言php、asp
(2) 功能强大
四.jsp基本编辑器
使用步骤:
1.把edit.htm 修改为 edit.jsp
2.把想要使用的地方包含edit.jsp就行了
代码:
<!--富文本编辑器-->
<%@ include file="edit.jsp"%>
注意事项:
在需要引入编辑器的页面中的onload事件,要结合edit.jsp中的事件
五.Xheditor
(1) 解压压缩文件,将其中的xheditor-zh-cn.min.js以及xheditor_emot、xheditor_plugins和xheditor_skin三个文件夹上传到网站相应目录
注:如果您网站中没有使用jQuery框架,也请一并上传jquery文件夹中的jquery-1.4.4.min.js
(2) 在相应html文件的</head>之前添加
<script type="text/javascript" src="http://static.xxx.com/js/jquery.js"></script>
<script type="text/javascript" src="http://static.xxx.com/js/xheditor.js"></script>
注:如果jQuery之前已经在项目页面中使用,请勿重复添加引用代码
(3).
方法1:在textarea上添加属性: class="xheditor"
例如:<textarea name="content" class="xheditor">test</textarea>
方法2:在您的页面初始JS代码里加上: $('#elm1').xheditor();
$('#elm1').xheditor();
例如:
$({
$('#elm1').xheditor();
});
相应的卸载编辑器的代码为
$('#elm1').xheditor(false);
六.Tinymce
使用:
tinyMCE.init({
mode : "textareas",
theme : "simple" //模式
skin : "o2k7",//word
});
七.ueditor1
1.避免了重复加载源码高亮的核心代码
2.修复了word粘贴table过滤出错问题
3.修复插入地图会出现style="undefined"的问题
4.优化了list,多个相邻的属性一直的list会合并
5.可以在列表中的一行里产生多行的效果(通过回车再回退操作),类似office的效果
6.添加自定义样式功能
7.修了在chrome下右键删除td里的图片会把整个td删除的问题
8.改进了不同的页面调用一个editor,URL问题
9.增加了颜色选择器的颜色
10.改进了提供的后台程序的安全性
11.代码高亮支持折行
12.改进了源码编辑模式下的性能(ie下),并且支持自动换行
13.修改了在destroy之后会在ie下报错的问题
14.给初始化容器name值,那么在后台取值的键值就是name给定的值,方便多实例在一个form下提交
15.支持插入script/style这样的标签
16.修复了列表里插入浮动图片,图片不占位问题
17.源码模式下,去掉了pre中的
18.完善了_example下的demo例子
19.base64的图片被过滤掉了
使用方法:var editorOption = {
//这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']],
//focus时自动清空初始化时的内容
autoClearinitialContent:true,
//关闭字数统计
wordCount:false,
//关闭elementPath
elementPathEnabled:false
//更多其他参数,请参考editor_config.js中的配置项
};
var editor_a = new baidu.editor.ui.Editor(editorOption);
editor_a.render( ' textarea的Id ' );
以上方法仅供参考