xheditor使用方法记录

1 下载地址

www.xheditor.com/download

2 解压后

将 xheditor_emot,lang,plugin,skin 四个包拷贝到项目中如下图：

WebRoot/web/resources/js/xheditor/ 下(自己的目录有点深

)

这里有个 xheditor-1.2.2.min.js 也需要cp进去

3 初始化

<script type="text/javascript" src="<c:url value="/resources/js/ajaxfileupload.js" /> "></script>
<script type="text/javascript" src="<c:url value="/resources/js/xheditor/xheditor-1.2.2.min.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/js/xheditor/xheditor_lang/zh-cn.js" />"></script>

再需要添加富文本编辑框的页面上引入JS 第一个是用来上传图片的JS 这里使用了ajaxfileupload来实现

CSS初始化

#editorContent{height: 240px;width: 660px; white-space:nowrap;}.editorImgCode{ background: url(../resources/images/upload_img.png) no-repeat }#editorPicview{ overflow:hidden }#editorPicview img{ width:100px }

随后需要将文本框添加在页面哪里

div class="field-control file-select"><textarea name="adcontent" id="editorContent" style="width:622px;height:300px">${news.content}</textarea></div>

初始化xheditor的js

 function pageInit(){var allPlugin={photos:{c:'editorImgCode',t:'插入图片',h:0,e:function(){var _this=this;var html='<div class="selectPic"><input type="file" id="<span style="color:#ff0000;">upload_file</span>" name="file"/><div id="editorPicview"></div><input id="innerImgSave" type="button" value="确定"/>';APP.alert(1,'插入图片',html,300);$("body").on("click","#innerImgSave",function(event){var img=$('#editorPicview').html();_this.pasteHTML(img);APP.close();})}}};editor=$('#editorContent').xheditor({plugins:allPlugin,skin:'nostyle',tools:'Cut,Copy,Paste,Fontface,FontSize,Bold,Italic,Underline,Align,photos'});}

事件change jquery 使用了 ajaxFileUpload 来进行文件的上传

