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

文本编辑器应用总结一．lhgeditor文本编辑器lhgeditor组件文件结构：1. lhgeditor.js：组件的核心JS文件2. lhgeditor.css：组件的样式表文件3. images：组件所需的图片都在此文件夹中以上三个文件为组件所必须的三个文件，组件包中其它以“_”开头的文件为示例的演示文件，实际使用中不需要这些文件。

当然框架核心文件lhgcore.js是每个组件都必须用到的文件，记得加载组件前先要加载此文件。

lhgeditor组件使用说明：1. 在调用组件的页面加载lhgcore.j s和lhgeditor.js两个文件。

2. 在window.onload函数里加入J.editor.add(编辑器的id).init();例：<script type="text/javascript">window.onload = function(){J.editor.add('elm1').init();}</script><form action="_postdate.asp" method="post" target="_blank"><div><textarea name="elm1" id="elm style="width:600px;height:300px;">lhgeditor小型在线编辑器</textarea></div><input type="submit" value="Submit" /></form>二．nicEdit文本编辑器<script type="text/javascript">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');<textarea cols="50" id="area1"></textarea>//All A vailable 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');<textarea cols="50" id="area3"></textarea>//自定义按钮//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');<textarea style="height: 100px;" cols="50" id="area5">HTML <b>content</b> <i>default</i> in textarea</textarea>三．kindeditor文本编辑器(1) 支持多种语言php、asp(2) 功能强大默认模式<script charset="utf-8" src="../kindeditor-min.js"></script><script charset="utf-8" src="../lang/zh_CN.js"></script><script>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><textarea name="content" style="width:700px;height:200px;visibility:hidden;">KindEditor</textarea>Multi Language Examples(多语言)<script charset="utf-8" src="../kindeditor-min.js"></script><script>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><select name="lang"><option value="en">English</option><option value="zh_CN">简体中文</option><option value="zh_TW">繁體中文</option><option value="ar">Arabic</option></select></p><textarea name="content" style="width:800px;height:200px;"></textarea> </form>粘贴设置：<script charset="utf-8" src="../kindeditor-min.js"></script><script charset="utf-8" src="../lang/zh_CN.js"></script><script>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>自定义插件<script charset="utf-8" src="../kindeditor-min.js"></script> <script charset="utf-8" src="../lang/zh_CN.js"></script> <script>// 自定义插件#1ng({example1 : '插入HTML'});KindEditor.plugin('example1', function(K) {var self = this, name = 'example1';self.clickToolbar(name, function() {self.insertHtml('<strong>测试内容</strong>');});});// 自定义插件#2ng({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><textarea id="content1" name="content" style="width:700px;height:200px; visibility:hidden;"></textarea>单独调用组件上传图片弹出框<script src="../kindeditor.js"></script><script src="../lang/zh_CN.js"></script><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><input type="text" id="url" value="" /> <input type="button" id="image" value="选择图片" />取色器<script src="../kindeditor-min.js"></script><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><input type="text" id="color" value="" /> <input type="button" id="colorpicker" value="打开取色器" />四．jsp基本编辑器使用步骤：1.把edit.htm 修改为edit.jsp2.把想要使用的地方包含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="/js/jquery.js"></script><script type="text/javascript" src="/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)；例：自定义按钮<script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script><script type="text/javascript" src="../xheditor-1.1.12-zh-cn.min.js"></script><script type="text/javascript">$(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 /><textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为：</textarea>2,mfull(多行完全):<br /><textarea id="elm2" name="elm2" rows="8" cols="80" style="width: 40%"> 当前实例调用的Javascript源代码为：</textarea>3,simple(简单):<br /><textarea id="elm3" name="elm3" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为：</textarea>4,mini(迷你):<br /><textarea id="elm4" name="elm4" rows="8" cols="80" style="width: 40%"> 当前实例调用的Javascript源代码为：</textarea>5,custom(自定义):<br /><textarea id="elm5" name="elm5" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为：</textarea>6,自定义多行模式:<br /><textarea id="elm6" name="elm6" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为</textarea>皮肤选择注：为了保持项目精简，同一个页面只能调用一个皮肤，当同一界面同时调用多个皮肤时，最后一个皮肤的按钮面板样式会影响之前的<script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script><script type="text/javascript" src="../xheditor-1.1.12-zh-cn.min.js"></script><script type="text/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();}</script>1,默认皮肤:<br/><textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为：</textarea>2,Office 2007 蓝色:<br /><textarea id="elm2" name="elm2" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为：</textarea>3,Office 2007 银白色:<br /><textarea id="elm3" name="elm3" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为</textarea>4,Vista:<br /><textarea id="elm4" name="elm4" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为</textarea>5,NoStyle:<br /><textarea id="elm5" name="elm5" rows="8" cols="80" style="width: 40%">当前实例调用的Javascript源代码为</textarea>六．Tinymce使用：tinyMCE.init({mode : "textareas",theme : "simple" //模式skin : "o2k7",//word});默认模式<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript">tinyMCE.init({mode : "textareas",theme : "simple"});</script><textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 40%">This is some example text that you can edit inside the <strong>TinyMCE editor</textarea>皮肤设置<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script><script type="text/javascript">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"}});</scritp><textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 40%"><script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script><script type="text/javascript">// 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,contextmenu,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"}});</script><textarea id="elm2" name="elm2" rows="8" cols="80" style="width: 40%">This is some example text that you can edit inside the <strong>TinyMCE editor;.</textarea><script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script><script type="text/javascript">// 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"}});</script><textarea id="elm3" name="elm3" rows="8" cols="80" style="width: 40%">This is some example text that you can edit inside the <strong>TinyMCE</textarea><script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script><script type="text/javascript">// 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,|,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"}});</script><textarea id="elm4" name="elm4" rows="8" cols="80" style="width: 40%">This is some example text that you can edit inside the ;</textarea>七．ueditor11.避免了重复加载源码高亮的核心代码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,//关闭elementPathelementPathEnabled:false//更多其他参数，请参考editor_config.js中的配置项};var editor_a = new baidu.editor.ui.Editor(editorOption);editor_a.render( ' textarea的Id ' );例：简单应用<script type="text/javascript">var UEDITOR_HOME_URL = "../"; //指向dialogs，themes等目录的父目录，推荐使用/开头的绝对路径</script><script type="text/javascript" charset="utf-8" src="../editor_config.js"></script><!--使用版--><!--<script type="text/javascript" charset="utf-8" src="../editor_all.js"></script>--><!--开发版--><script type="text/javascript" charset="utf-8" src="editor_api.js">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',。