为了同时支持Firefox和IE,我们常常用document.getElementById(id)方法来取得HTML对象。但是getElementById方法只能取得单个对象,而对于CheckBox数组则无能为力。
1. 下载xhEditor最新版本。下载地址:http://xheditor.com/download
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:///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:加载样式
参数值:样式表网址,例如:'https://www./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:///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是编辑器聚焦和失去焦点时的回调函数
相关推荐:
apache2.2 支持.net 3.5的设置方法
Javascript isArray 数组类型检测函数
SQL Substring提取部分字符串
Asp定时执行操作 Asp定时读取数据库(网页定时操作详解)
php 将excel导入mysql
PHP 正则 email语句详解
ASP 调用dll及封装dll实例
IIS SHTML支持设置方法(SSI)
几个javascript操作word的参考代码
javascript 面向对象,实现namespace,class,继承,重载
学习ExtJS 访问容器对象
sqlserver 字符串分拆 语句
mysql正则表达式 LIKE 通配符
判断时间的正则表达式
Mootools 1.2教程 定时器和哈希简介
正则表达式高级技巧及实例详解 笨活儿
php与XML、XSLT、Mysql的结合运用实现代码
支持ie与FireFox的剪切板操作代码
JSP application(return String)用法详例
EXECUTE IMMEDIATE用法小结
实现按关健字模糊查询,并按匹配度排序的SQL语句
Windows IIS配置与Ftp服务搭建
图片友情链接滚动 横向,带控制按钮
Jquery在IE7下无法使用 $.ajax解决方法
html数组字符串拼接的最快方法
Ha0k 0.3 PHP 网页木马修改版
颈椎残废记 站长兄弟请注意保护好自己的身体
Flex 全屏组件 部分全屏的实现代码
比较全面的event对像在IE与FF中的区别 推荐
javascript 限制输入脚本大全
3步搞定纯真IP数据导入到MySQL的方法详解
SQLids.vbs 0.7(最终版,以后改成gui界面的)
不一样的文字闪烁 轮番闪烁
PHP 正则表达式函数库(两套)
C# 获取程序集版本、文件版本
ASP 正则表达式的应用使用说明
SQL 存储过程基础语法之一
asp.net *.ashx类型的文件使用说明
JavaScript实现网页截屏的5种方法小结
JS window.opener返回父页面的应用
COM中获取JavaScript数组大小的代码
刀片服务器五大误区解读
sql 语句中的 NULL值
IE,firefox(火狐)浏览器无提示关闭窗口js实现代码小结
JavaScript 组件之旅(二)编码实现和算法
JSP forward用法分析实例代码分析
javascript 操作cookies及正确使用cookies的属性
JavaScript 炫彩的文字
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
实现JavaScript中继承的三种方式