几种常用的文本编辑总结

 

一．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中的&nbsp;

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 ' );

 

 

                                                          以上方法仅供参考