$("body").on("change","#upload_file",function(event){    $.ajaxFileUpload ({url:"${ctx}/news/uploadpic", //你处理上传文件的服务端data:{},secureuri:false,fileElementId:'<span style="color:#ff0000;">upload_file</span>', //与页面处理代码中file相对应的ID值dataType: 'text',success:function(data) {var start = data.indexOf(">");  if(start != -1) {  var end = data.indexOf("<", start + 1);  if(end != -1) {  data = data.substring(start + 1, end);  }  }switch(data){                    case "-1":window.parent.Commonremind("提示", "图片上传失败！");break;case "-2":window.parent.Commonremind("提示", "上传文件格式不对，只支持jpg或者jpeg文件上传！");break;case "-3":window.parent.Commonremind("提示", "亲,您上传图片不能大于5M哦！");break;default:var img="<img src='${appProps['news.picture.domain.url']}"+data+"'/>";$('#editorPicview').append(img);}                }})});

这里URL url:"${ctx}/news/uploadpic" 是使用了java开发的 spring映射的地址，本质是java上传的代码这里就不贴出来了。吐舌头

效果大致是这样工具按钮可以更具情况自己选填大致参数再文后有列举出来

4 参数列表

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

background：编辑器背景

参数值：字符串，例：url(test.gif) no-repeat，设置编辑器背景，格式同CSS同名参数一致。建议直接设置textarea的css背景备注：v1.1.1新添加

loadCSS：加载样式

参数值：URL地址、URL数组以及直接内部样式，例如：'1.css'、['1.css','2.css']、'<style>body{font-size:20px;}</style>'
备注：1.0.0 RC3新添加加载内部样式功能

fullscreen：默认全屏显示

参数值：true(全屏大小),false(标准大小)

sourceMode：默认源代码模式

参数值：true(源代码模式),false(编辑模式)

forcePtag：强制P标签

参数值：true(强制使用P标签),false(不强制),默认true

cleanPaste：是否清理粘贴的HTML代码

参数：0(不做任何清理),1(简单清理Word),2(深入清理Word),3(强制转文本),默认为2深入清理Word

说明：若网站应用需要保留更多的Word样式效果，请设置此值为1，不过产生的HTML代码体积会大大增大

备注：1.1.4版本中新变更，原为wordDeepClean和forcePasteText两个参数

disableContextmenu：禁用编辑区的右键菜单

参数值：true(禁用右键菜单),false(不禁用),默认false 备注：v1.1.0新添加

editorRoot：编辑器JS文件所在的根路径

参数值：编辑器所在的根路径，用在某些特殊情况下定位编辑器的根路径，默认为空，读取默认的编辑器根路径备注：v1.1.0新添加

shortcuts：自定义键盘快捷方式

参数：快捷键对应事件代码的对象数组

示例：{'ctrl+enter':function(){$('#frmTest').submit();}}

备注：1.0.0 beta2新添加

urlBase：相对URL地址的基地址

参数：字符串的URL地址，用以解决前后台不在同一路径的资源定位问题备注：1.1.0新添加

urlType：本地URL地址强制转换方式选择

参数：abs(绝对路径),root(根路径),rel(相对路径) 备注：1.0.0 beta2新添加,v1.1.0版中名字由localUrl变更为urlType

emotPath：修改表情图片的URL根路径

参数：字符串的URL地址，默认为空，指向编辑器路径下的默认表情备注：1.1.0新添加

emotMark：是否在表情img标签上标注emot属性

参数：true(标注),false(不标注),默认为false

说明：若使用了ubb插件，请设置此属性为true

备注：1.0.0 beta2新添加

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为空

备注：1.0.0 beta2新添加

hoverExecDelay：悬停自动执行延迟的时间

参数：数值(单位毫秒)，默认为100，设置为-1关闭此功能备注：1.0.0 rc2新添加

defLinkText：超链接的默认文字

参数值：字符串(默认值：“点击打开链接”) 说明：只在不选择任何内容的情况下才会用到这个参数值

modalWidth：showModal弹出窗口的默认宽度

参数值：数值，默认为350 说明：弹出窗口的默认宽度

modalHeight：showModal弹出窗口的默认高度

参数值：数值，默认为220 说明：弹出窗口的默认高度

modalTitle：showModal弹出窗口是否显示上方的标题栏

参数值：true(显示),false(不显示）

说明：控制弹出窗口是否显示上方的标题栏，默认为显示，若需要显示一个更定制个性化的iframe窗口，可通过此参数隐藏上方的标题栏

upBtnText：上传按钮的文字

参数值：任意字符串,默认值：“上传” 备注：1.0.0 beta2新添加

html5Upload：是否开启HTML5上传支持

参数值：true(允许),false(不允许),默认为true允许

说明：本功能需要浏览器支持HTML5上传

备注：1.0.0 Final新添加

upMultiple：允许一次上传多少个文件

参数值：大于0的数值,默认：99,设置为1关闭多文件上传

说明：本功能需要浏览器支持HTML5上传

备注：1.0.0 RC3新添加

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的变量，其它可由可开发者自定义

备注：1.0.0 beta2新添加

plugins：自定义按钮之插件扩展

插件对象的属性解释：

c：样式表名称
t：插件名字(鼠标在按钮上方时显示)
s：快捷方式，例："ctrl+enter"
h：是否鼠标悬停直接执行,1:直接执行(省略当前值代表不直接执行)
e：按钮点击后需要执行的代码(省略执行代码，则把当前的插件名作为参数，调用浏览器的execCommand函数)

特别说明：

如果您希望样式表存储在系统自带的模板目录ui.css中，请将插件对象的样式名留空，则会自动按照插件名来调用相应的样式，例如：xhEdtBtnCut、xhEdtBtnCopy，其中的Cut和Copy是插件名

具体调用方法请参考演示文件夹中的demo9

submitID：触发表单提交的按钮ID值

参数值：表单提交按钮的ID值，默认在form表单上绑定submit以同步结果

说明：通过本参数，在非标准submit提交环境下，比如AJAX提交，可以由用户点击提交按钮以触发编辑器最新值的同步

备注：v1.1.7新添加

onPaste：剪切板粘贴回调函数

参数值：用户粘贴后需要执行的函数

说明：此函数用来过滤用户粘贴的代码，若返回false禁用粘贴

备注：v1.1.8新添加

localUrlTest：非本站域名测试正则表达式

参数值：正则表达式

说明：本参数用来测试某些组件中测试URL是否属于本站域名

备注：v1.1.8新添加

remoteImgSaveUrl：远程图片抓取接收程序URL

参数值：字符串(若不设置不开启此功能)

说明：当localUrlTest测试为false时，会将图片URL发往当前参数指定的服务器端上传接收程序，抓取成功后将本地URL返回并替换

备注：v1.1.8新添加

readTip：无障碍读屏提示

参数值：字符串(默认为空)

说明：无障碍读屏软件提示文字，可用来为残疾人士提示快捷键等信息

备注：v1.1.9新添加

5 补充

如果你不是java网站，xheditor也提供了 upload.aspx 及 upload.php等方法这些都在压缩包demo目录下有提供，也有很多demo例子提供参考