xhEditor 简单用法
1.下载需要文件包:
http://xheditor.com/
2.解压文件中文件
xheditor-zh-cn.min.js以及xheditor_emot、xheditor_plugins和xheditor_skin三个文件夹到网站相应文件夹中
3.引入相关文件
<script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../xheditor.js"></script>
<script type="text/javascript" src="../xheditor_lang/zh-cn.js"></script>
4.调用方式
示例:直接添加class 属性
<textarea id="elm1" class="xheditor" rows="12" cols="80" style="width: 80%">
</textarea>
示例:使用js初始化对象
$('#elm1').xheditor({tools:'full',skin:'default',showBlocktag:true,internalScript:false,internalStyle:false,width:300,height:200,
loadCSS:'http://xheditor.com/test.css',fullscreen:true,sourceMode:true,forcePtag:true,upImgUrl:"upload.php",
upImgExt:"jpg,jpeg,gif,png"});
5.参数列表
名称 | 功能 | 参数 |
tools | 自定义工具按钮 |
full(完全),mfull(多行完全),simple(简单),mini(迷你) 或者自定义字符串'Cut,Copy,Paste,Pastetext,|,Source,Fullscreen,About' |
skin | 皮肤风格选择 |
default(默认风格),o2007blue(Office 2007 蓝色),o2007silver(Office 2007 银色), vista(Vista),nostyle(NoStyle) |
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 | 加载样式 |
URL地址、URL数组以及直接内部样式,例如:'1.css'、['1.css','2.css']、' ' |
fullscreen | 默认全屏显示 |
true(全屏大小),false(标准大小) |
sourceMode | 默认源代码模式 |
true(源代码模式),false(编辑模式) |
forcePtag | 强制P标签 |
true(强制使用P标签),false(不强制),默认true |
forcePasteText |
强制将粘贴的 内容转换为文本 |
true(强制转文本),false(不转文本),默认false |
disableContextmenu | 禁用编辑区的右键菜单 |
true(禁用右键菜单),false(不禁用),默认false |
editorRoot | 编辑器JS文件所在的根路径 |
编辑器所在的根路径,用在某些特殊情况下定位编辑器的根路径, 默认为空,读取默认的编辑器根路径 |
shortcuts | 自定义键盘快捷方式 |
快捷键对应事件代码的 对象数组{'ctrl+enter':function(){$('#frmTest').submit();}} |
urlBase | 相对URL地址的基地址 |
字符串的URL地址,用以解决前后台不在同一路径的资源定位问题 |
urlType | 本地URL地址强制转换方式选择 |
abs(绝对路径),root(根路径),rel(相对路径) |
emotPath | 修改表情图片的URL根路径 |
字符串的URL地址,默认为空,指向编辑器路径下的默认表情 |
emotMark | 是否在表情img标签上标注emot属性 |
true(标注),false(不标注),默认为false 说明:若使用了ubb插件,请设置此属性为true |
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为空 |
wordDeepClean | Word文档深入清理选项 |
若网站应用需要保留更多的Word样式效果,请设置此值为false, 不过产生的HTML代码体积会大大增大 |
hoverExecDelay | 悬停自动执行延迟的时间 |
数值(单位毫秒),默认为100,设置为-1关闭此功能 |
defLinkText | 超链接的默认文字 |
字符串(默认值:“点击打开链接”) 只在不选择任何内容的情况下才会用到这个参数值 |
modalWidth |
showModal 弹出窗口的默认宽度 |
数值,默认为350 |
modalHeight |
showModal 弹出窗口的默认高度 |
数值,默认为220 |
modalTitle |
showModal弹出窗口 是否显示上方的标题栏 |
true(显示),false(不显示) 控制弹出窗口是否显示上方的标题栏,默认为显示, 若需要显示一个更定制个性化的iframe窗口,可通过此参数隐藏上方的标题栏 |
upBtnText | 上传按钮的文字 |
任意字符串,默认值:“上传” |
html5Upload |
是否开启 HTML5上传支持 |
true(允许),false(不允许),默认为true允许 |
html5Upload |
是否开启 HTML5上传支持 |
true(允许),false(不允许),默认为true允许 本功能需要浏览器支持HTML5上传 |
upMultiple |
允许一次 上传多少个文件 |
大于0的数值,默认:99,设置为1关闭多文件上传 本功能需要浏览器支持HTML5上传 |
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的变量,其它可由可开发者自定义 |
plugins |
自定义 按钮之插件扩展 |
c:样式表名称 t:插件名字(鼠标在按钮上方时显示) s:快捷方式, 例:"ctrl+enter" h:是否鼠标悬停直接执行, 1:直接执行(省略当前值代表不直接执行) e:按钮点击后需要执行的代码 (省略执行代码,则把当前的插件名作为参数,调用浏览器的execCommand函数) |