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

文本编辑器应用总结 一 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小型在线编辑器二 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);/All Available Buttons/new nicEditor(fullPanel : true).panelInstance(area2);Some Initial Content was in this textarea/new nicEditor(iconsPath : ./nicEditorIcons.gif).panelInstance(area3);/自定义按钮/new nicEditor(buttonList :fontSize,bold,italic,underline,strikeThrough,subscript,superscript,html,image).panelInstance(area4);HTML content default in textarea/设置文本编辑器的最大高度/new nicEditor(maxHeight : 100).panelInstance(area5);HTML content default in textarea三 kindeditor文本编辑器(1) 支持多种语言php、asp(2) 功能强大默认模式var editor;KindEditor.ready(function(K) editor = K.create(textareaname=content, resizeType : 1,allowPreviewEmoticons : false,allowImageUpload : false,items : fontname, fontsize, |, forecolor, hilitecolor, bold, italic,underline,removeformat, |, justifyleft,justifycenter, justifyright, insertorderedlist,insertunorderedlist, |, emoticons, image, link););KindEditorMulti Language Examples(多语言)var editor;KindEditor.ready(function(K) K(selectname=lang).change(function() if (editor) editor.remove();editor = null;editor = K.create(textareaname=content, langType : this.value););K(selectname=lang).change(););English简体中文繁體中文Arabic粘贴设置：KindEditor.ready(function(K) K.create(#content1, pasteType : 0);K.create(#content2, pasteType : 1);K.create(#content3, pasteType : 2););禁止粘贴纯文本粘贴HTML粘贴自定义插件/ 自定义插件 #1KindEditor.lang(example1 : 插入HTML);KindEditor.plugin(example1, function(K) var self = this, name = example1;self.clickToolbar(name, function() self.insertHtml(测试内容);););/ 自定义插件 #2KindEditor.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(); 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););单独调用组件上传图片弹出框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(););););); 取色器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;););); 四 jsp基本编辑器使用步骤：1.把edit.htm 修改为 edit.jsp2.把想要使用的地方包含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源代码为：2,mfull(多行完全):当前实例调用的Javascript源代码为：3,simple(简单):当前实例调用的Javascript源代码为：4,mini(迷你):当前实例调用的Javascript源代码为：5,custom(自定义):当前实例调用的Javascript源代码为：6,自定义多行模式:当前实例调用的Javascript源代码为皮肤选择注：为了保持项目精简，同一个页面只能调用一个皮肤，当同一界面同时调用多个 皮肤时，最后一个皮肤的按钮面板样式会影响之前的$(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源代码为：2,Office 2007 蓝色:当前实例调用的Javascript源代码为：3,Office 2007 银白色:当前实例调用的Javascript源代码为4,Vista:当前实例调用的Javascript源代码为5,NoStyle:当前实例调用的Javascript源代码为六 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皮肤设置tinyMCE.init(/ General optionsmode : 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 optionstheme_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 dialogstemplate_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 plugintemplate_replace_values : username : Some User,staffid : 991234);/ O2k7 skintinyMCE.init(/ General optionsmode : 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 optionstheme_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 dialogstemplate_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 plugintemplate_replace_values : username : Some User,staffid : 991234);This is some example text that you can edit inside the TinyMCE editor;./ O2k7 skin (silver)tinyMCE.init(/ General optionsmode : 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 optionstheme_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 dialogstemplate_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 plugintemplate_replace_values : username : Some User,staffid : 991234);This is some example text that you can edit inside the TinyMCE / O2k7 skin (silver)tinyMCE.init(/ General optionsmode : 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 optionstheme_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,t