简单使用说明: 1. 下载xhEditor最新版本。下载地址:http://code.google.com/p/xheditor/downloads/list 2. 解压压缩文件,将其中的xheditor.js以及xheditor_emot、xheditor_plugins和xheditor_skin三个文件夹上传到网站相应目录 3. 在相应html文件的head标签结束之前添加 <script type="text/javascript" src="http://static.xxx.com/js/xheditor.js"></script> 4. 调用方法有两种: 方法1:在textarea上添加属性: class="xheditor {skin:'default'}",前面主参数也可以是xheditor-mini和xheditor-simple,分别加载迷你和简单工具栏,后面详细参数可以省略 方法2:在您的页面初始JS代码里加上: $('#elm1').xheditor(); 例如: $({ $('#elm1').xheditor(); }); 相应的删除编辑器的代码为: $('#elm1').xheditor(false); 重要说明:2种初始化方法只能选择其中一种,不能混合使用,优先级分别是:方法1>方法2,例如用了方法1,方法2就无法使用了 初始化参数说明 初始化示例代码: $('#elm1').xheditor({tools:'full',skin:'default',showBlocktag:true,readonly:false,internalScript:false,internalStyle:false,width:300,height:200,loadCSS:'http://pirate9.com/test.css',fullscreen:true,sourceMode:true,forcePtag:true,upImgUrl:"upload.php",upImgExt:"jpg,jpeg,gif,png",plugins:{}}); tools:自定义工具按钮 参数值:full(完全),simple(简单),mini(迷你) 或者自定义字符串,例如:'GStart,Cut,Copy,Paste,Pastetext,GEnd,Separator,GStart,Source,Preview,Fullscreen,About,GEnd' 完整按钮表: GStart:组开始 GEnd:组结束 Separator:分隔符 BtnBr:强制换行 Cut:剪切 Copy:复制 Paste:粘贴 Pastetext:文本粘贴 Blocktag:段落标签 Fontface:字体 FontSize:字体大小 Bold:粗体 Italic:斜体 Underline:下划线 Strikethrough:中划线 FontColor:字体颜色 BackColor:字体背景色 Removeformat:删除文字格式 Align:对齐 List:列表 Outdent:减少缩进 Indent:增加缩进 Link:超链接 Unlink:删除链接 Img:图片 Flash:Flash动画 Media:Windows media player视频 Emot:表情 Table:表格 Source:切换源代码模式 Preview:切换预览模式 Fullscreen:切换全屏模式 About:关于xhEditor skin:皮肤风格选择 参数值:default(默认风格),o2007blue(Office 2007 蓝色),o2007silver(Office 2007 银色) layerShadow:阴影的深度(按钮面板和模式窗口的背景阴影) 参数值:0(不显示阴影),大于0的数值(显示阴影并设置阴影的深度) clickCancelDialog:点击任意位置取消按钮面板功能 参数值:默认true(开启点击取消功能),false(关闭点击取消功能,必需要点击“取消”按钮才能关闭按钮面板) showBlocktag:显示段落标签 参数值:true(显示段落标签),false(不显示) linkTag:样式链接link标签保留状态 参数值:true(保留样式链接link标签),false(清理样式链接link标签) internalScript:内部JS代码保留状态 参数值:true(保留内部JS代码),false(清理内部JS代码) inlineScript:内联JS代码保留状态 参数值:true(保留内联JS代码),false(清理内联JS代码) internalStyle:内部样式保留状态 参数值:true(保留内部样式),false(清理内部样式) inlineStyle:内联样式保留状态 参数值:true(保留内联样式),false(清理内联样式) width:编辑器宽度 参数值:不带单位的数字,例:300 height:编辑器高度 参数值:不带单位的数字,例:100 loadCSS:加载样式 参数值:样式表网址字符串,例如:'1.css',或者是字符串数组,例如:['1.css','2.css'] fullscreen:默认全屏显示 参数值:true(全屏大小),false(标准大小) readonly:默认只读模式 参数值:true(只读模式),false(可编辑模式) sourceMode:默认源代码模式 参数值:true(源代码模式),false(编辑模式) forcePtag:强制P标签 参数值:true(强制使用P标签),false(不强制),默认true shortcuts:自定义键盘快捷方式 参数:快捷键对应事件代码的对象数组 示例:{'ctrl+enter':function(){$('#frmTest').submit();}} 备注:1.0.0 beta2新添加 localUrl:本地URL地址强制转换方式选择 参数:abs(绝对路径),root(根路径),rel(相对路径) 备注:1.0.0 beta2新添加 emotMark:是否在表情img标签上标注emot属性 参数:true(标注),false(不标注),默认为false 说明:若使用了ubb插件,请设置此属性为true 备注:1.0.0 beta2新添加 emots:添加自定义表情 参数:可定义多个JSON对象数组,示例如下:{qq:{name:'QQ',count:55,width:25,height:25,line:11},msn:{name:'MSN',count:40,width:22,height:22,line:8}} name:表情分组名 count:表情数量 list:表情列表,例:{test1:'表情1',test2:'表情2'},键名代表文件名,扩展名必需为gif,键值代表alt信息 width:单个表情区域宽度,必需大于或等于表情最大宽度 height:单表情区域高度,必需大于或等于表情最大高度 line:单行显示表情数量 说明:count和list必需选其中一个值,注意count模式插入表情img的alt为空 备注:1.0.0 beta2新添加 wordDeepClean:Word文档深入清理选项 参数:true(深入清理),false(不深入清理,保留style样式效果),默认为true 说明:若网站应用需要保留更多的Word样式效果,请设置此值为false,不过产生的HTML代码体积会大大增大 备注:1.0.0 beta2新添加 hoverExecDelay:悬停自动执行延迟的时间 参数:数值(单位毫秒),默认为100,设置为-1关闭此功能 备注:1.0.0 rc2新添加 defLinkText:超链接的默认文字 参数值:字符串(默认值:“点击打开链接”) 说明:只在不选择任何内容的情况下才会用到这个参数值 modalWidth:showModal弹出窗口的默认宽度 参数值:数值,默认为350 说明:弹出窗口的默认宽度 modalHeight:showModal弹出窗口的默认高度 参数值:数值,默认为220 说明:弹出窗口的默认高度 modalTitle:showModal弹出窗口是否显示上方的标题栏 参数值:true(显示),false(不显示) 说明:控制弹出窗口是否显示上方的标题栏,默认为显示,若需要显示一个更定制个性化的iframe窗口,可通过此参数隐藏上方的标题栏 upBtnText:上传按钮的文字 参数值:任意字符串,默认值:“上传” 备注:1.0.0 beta2新添加 upLinkUrl:超链接文件上传接收URL 参数值:接收用户上传的服务器端程序URL,默认留空为禁用超链接上传功能,具体使用方法请参考demo8演示文件 注:可使用内置变量:{editorRoot},代表当前编辑器的根路径,例:{editorRoot}upload.php upLinkExt:超链接上传前限制本地文件扩展名 参数值:超链接上传前限制的文件扩展名列表,默认为:zip,rar,txt,建议与服务端扩展名检查列表一致 upImgUrl:图片文件上传接收URL 参数值:接收用户上传的服务器端程序URL,默认留空为禁用上传功能,具体使用方法请参考demo8演示文件 注:可使用内置变量:{editorRoot},代表当前编辑器的根路径,例:{editorRoot}upload.php upImgExt:图片上传前限制本地文件扩展名 参数值:图片上传前限制的文件扩展名列表,默认为:jpg,jpeg,gif,png,建议与服务端扩展名检查列表一致 upFlashUrl:动画文件上传接收URL 参数值:接收用户上传的服务器端程序URL,默认留空为禁用上传功能,具体使用方法请参考demo8演示文件 注:可使用内置变量:{editorRoot},代表当前编辑器的根路径,例:{editorRoot}upload.php upFlashExt:动画上传前限制本地文件扩展名 参数值:动画上传前限制的文件扩展名列表,默认为:swf,建议与服务端扩展名检查列表一致 upMediaUrl:视频文件上传接收URL 参数值:接收用户上传的服务器端程序URL,默认留空为禁用上传功能,具体使用方法请参考demo8演示文件 注:可使用内置变量:{editorRoot},代表当前编辑器的根路径,例:{editorRoot}upload.php upMediaExt:视频上传前限制本地文件扩展名 参数值:视频上传前限制的文件扩展名列表,默认为:avi,建议与服务端扩展名检查列表一致 onUpload:文件上传成功回调函数 参数值:成功后需要执行的函数 说明:这个函数执行时返回的值为上传程序返回的msg变量,可能为字符串或者数组,若为字符串则直接代表url,若是数组,则必需包含一个url的变量,其它可由可开发者自定义 备注:1.0.0 beta2新添加 上传接口使用注意事项: demos目录中的upload.php仅为演示代码,若您使用的是其它的服务器脚本语言,请自行对初始化参数中的upLinkUrl、upImgUrl、upFlashUrl和upMediaUrl进行修改,并开发相应服务器上传接收程序。 若您希望在自己的项目中实际使用,请自行修改代码或者重新开发,开发过程中请注意上传文件的格式及大小限制,注意服务器安全问题。 上传接收程序开发规范: 1,上传文件域名字为:filedata 2,返回结构必需为json,并且结构如下:{"err":"","msg":"200906030521128703.gif"} 若上传出现错误,请将错误内容保存在err变量中;若上传成功,请将服务器上的绝对或者相对地址保存在msg变量中。 编辑器若发现返回的err变量不为空,则弹出窗口显示返回的错误内容。 上传管理方案建议: 1,在编辑器初始化时在upload.php后面跟上一个服务器生成的绝对唯一的跟踪值,例如:upload.php?infoid=121312121 2,在服务器接收程序中以这个跟踪值保存到数据库中,同时也可以限制单个跟踪值下总上传文件数或者总文件大小,否则就是一个可以上传无限个文件的漏洞了 3,最终当前表单提交时,再根据编辑器提交的HTML内容和数据库中上传内容进行比较,删除所有没有使用的上传文件 4,定期由服务器脚本删除上传数据库中没提交的文件记录,这样就能防止别人将您的网站作为免费相册空间了 plugins:自定义按钮之插件扩展 插件对象的属性解释: c:样式表名称 t:插件名字(鼠标在按钮上方时显示) s:快捷方式,例:"ctrl+enter" h:是否鼠标悬停直接执行,1:直接执行(省略当前值代表不直接执行) e:按钮点击后需要执行的代码 特别说明: 如果您希望样式表存储在系统自带的模板目录ui.css中,请将插件对象的样式名留空,则会自动按照插件名来调用相应的样式,例如:xhEdtBtnCut、xhEdtBtnCopy,其中的Cut和Copy是插件名 具体调用方法请参考演示文件夹中的demo9 API接口说明API接口示例代码: var editor=$('#elm1').xheditor({tools:'full',skin:'default',internalScript:false,internalStyle:false,width:300,height:200,loadCSS:'http://pirate9.com/test.css',fullscreen:true,beforeSetSource:ubb2html,beforeGetSource:html2ubb,focus:focusAction,blur:blurAction}); editor.focus(); editor.setSource('str') sHtml=editor.getSource() editor.appendHTML('<p>aaa</p>') editor.pasteHTML('<p>aaa</p>') editor.pasteText('str') sHtml=editor.formatXHTML('<b>aaa</b>') editor.toggleSource() editor.togglePreview() editor.toggleFullscreen() editor.toggleReadonly() alert(editor.settings.upImgExt); editor.settings.upImgExt='txt,doc';focus:使编辑器获得焦点 无参数setSource:设置编辑器源代码 参数1:要设置的源代码内容,例:'<p>aaa</p>'getSource:返回编辑器格式后的源代码 无参数appendHTML:粘贴HTML内容到编辑器结尾处 参数1:要粘贴的HTML代码,例:'<p>uuu</p>' 注:0.9.5版添加getSelect:返回当前选中的内容 参数1:返回格式,可选'text'返回文本格式,其它所有值都返回HTML格式pasteHTML:粘贴HTML内容到编辑器当前光标处 参数1:要粘贴的HTML代码,例:'<p>uuu</p>' 参数2:是否覆盖粘贴,留空(覆盖粘贴)、true(粘贴在光标选择区域之前)、false(粘贴在光标选择区域之后)pasteText:粘贴文本到编辑器当前光标处 参数1:要粘贴的文本,例:'这里的内容完全原样显示<strong>aaa</strong>' 参数2:是否覆盖粘贴,留空(覆盖粘贴)、true(粘贴在光标选择区域之前)、false(粘贴在光标选择区域之后)formatXHTML:格式化XHTML代码 参数1:需要格式化的HTML代码,例:'<b>aaa</b>',返回'<strong>aaa</strong>' 参数2:是否代码缩进换行,true(执行缩进格式化),false(不执行缩进格式化),默认为falsetoggleSource:在源代码模式和编辑模式之间切换 参数1:空(切换),true(显示源代码模式),false(显示编辑模式)togglePreview:在预览模式和编辑模式之间切换 参数1:空(切换),true(显示预览模式),false(显示编辑模式)toggleFullscreen:在全屏模式和标准大小之间切换 参数1:空(切换),true(显示全屏模式),false(显示标准模式)toggleReadonly:在只读模式和可编辑模式之间切换 参数1:空(切换),true(切换为只读模式),false(切换为可编辑模式)toggleShowBlocktag:切换块标签显示状态 参数1:空(切换),true(切换为显示块标签),false(切换为不显示块标签)addShortcuts:添加快捷键 参数1:快捷键值,例:'ctrl+enter' 参数2:用户按下快捷键后需要响应的程序代码,例:function(){$('#frmTest').submit();} 说明:允许为某个相同快捷键值重复添加多个响应代码 备注:1.0.0 beta2新添加exec:立即执行按钮及插件 参数1:工具按钮名称(不区分大小写),例:Link、img 说明:此函数可以在插件内部或者外部Javascript代码中进行调用showModal:显示模式窗口 参数1:模式窗口的标题title 参数2:模式窗口的内容content 参数3:模式窗口的宽度w 参数4:模式窗口的高度h 参数5:模式窗口关闭时的回调函数onRemoveshowIframeModal:显示iframe式的模式窗口 参数1:模式窗口的标题 参数2:iframe的地址ifmurl,可使用内置变量:{editorRoot},代表当前编辑器的根路径,例:{editorRoot}xheditor_plugins/test.html 参数3:提供给目标iframe页面回调用的回调函数,可以在iframe页面中以这样的形式调用:callback('1.gif'); 参数4:模式窗口的宽度w 参数5:模式窗口的高度h 参数6:模式窗口关闭时的回调函数onRemovesettings:获取或者修改编辑器内部参数 internalScript:是否清除内部代码 inlineScript:是否清除内联代码 internalStyle:是否清除内部样式 inlineStyle:是否清除内联样式 forcePtag:强制使用P标签 upLinkUrl:超链接上传接口地址 upLinkExt:超链接本地上传扩展限制 upImgUrl:图片上传接口地址 upImgExt:图片本地上传扩展限制 upFlashUrl:动画上传接口地址 upFlashExt:动画本地上传扩展限制 upMediaUrl:视频上传接口地址 upMediaExt:视频本地上传扩展限制 beforeSetSource:在设置源代码到编辑器前调用此函数 beforeGetSource:从编辑器返回源代码前调用此函数 focus:编辑器获得焦点时回调此函数 blur:编辑器失去焦点时回调此函数 注:修改有效变量仅限以上,其它的变量都仅在编辑器初始化时使用编辑器初始化回调函数列表: beforeSetSource和beforeGetSource是编辑器回调函数,分别在设置源代码和取回源代码之前调用,详细使用方法可参考UBB代码演示页面 focus和blur是编辑器聚焦和失去焦点时的回调函数Demo(演示): 默认模式:http://xheditor.com/demos/demo01.html 自定义按钮:http://xheditor.com/demos/demo02.html 皮肤选择:http://xheditor.com/demos/demo03.html 其它选项:http://xheditor.com/demos/demo04.html Javascript API交互:http://xheditor.com/demos/demo05.html 非utf-8编码网页调用:http://xheditor.com/demos/demo06.html UBB可视化编辑:http://xheditor.com/demos/demo07.html Ajax图片上传:http://xheditor.com/demos/demo08.html 插件扩展:http://xheditor.com/demos/demo09.html iframe调用文件上传:http://xheditor.com/demos/demo10.html 异步加载:http://xheditor.com/demos/demo11.html