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

文本编辑器应用总结

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

}

lhgeditor小型在线编辑器

30977053_1

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

});

//默认模式

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

30977053_2//All Available Buttons

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

Some Initial Content was in this textarea

30977053_3

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

30977053_4

//自定义按钮

//newnicEditor({buttonList :['fontSize','bold','italic','underline','strikeThrough','subscript',

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

HTML content default in textarea

30977053_5

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

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

HTML content

default in textarea

30977053_6

三.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']

});

});

KindEditor

30977053_7

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

});

English

简体中文

繁體中文

Arabic

30977053_8

粘贴设置:

KindEditor.ready(function(K) {

K.create('#content1', {

pasteType : 0

});

K.create('#content2', {

pasteType : 1

});

K.create('#content3', {

pasteType : 2

});

});

禁止粘贴

visibility:hidden;">

30977053_9

纯文本粘贴

visibility:hidden;">

30977053_10

HTML粘贴

visibility:hidden;">

30977053_11

自定义插件

// 自定义插件#1

KindEditor.lang({

example1 : '插入HTML'

});

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

var self = this, name = 'example1';

self.clickToolbar(name, function() {

self.insertHtml('测试内容');

});

});

// 自定义插件#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('

text-decoration:line-through;">

');

} else {

cmd.wrap('');

}

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']

});

});

visibility:hidden;">

30977053_12

单独调用组件

上传图片弹出框

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

}

});

});

});

});

图片" />

30977053_13

取色器

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;

}

});

});

});

value="打开取色器" />

30977053_14

四.jsp基本编辑器

使用步骤:

1.把edit.htm修改为edit.jsp

2.把想要使用的地方包含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文件的之前添加

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

(3).

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

例如:test

方法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();}

1,full(完全):

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

30977053_15

2,mfull(多行完全):

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

30977053_16

3,simple(简单):

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

30977053_17

4,mini(迷你):

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

30977053_18

5,custom(自定义):

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

30977053_19

6,自定义多行模式:

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

30977053_20

皮肤选择

注:为了保持项目精简,同一个页面只能调用一个皮肤,当同一界面同时调用多个

皮肤时,最后一个皮肤的按钮面板样式会影响之前的

$(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();}

1,默认皮肤:

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

30977053_21

2,Office 2007 蓝色:

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

30977053_22

3,Office 2007 银白色:

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

30977053_23

4,Vista:

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

30977053_24

5,NoStyle:

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

30977053_25

六.Tinymce

使用:

tinyMCE.init({

mode : "textareas",

theme : "simple"//模式

skin : "o2k7",//word

});

默认模式

tinyMCE.init({

mode : "textareas",

theme : "simple"

});

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

editor

30977053_26

皮肤设置

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,

numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,

anchor,image,cleanup,help,code,|,insertdate,inserttime,prevw,

|,forecolor,backcolor",

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"

}

});

30977053_27

// 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,|,

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,|,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"

}

});

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

editor;.

30977053_28

// 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"

}

});

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

30977053_29

// 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"

}

});

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

30977053_30

七.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等目录的父目

录,推荐使用/开头的绝对路径

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'

];

// 自定义的编辑器配置项,此处定义的配置项将覆盖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' );

这里我可以写一些输入提示

30977053_31

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值