为了同时支持firefox和ie，我们常常用document.getelementbyid(id)方法来取得html对象。但是getelementbyid方法只能取得单个对象，而对于checkbox数组则无能为力。
1. 下载xheditor最新版本。下载地址：
2. 解压zip文件，将其中的xheditor.js以及xheditor_emot和xheditor_skin两个文件夹上传到网站相应目录
3. 在相应html文件的head标签结束之前添加
<script type="text/javascript" src="http://static.xxx.com/js/xheditor.js"></script>
4. 调用方法有两种：
方法1：在textarea上添加属性： class="xheditor"(设置为xheditor-mini和xheditor-simple，分别默认加载迷你和简单工具栏)方法2：在您的页面初始js代码里加上： $('#elm1').xheditor(true);例如：$({$('#elm1').xheditor(true);});相应的隐藏编辑的代码为：$('#elm1').xheditor(false);
初始化参数说明
初始化示例代码：
$('#elm1').xheditor(true,{tools:'full',skin:'default',showblocktag:true,readonly:false,internalscript:false,internalstyle:false,width:300,height:200,loadcss:'http://jb51.net/test.css',fullscreen:true,sourcemode:true,forceptag:true,upimgurl:"upload.php",upimgext:"jpg,jpeg,gif,png",keepvalue:true,plugins:{}});
tools：自定义工具按钮
参数值：full(完全),simple(简单),mini(迷你)或者自定义字符串，例如：'gstart,cut,copy,paste,pastetext,gend,separator,gstart,source,preview,fullscreen,about,gend'完整按钮表：gstart：组开始gend：组结束separator：分隔符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 银色)
showblocktag:显示段落标签
参数值：true(显示段落标签),false(不显示)
internalscript：内部js代码保留状态
参数值：true(保留内部js代码),false(清理内部js代码)
inlinescript：内联js代码保留状态
参数值：true(保留内联js代码),false(清理内联js代码)
internalstyle：内部样式保留状态
参数值：true(保留内部样式),false(清理内部样式)
inlinestyle：内联样式保留状态
参数值：true(保留内联样式),false(清理内联样式)
width：编辑器宽度
参数值：不带单位的数字，例：300
height：编辑器高度
参数值：不带单位的数字，例：100
loadcss：加载样式
参数值：样式表网址，例如：'//www.jb51.net/css/global.css'
fullscreen：默认全屏显示
参数值：true(全屏大小),false(标准大小)
readonly：默认只读模式
参数值：true(只读模式),false(可编辑模式)
sourcemode:默认源代码模式
参数值：true(源代码模式),false(编辑模式)
forceptag:强制p标签
参数值：true(强制使用p标签),false(不强制)
keepvalue:自动保存src和href属性值
参数值：true(保存),false(不保存)说明：在ie等浏览器下使用编辑器，插入的图片和链接地址都会被浏览器自动转为绝对地址，比如输入：a.gif，自动会转为：http://test.com/a.gif
modalwidth:showmodal弹出窗口的默认宽度
参数值：数值，默认为350说明：弹出窗口的默认宽度
modalheight:showmodal弹出窗口的默认高度
参数值：数值，默认为220说明：弹出窗口的默认高度
modaltitle：showmodal弹出窗口是否显示上方的标题栏
参数值：true(显示),false(不显示)说明：控制弹出窗口是否显示上方的标题栏，默认为显示，若需要显示一个更定制个性化的iframe窗口，可通过此参数隐藏上方的标题栏
uplinkurl:超链接文件上传接收url
参数值：接收用户上传的服务器端程序url，默认留空为禁用超链接上传功能，具体使用方法请参考demo8演示文件
uplinkext:超链接上传前限制本地文件扩展名
参数值：超链接上传前限制的文件扩展名列表，默认为：zip,rar,txt，建议与服务端扩展名检查列表一致
upimgurl:图片文件上传接收url
参数值：接收用户上传的服务器端程序url，默认留空为禁用上传功能，具体使用方法请参考demo8演示文件
upimgext:图片上传前限制本地文件扩展名
参数值：图片上传前限制的文件扩展名列表，默认为：jpg,jpeg,gif,png，建议与服务端扩展名检查列表一致
upflashurl:动画文件上传接收url
参数值：接收用户上传的服务器端程序url，默认留空为禁用上传功能，具体使用方法请参考demo8演示文件
upflashext:动画上传前限制本地文件扩展名
参数值：动画上传前限制的文件扩展名列表，默认为：swf，建议与服务端扩展名检查列表一致
upmediaurl:视频文件上传接收url
参数值：接收用户上传的服务器端程序url，默认留空为禁用上传功能，具体使用方法请参考demo8演示文件
upmediaext:视频上传前限制本地文件扩展名
参数值：视频上传前限制的文件扩展名列表，默认为：avi，建议与服务端扩展名检查列表一致
上传接口使用注意事项：
demos目录中的upload.php仅为演示代码，若您使用的是其它的服务器脚本语言，请自行对初始化参数中的uplinkurl、upimgurl、upflashurl和upmediaurl进行修改，并开发相应服务器上传接收程序。若您希望在自己的项目中实际使用，请自行修改代码或者重新开发，开发过程中请注意上传文件的格式及大小限制，注意服务器安全问题。 上传接收程序开发规范：1,上传文件域名字为：upload2,返回结构必需为json，并且结构如下：{"err":"","msg":"200906030521128703.gif"}若上传出现错误，请将错误内容保存在err变量中；若上传成功，请将服务器上的绝对或者相对地址保存在msg变量中。编辑器若发现返回的err变量不为空，则弹出窗口显示返回的错误内容。上传管理方案建议：1,在编辑器初始化时在upload.php后面跟上一个服务器生成的绝对唯一的跟踪值，例如：upload.php?infoid=1213121212,在服务器接收程序中以这个跟踪值保存到数据库中，同时也可以限制单个跟踪值下总上传文件数或者总文件大小，否则就是一个可以上传无限个文件的漏洞了3,最终当前表单提交时，再根据编辑器提交的html内容和数据库中上传内容进行比较，删除所有没有使用的上传文件4,定期由服务器脚本删除上传数据库中没提交的文件记录，这样就能防止别人将您的网站作为免费相册空间了
plugins:自定义按钮之插件扩展
插件对象的属性解释：c：样式表名称 t：插件名字(鼠标在按钮上方时显示) s：快捷方式 e：按钮点击后需要执行的代码特别说明：如果您希望样式表存储在系统自带的模板目录ui.css中，请将插件对象的样式名留空，则会自动按照插件名来调用相应的样式，例如：xhedtbtncut、xhedtbtncopy，其中的cut和copy是插件名具体调用方法请参考演示文件夹中的demo9
js接口说明
js接口示例代码：
var editor=$('#elm1').xheditor(true,{tools:'full',skin:'default',internalscript:false,internalstyle:false,width:300,height:200,loadcss:'http://jb51.net/test.css',fullscreen:true,beforesetsource:ubb2html,beforegetsource:html2ubb,focus:focusaction,blur:bluraction})[0].xheditor;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版添加
pastehtml：粘贴html内容到编辑器当前光标处
参数1：要粘贴的html代码，例：'<p>uuu</p>'
pastetext：粘贴文本到编辑器当前光标处
参数1：要粘贴的文本，例：'这里的内容完全原样显示<strong>aaa</strong>'
formatxhtml：格式化xhtml代码
参数1：需要格式化的html代码，例：'<b>aaa</b>'，返回'<strong>aaa</strong>'
togglesource：在源代码模式和编辑模式之间切换
参数1：空(切换),true(显示源代码模式),false(显示编辑模式)
togglepreview：在预览模式和编辑模式之间切换
参数1：空(切换),true(显示预览模式),false(显示编辑模式)
togglefullscreen：在全屏模式和标准大小之间切换
参数1：空(切换),true(显示全屏模式),false(显示标准模式)
togglereadonly：在只读模式和可编辑模式之间切换
参数1：空(切换),true(切换为只读模式),false(切换为可编辑模式)
settings：获取或者修改编辑器内部参数
internalscript:是否清除内部代码inlinescript:是否清除内联代码internalstyle:是否清除内部样式inlinestyle:是否清除内联样式forceptag:强制使用p标签keepvalue:保持属性值uplinkurl:超链接上传接口地址uplinkext:超链接本地上传扩展限制upimgurl:图片上传接口地址upimgext:图片本地上传扩展限制upflashurl:动画上传接口地址upflashext:动画本地上传扩展限制upmediaurl:视频上传接口地址upmediaext:视频本地上传扩展限制beforesetsource:在设置源代码到编辑器前调用此函数beforegetsource:从编辑器返回源代码前调用此函数focus:编辑器获得焦点时回调此函数blur:编辑器失去焦点时回调此函数注：修改有效变量仅限以上，其它的变量都仅在编辑器初始化时使用
编辑器初始化回调函数列表：
beforesetsource和beforegetsource是编辑器回调函数，分别在设置源代码和取回源代码之前调用，详细使用方法可参考ubb代码演示页面focus和blur是编辑器聚焦和失去焦点时的回调函数
如对本文有疑问，
点击进行留言回复！！
我要评论
网友评论