几种常用网页文本编辑器总结

一． 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();

例：

window.onload = function()

{

J.editor.add(\'elm1\').init();

}

</script>

<div>

lhgeditor小型在线编辑器</textarea>

</div>

</form>

ASA

二． nicEdit文本编辑器

bkLib.onDomLoaded(function() {

new nicEditor().panelInstance(\'area1\');

new nicEditor({fullPanel : true}).panelInstance(\'area2\');

new nicEditor({iconsPath : \'../nicEditorIcons.gif\'}).panelInstance(\'area3\');

new nicEditor({buttonList :[\'fontSize\',\'bold\',\'italic\',\'underline\',\'strikeThrough\',\'subscript\',

\' superscript\',\'html\',\'image\']}).panelInstance(\'area4\');

new nicEditor({maxHeight : 100}).panelInstance(\'area5\');

});

</script>

//默认模式

//new nicEditor().panelInstance(\'area1\');

//All Available Buttons

//new nicEditor({fullPanel : true}).panelInstance(\'area2\');

<textarea cols="60" id="area2">Some Initial Content was in this textarea</textarea>

//new nicEditor({iconsPath : \'../nicEditorIcons.gif\'}).panelInstance(\'area3\');

//自定义按钮

//new nicEditor({buttonList :[\'fontSize\',\'bold\',\'italic\',\'underline\',\'strikeThrough\',\'subscript\',

\'superscript\',\'html\',\'image\']}).panelInstance(\'area4\');

<textarea cols="50" id="area4">HTML <b>content</b> <i>default</i> in textarea</textarea>

//设置文本编辑器的最大高度

//new nicEditor({maxHeight : 100}).panelInstance(\'area5\');

HTML <b>content</b> <i>default</i> in textarea

</textarea>

三． kindeditor文本编辑器

(1) 支持多种语言php、asp

(2) 功能强大

默认模式

var editor;

KindEditor.ready(function(K) {

editor = K.create(\'textarea[name="content"]\', {

resizeType : 1,

allowPreviewEmoticons : false,

allowImageUpload : false,

items : [\'fontname\', \'fontsize\', \'|\', \'forecolor\', \'hilitecolor\', \'bold\', \'italic\',\'underline\',\'removeformat\', \'|\', \'justifyleft\',\'justifycenter\', \'justifyright\', \'insertorderedlist\',\'insertunorderedlist\', \'|\', \'emoticons\', \'image\', \'link\']

});

</script>

KindEditor

</textarea>

Multi Language Examples(多语言)

var editor;

KindEditor.ready(function(K) {

K(\'select[name=lang]\').change(function() {

if (editor) {

editor.remove();

editor = null;

}

editor = K.create(\'textarea[name="content"]\', {

langType : this.value

});

K(\'select[name=lang]\').change();

});

</script>

<form>

<p>

<option value="en">English</option>

<option value="ar">Arabic</option>

</select>

</p>

</form>

粘贴设置：

KindEditor.ready(function(K) {

K.create(\'#content1\', {

pasteType : 0

});

K.create(\'#content2\', {

pasteType : 1

});

K.create(\'#content3\', {

pasteType : 2

});

</script>

禁止粘贴

<textarea id="content1" name="content" style="width:700px;height:200px;

visibility:hidden;">

</textarea>

纯文本粘贴

<textarea id="content2" name="content" style="width:700px;height:200px;

visibility:hidden;">

</textarea>

HTML粘贴

<textarea id="content3" name="content" style="width:700px;height:200px;

visibility:hidden;"></textarea>

自定义插件

// 自定义插件 #1

KindEditor.lang({

example1 : \'插入HTML\'

});

KindEditor.plugin(\'example1\', function(K) {

var self = this, name = \'example1\';

self.clickToolbar(name, function() {

self.insertHtml(\'<strong>测试内容</strong>\');

});

// 自定义插件 #2

KindEditor.lang({

example2 : \'CLASS样式\'

});

KindEditor.plugin(\'example2\', function(K) {

var self = this, name = \'example2\';

function click(value) {

var cmd = self.cmd;

if (value === \'adv_strikethrough\') {

cmd.wrap(\'<span style="background-color:#e53333;

text-decoration:line-through;"></span>\');

} else {

cmd.wrap(\'<span class="\' + value + \'"></span>\');

}

cmd.select();

self.hideMenu();

}

self.clickToolbar(name, function() {

var menu = self.createMenu({

name : name,

width : 150

});

menu.addItem({

title : \'红底白字\',

click : function() {

click(\'red\');

}

});

menu.addItem({

title : \'绿底白字\',

click : function() {

click(\'green\');

}

});

menu.addItem({

title : \'黄底白字\',

click : function() {

click(\'yellow\');

}

});

menu.addItem({

title : \'自定义删除线\',

click : function() {

click(\'adv_strikethrough\');

}

});

KindEditor.ready(function(K) {

K.create(\'#content1\', {

cssPath : [\'../plugins/code/prettify.css\', \'index.css\'],

items : [\'source\', \'removeformat\', \'example1\', \'example2\', \'code\']

});

</script>

单独调用组件

上传图片弹出框

KindEditor.ready(function(K) {

var editor = K.editor({

allowFileManager : true

});

K(\'#image\').click(function() {

editor.loadPlugin(\'image\', function() {

editor.plugin.imageDialog({

imageUrl : K(\'#url\').val(),

clickFn : function(url, title, width, height, border, align) {

K(\'#url\').val(url);

editor.hideDialog();

}

});

</script>

取色器

KindEditor.ready(function(K) {

var colorpicker;

K(\'#colorpicker\').bind(\'click\', function(e) {

if (colorpicker) {

colorpicker.remove();

colorpicker = null;

}

var colorpickerPos = K(\'#colorpicker\').pos();

colorpicker = K.colorpicker({

x : colorpickerPos.x,

y : colorpickerPos.y + K(\'#colorpicker\').height(),

z : 19811214,

selectedColor : \'default\',

noColor : \'无颜色\',

click : function(color) {

K(\'#color\').val(color);

colorpicker.remove();

colorpicker = null;

}

});

</script>

四． 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>之前添加

注：如果jQuery之前已经在项目页面中使用，请勿重复添加引用代码

(3).

方法1：在textarea上添加属性： class="xheditor"

例如：<textarea name="content" class="xheditor">test</textarea>

方法2：在您的页面初始JS代码里加上： $(\'#elm1\').xheditor();

$(\'#elm1\').xheditor()；

例如：

$({

$(\'#elm1\').xheditor()；

});

相应的卸载编辑器的代码为

$(\'#elm1\').xheditor(false)；

例：

自定义按钮

$(pageInit);

function pageInit()

{

$.extend(xheditor.settings,{shortcuts:{\'ctrl+enter\':submitForm}});

$(\'#elm1\').xheditor({tools:\'full\'});

$(\'#elm2\').xheditor({tools:\'mfull\'});

$(\'#elm3\').xheditor({tools:\'simple\'});

$(\'#elm4\').xheditor({tools:\'mini\'});

$(\'#elm5\').xheditor({tools:\'Cut,Copy,Paste,Pastetext,|,Source,Fullscreen,About\'});

$(\'#elm6\').xheditor({tools:\'Cut,Copy,Paste,Pastetext,/,Source,Fullscreen,About\'});

}

function submitForm(){$(\'#frmDemo\').submit();}

</script>

1,full(完全):<br />

当前实例调用的Javascript源代码为：

</textarea>

2,mfull(多行完全):<br />

当前实例调用的Javascript源代码为：

</textarea>

3,simple(简单):<br />

当前实例调用的Javascript源代码为：

</textarea>

4,mini(迷你):<br />

当前实例调用的Javascript源代码为：

</textarea>

5,custom(自定义):<br />

当前实例调用的Javascript源代码为：

</textarea>

6,自定义多行模式:<br />

当前实例调用的Javascript源代码为

</textarea>

皮肤选择

注：为了保持项目精简，同一个页面只能调用一个皮肤，当同一界面同时调用多个皮肤时，最后一个皮肤的按钮面板样式会影响之前的

$(pageInit);

function pageInit()

{

$.extend(xheditor.settings,{shortcuts:{\'ctrl+enter\':submitForm}});

$(\'#elm1\').xheditor({skin:\'default\'});

$(\'#elm2\').xheditor({skin:\'o2007blue\'});

$(\'#elm3\').xheditor({skin:\'o2007silver\'});

$(\'#elm4\').xheditor({skin:\'vista\'});

$(\'#elm5\').xheditor({skin:\'nostyle\'});

}

function submitForm(){$(\'#frmDemo\').submit();}

</script>

1,默认皮肤:<br/>

当前实例调用的Javascript源代码为：

</textarea>

2,Office 2007 蓝色:<br />

当前实例调用的Javascript源代码为：

</textarea>

3,Office 2007 银白色:<br />

当前实例调用的Javascript源代码为

</textarea>

4,Vista:<br />

当前实例调用的Javascript源代码为

</textarea>

5,NoStyle:<br />

当前实例调用的Javascript源代码为

</textarea>

六． Tinymce

使用：

tinyMCE.init({

mode : "textareas",

theme : "simple" //模式

skin : "o2k7",//word

});

默认模式

tinyMCE.init({

mode : "textareas",

theme : "simple"

});

</script>

This is some example text that you can edit inside the <strong>TinyMCE editor

</textarea>

皮肤设置

tinyMCE.init({

// General options

mode : "exact",

elements : "elm1",

theme : "advanced",

plugins :"autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,

advlink,emotions,iespell,insertdatetime,preview,media,searchreple, print,contextmenu,paste,directionality,fullscreen,noneditable,

visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,autosa",

// Theme options

theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,

justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,

fontselect,fontsizeselect",

theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,

theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,

charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullsc",

theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,

styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,no,

template,pagebreak,restoredraft",

theme_advanced_toolbar_location : "top",//工具栏位置

theme_advanced_toolbar_align : "left",//工具栏对齐方式

theme_advanced_statusbar_location : "bottom",//状态显示栏的位置

theme_advanced_resizing : true,

// Example content CSS (should be your site CSS)

content_css : "css/content.css",

// Drop lists for link/image/media/template dialogs

template_external_list_url : "lists/template_list.js",

external_link_list_url : "lists/link_list.js",

external_image_list_url : "lists/image_list.js",

media_external_list_url : "lists/media_list.js",

// Replace values for the template plugin

template_replace_values : {

username : "Some User",

staffid : "991234"

}

});

</scritp>

// O2k7 skin

tinyMCE.init({

// General options

mode : "exact",

elements : "elm2",

theme : "advanced",

skin : "o2k7",

plugins : "lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,

emotions,iespell,insertdatetime,preview,media,searchreplace,print,cont extmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreg, xhtmlxtras,template,inlinepopups,autosave",

// Theme options

theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,

justifyleft,justifycenter,justifyright,justifyfull,styleselect,

formatselect,fontselect,fontsizeselect",

theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,

theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,

charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullsc",

theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,

styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,

nonbreaking,template,pagebreak,restoredraft",

theme_advanced_toolbar_location : "top",

theme_advanced_toolbar_align : "left",

theme_advanced_statusbar_location : "bottom",

theme_advanced_resizing : true,

// Example content CSS (should be your site CSS)

content_css : "css/content.css",

// Drop lists for link/image/media/template dialogs

template_external_list_url : "lists/template_list.js",

external_link_list_url : "lists/link_list.js",

external_image_list_url : "lists/image_list.js",

media_external_list_url : "lists/media_list.js",

// Replace values for the template plugin

template_replace_values : {

username : "Some User",

staffid : "991234"

}

});

</script>

This is some example text that you can edit inside the <strong>TinyMCE editor;.

</textarea>

// O2k7 skin (silver)

tinyMCE.init({

// General options

mode : "exact",

elements : "elm3",

theme : "advanced",

skin : "o2k7",

skin_variant : "silver",

plugins : "lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,

iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,

paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,

xhtmlxtras,template,inlinepopups,autosave",

// Theme options

theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough

,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect, formatselect,fontselect,fontsizeselect",

theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,

bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|, link,unlink,anchor,image,cleanup,help,code,|,insertdate,

inserttime,preview,|,forecolor,backcolor",

theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,

sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|, ltr,rtl,|,fullscreen",

theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,

styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchas, nonbreaking,template,pagebreak,restoredraft",

theme_advanced_toolbar_location : "top",

theme_advanced_toolbar_align : "left",

theme_advanced_statusbar_location : "bottom",

theme_advanced_resizing : true,

// Example content CSS (should be your site CSS)

content_css : "css/content.css",

// Drop lists for link/image/media/template dialogs

template_external_list_url : "lists/template_list.js",

external_link_list_url : "lists/link_list.js",

external_image_list_url : "lists/image_list.js",

media_external_list_url : "lists/media_list.js",

// Replace values for the template plugin

template_replace_values : {

username : "Some User",

staffid : "991234"

}

});

</script>

This is some example text that you can edit inside the <strong>TinyMCE

</textarea>

// O2k7 skin (silver)

tinyMCE.init({

// General options

mode : "exact",

elements : "elm4",

theme : "advanced",

skin : "o2k7",

skin_variant : "black",

plugins : "lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,

iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,

paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,

xhtmlxtras,template,inlinepopups,autosave",

// Theme options

theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough

,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect, formatselect,fontselect,fontsizeselect",

theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace

,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,

redo,|,link,unlink,anchor,image,cleanup,help,code,|,

insertdate,inserttime,preview,|,forecolor,backcolor",

theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,

sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|, ltr,rtl,|,fullscreen",

theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute

,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualch ars,nonbreaking,template,pagebreak,restoredraft",

theme_advanced_toolbar_location : "top",

theme_advanced_toolbar_align : "left",

theme_advanced_statusbar_location : "bottom",

theme_advanced_resizing : true,

// Example content CSS (should be your site CSS)

content_css : "css/content.css",

// Drop lists for link/image/media/template dialogs

template_external_list_url : "lists/template_list.js",

external_link_list_url : "lists/link_list.js",

external_image_list_url : "lists/image_list.js",

media_external_list_url : "lists/media_list.js",

// Replace values for the template plugin

template_replace_values : {

username : "Some User",

staffid : "991234"

}

});

</script>

This is some example text that you can edit inside the ;

</textarea>

七． 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 \' );

例：

简单应用

var UEDITOR_HOME_URL = "../"; //指向dialogs，themes等目录的父目录，推荐使用/开头的绝对路径

</script>

paths = [

\'editor.js\',

\'core/browser.js\',

\'core/utils.js\',

\'core/EventBase.js\',

\'core/dom/dom.js\',

\'core/dom/dtd.js\',

\'core/dom/domUtils.js\',

\'core/dom/Range.js\',

\'core/dom/Selection.js\',

\'core/Editor.js\',

\'commands/inserthtml.js\',

\'commands/image.js\',

\'commands/justify.js\',

\'commands/font.js\',

\'commands/link.js\',

\'commands/map.js\',

\'commands/iframe.js\',

\'commands/removeformat.js\',

\'commands/blockquote.js\',

\'commands/indent.js\',

\'commands/print.js\',

\'commands/preview.js\',

\'commands/spechars.js\',

\'commands/emotion.js\',

\'commands/selectall.js\',

\'commands/paragraph.js\',

\'commands/directionality.js\',

\'commands/horizontal.js\',

\'commands/time.js\',

\'commands/rowspacing.js\',

\'commands/lineheight.js\',

\'commands/cleardoc.js\',

\'commands/anchor.js\',

\'commands/delete.js\',

\'commands/wordcount.js\',

\'plugins/pagebreak/pagebreak.js\',

\'plugins/checkimage/checkimage.js\',

\'plugins/undo/undo.js\',

\'plugins/paste/paste.js\', //粘贴时候的提示依赖了UI

\'plugins/list/list.js\',

\'plugins/source/source.js\',

\'plugins/shortcutkeys/shortcutkeys.js\',

\'plugins/enterkey/enterkey.js\',

\'plugins/keystrokes/keystrokes.js\',

\'plugins/fiximgclick/fiximgclick.js\',

\'plugins/autolink/autolink.js\',

\'plugins/autoheight/autoheight.js\',

\'plugins/autofloat/autofloat.js\', //依赖UEditor UI,在IE6中，会覆盖掉body的背景图属性

\'plugins/highlight/highlight.js\',

\'plugins/serialize/serialize.js\',

\'plugins/video/video.js\',

\'plugins/table/table.js\',

\'plugins/contextmenu/contextmenu.js\',

\'plugins/pagebreak/pagebreak.js\',

\'plugins/basestyle/basestyle.js\',

\'plugins/elementpath/elementpath.js\',

\'plugins/formatmatch/formatmatch.js\',

\'plugins/searchreplace/searchreplace.js\',

\'plugins/customstyle/customstyle.js\',

\'ui/ui.js\',

\'ui/uiutils.js\',

\'ui/uibase.js\',

\'ui/separator.js\',

\'ui/mask.js\',

\'ui/popup.js\',

\'ui/colorpicker.js\',

\'ui/tablepicker.js\',

\'ui/stateful.js\',

\'ui/button.js\',

\'ui/splitbutton.js\',

\'ui/colorbutton.js\',

\'ui/tablebutton.js\',

\'ui/toolbar.js\',

\'ui/menu.js\',

\'ui/combox.js\',

\'ui/dialog.js\',

\'ui/menubutton.js\',

\'ui/datebutton.js\',

\'ui/editorui.js\',

\'ui/editor.js\',

\'ui/multiMenu.js\'

];

</script>

// 自定义的编辑器配置项,此处定义的配置项将覆盖editor_config.js中的同名配置

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( \'myEditor\' );

</script>

<p>这里我可以写一些输入提示</p>

</script>

秒客网

几种常用网页文本编辑器总结

相关文章