XHEditor编辑器使用文档

为了同时支持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://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:加载样式

参数值:样式表网址,例如:'http://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是编辑器聚焦和失去焦点时的回调函数

(0)

相关推荐

  • XHEditor编辑器使用文档

    为了同时支持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标签结

  • Qt实现一个简单的word文档编辑器

    目录 1.先看效果图 2.需要用到的类 2.1字体选择下拉框:QFontComboBox. 2.2颜色对话框:QColorDialog 2.3QTextCharFormat 3.源码 1.先看效果图 可以设置文字的属性.文字颜色.字体类型.以下示例仅供参考,有的地方还是不完善. 2.需要用到的类 2.1字体选择下拉框:QFontComboBox. QFontComboBox是一个让用户选择字体的组合框.组合框中填充了按字母顺序排列的字体族名称列表. 常用方法: 获取当前的字体 QFont cur

  • xhEditor编辑器入门基础

    1.1. 在线可视化HTML编辑器概述 在Web程序应用中,最常见的一种行为是信息和言论的发布和交流.而在信息发布的同时,往往会有对信息发布的格式.类型和功能上的需求,比如:加粗.下划线等等,以使文字信息能够更形象更美观的传达给阅读者,同时也提高信息发布的工作效率.在这个需求的背景下,HTML在线编辑器就应运而生了. 顾名思义,在线HTML编辑器就是在线编辑HTML代码的工具,它经常被应用于留言板留言.论坛发贴.Blog编写日志或等需要用户输入HTML的地方,是Web应用的常用模块之一.在线HT

  • C#实现EXCEL数据到TXT文档的转换

    C#数据转换前excel中的数据格式如下:设备名称 规格型号 设备编号  使用部门 固定资产编号电脑1 IBM5660 10001 管理部 100010001电脑2 IBM5661 10002 研发部 100010002电脑3 IBM5662 10003 管理部 100010003C#数据转换到TXT文档的格式:"检测设备资产标签","设备名称","电脑1","规格型号","IBM5660","设

  • php在程序中将网页生成word文档并提供下载的代码

    在这篇文章中主要解决两个问题: 1:在php中如何把html中的内容生成到word文档中 2:php把html中的内容生成到word文档中时,不居中显示问题,即会默认按照web视图进行显示. 3:php把html中的内容生成到word文档中时,相关样式不兼容问题 正文: 复制代码 代码如下: echo '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microso

  • PHP生成word文档的三种实现方式

    最近工作遇到关于生成word的问题 现在总结一下生成word的三种方法. btw:好像只要是标题带PHP的貌似点击量都不是很高(哥哥我标题还是带上PHP了),不知道为什么,估计博客园上net技术大牛比较多吧,如果把java,.net,php比作程序员的女友,那么java是Oracle门下的大家闺秀,.net微软旗下的名门望族,PHP则是草根门下的山村野姑,这让我等PHP草民闷骚男情何以堪情何以堪..牢骚发完了,正式写吧 PHP生成word原理 利用windows下面的 com组件 利用PHP将内

  • IIS7 多域名绑定同一物理目录不同默认文档的实现方法

    因为在一个物理目录下只有一个web.config,并且IIS7把默认文档设置写在这里,导致所有域名的默认文档设置共享. 1.进入%windir%\system32\inetsrv\config目录(%windir%即windows的安装目录,比如c:\windows) 2.找到applicationHost.config文件,用文本编辑器打开,如果打不开就复制出来修改后再替换原来的文件(建议备份原文件,以防不测,这是工作习惯.) 3.在最后configuration节中加入如下语句 4.将web

  • Java实现用Freemarker完美导出word文档(带图片)

    前言 最近在项目中,因客户要求,将页面内容(如合同协议)导出成word,在网上翻了好多,感觉太乱了,不过最后还是较好解决了这个问题. 准备材料 1.word原件 2.编辑器(推荐Firstobject free XML editor) 实现步骤 1.用Microsoft Office Word打开word原件: 2.把需要动态修改的内容替换成***,如果有图片,尽量选择较小的图片几十K左右,并调整好位置: 3.另存为,选择保存类型Word 2003 XML 文档(*.xml)[这里说一下为什么用

  • 值得收藏的27个Linux文档编辑命令

    Linux col命令 Linux col命令用于过滤控制字符. 在许多UNIX说明文件里,都有RLF控制字符.当我们运用shell特殊字符">"和">>",把说明文件的内容输出成纯文本文件时,控制字符会变成乱码,col指令则能有效滤除这些控制字符. Linux colrm命令 Linux colrm命令用于滤掉指定的行. colrm指令从标准输入设备读取书记,转而输出到标准输出设备.如果不加任何参数,则该指令不会过滤任何一行. Linux com

  • win2008 服务器安全设置部署文档(推荐)

    年前一直在赶项目,到最后几日才拿到新服务器新添加的硬盘,重做阵列配置生产环境,还要编写部署文档做好安全策略,交给测试部门与相关部门做上线前最后测试,然后将部署文档交给相关部门同事,让他根据部署文档再做一次系统,以保证以后其他同事能自己正常部署服务器,最后终于赶在放假前最后一天匆忙搞定测试后,简单的指导同事按部署文档将服务器重新部署了一次就先跑路回家了,剩下的就留给加班的同事负责将服务器托管到机房了.年后回来上班后按工作计划开始做文档(主要对之前编写的部署文档进行修正和将相关未添加的安全策略添加进

随机推荐