XHEditor编辑器使用文档
网络编程 2021-07-05 12:51www.168986.cn编程入门
XHEditor编辑器的使用方法,需要的朋友可以参考下。
为了支持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./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./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图片FlashFlash动画MediaWindows 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://.jb51./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./a.gif
modalWidth:showModal弹出窗口的默认宽度
参数值数值,默认为350说明弹出窗口的默认宽度
modalHeight:showModal弹出窗口的默认高度
参数值数值,默认为220说明弹出窗口的默认高度
modalTitleshowModal弹出窗口是否显示上方的标题栏
参数值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./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是编辑器聚焦和失去焦点时的回调函数
1. 下载xhEditor最新版本。下载地址
2. 解压zip文件,将其中的xheditor.js以及xheditor_emot和xheditor_skin两个文件夹上传到网站相应目录
3. 在相应html文件的head标签结束之前添加
<script type="text/javascript" src="http://static.xxx./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./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图片FlashFlash动画MediaWindows 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://.jb51./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./a.gif
modalWidth:showModal弹出窗口的默认宽度
参数值数值,默认为350说明弹出窗口的默认宽度
modalHeight:showModal弹出窗口的默认高度
参数值数值,默认为220说明弹出窗口的默认高度
modalTitleshowModal弹出窗口是否显示上方的标题栏
参数值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./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是编辑器聚焦和失去焦点时的回调函数
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程