xhEditor用法

1、下载xhEditor 最新版本

下载地址：http://xheditor.com/download

2、解压压缩文件【demo文件夹中可以查看各种形式的配置实例】，将其中的jquery- 1.4.2.min.js、xheditor-zh-cn.min.js【这里暂时使用中文版】以及xheditor_emot、xheditor_plugins和xheditor_skin三个文件夹拷贝到项目的相应目录。

3、在相应html 文件的head 标签结束之前添加：
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="xheditor-zh-cn.min.js" type="text/javascript"></script>

4、调用方法有两种：
方法1 ：在textarea 上添加属性：class="xheditor {skin:'default'}" ，前面主参数也可以是xheditor-mini 和xheditor-simple ，分别加载迷你和简单工具栏，后面详细参数可以省略。
【推荐使用】方法2 ： 在您的页面初始JS 代码里加上：$(“#helpInfo”).xheditor();

5、初始化参数列表

初始化参数示例代码：

<span style="color:#000000"><span style="color:#000000">$</span><span style="color:#666600">(</span><span style="color:#008800">'#elm1'</span><span style="color:#666600">).</span><span style="color:#000000">xheditor</span><span style="color:#666600">({</span><span style="color:#000000">tools</span><span style="color:#666600">:</span><span style="color:#008800">'full'</span><span style="color:#666600">,</span><span style="color:#000000">skin</span><span style="color:#666600">:</span><span style="color:#008800">'default'</span><span style="color:#666600">,</span><span style="color:#000000">showBlocktag</span><span style="color:#666600">:</span><span style="color:#000088">true</span><span style="color:#666600">,</span><span style="color:#000000">internalScript</span><span style="color:#666600">:</span><span style="color:#000088">false</span><span style="color:#666600">,</span><span style="color:#000000">internalStyle</span><span style="color:#666600">:</span><span style="color:#000088">false</span><span style="color:#666600">,</span><span style="color:#000000">width</span><span style="color:#666600">:</span><span style="color:#006666">300</span><span style="color:#666600">,</span><span style="color:#000000">height</span><span style="color:#666600">:</span><span style="color:#006666">200</span><span style="color:#666600">,</span><span style="color:#000000">loadCSS</span><span style="color:#666600">:</span><span style="color:#008800">'http://xheditor.com/test.css'</span><span style="color:#666600">,</span><span style="color:#000000">fullscreen</span><span style="color:#666600">:</span><span style="color:#000088">true</span><span style="color:#666600">,</span><span style="color:#000000">sourceMode</span><span style="color:#666600">:</span><span style="color:#000088">true</span><span style="color:#666600">,</span><span style="color:#000000">forcePtag</span><span style="color:#666600">:</span><span style="color:#000088">true</span><span style="color:#666600">,</span><span style="color:#000000">upImgUrl</span><span style="color:#666600">:</span><span style="color:#008800">"upload.php"</span><span style="color:#666600">,</span><span style="color:#000000">upImgExt</span><span style="color:#666600">:</span><span style="color:#008800">"jpg,jpeg,gif,png"</span><span style="color:#666600">});</span></span>

初始化参数列表：

tools：自定义工具按钮

参数值：full(完全),mfull(多行完全),simple(简单),mini(迷你)
或者自定义字符串，例如：'Cut,Copy,Paste,Pastetext,|,Source,Fullscreen,About'完整按钮表：
|：分隔符
/：强制换行
Cut：剪切
Copy：复制
Paste：粘贴
Pastetext：文本粘贴
Blocktag：段落标签
Fontface：字体
FontSize：字体大小
Bold：粗体
Italic：斜体
Underline：下划线
Strikethrough：中划线
FontColor：字体颜色
BackColor：字体背景色
SelectAll：全选
Removeformat：删除文字格式
Align：对齐
List：列表
Outdent：减少缩进
Indent：增加缩进
Link：超链接
Unlink：删除链接
Anchor：锚点
Img：图片
Flash：Flash动画
Media：Windowsmedia player视频
Hr：插入水平线
Emot：表情
Table：表格
Source：切换源代码模式
Preview：预览当前代码
Print：打印
Fullscreen：切换全屏模式
About：关于xhEditorfull(完全),mfull(多行完全),simple(简单),mini(迷你)
或者自定义字符串，例如：'Cut,Copy,Paste,Pastetext,|,Source,Fullscreen,About'完整按钮表：
|：分隔符
/：强制换行
Cut：剪切
Copy：复制
Paste：粘贴
Pastetext：文本粘贴
Blocktag：段落标签
Fontface：字体
FontSize：字体大小
Bold：粗体
Italic：斜体
Underline：下划线
Strikethrough：中划线
FontColor：字体颜色
BackColor：字体背景色
SelectAll：全选
Removeformat：删除文字格式
Align：对齐
List：列表
Outdent：减少缩进
Indent：增加缩进
Link：超链接
Unlink：删除链接
Anchor：锚点
Img：图片
Flash：Flash动画
Media：Windowsmedia player视频
Hr：插入水平线
Emot：表情
Table：表格
Source：切换源代码模式
Preview：预览当前代码
Print：打印
Fullscreen：切换全屏模式
About：关于xhEditor

skin：皮肤风格选择

参数值：default(默认风格),o2007blue(Office 2007 蓝色),o2007silver(Office 2007 银色),vista(Vista),nostyle(NoStyle)default(默认风格),o2007blue(Office 2007 蓝色),o2007silver(Office 2007 银色),vista(Vista),nostyle(NoStyle)

layerShadow：阴影的深度(按钮面板和模式窗口的背景阴影)

参数值：0(不显示阴影),大于0的数值(显示阴影并设置阴影的深度)0(不显示阴影),大于0的数值(显示阴影并设置阴影的深度)

clickCancelDialog：点击任意位置取消按钮面板功能

参数值：默认true(开启点击取消功能),false(关闭点击取消功能，必需要点击“取消”按钮才能关闭按钮面板)true(开启点击取消功能),false(关闭点击取消功能，必需要点击“取消”按钮才能关闭按钮面板)

showBlocktag：显示段落标签

参数值：true(显示段落标签),false(不显示)true(显示段落标签),false(不显示)

linkTag：样式链接link标签保留状态

参数值：true(保留样式链接link标签),false(清理样式链接link标签)true(保留样式链接link标签),false(清理样式链接link标签)

internalScript：内部JS代码保留状态

参数值：true(保留内部JS代码),false(清理内部JS代码)true(保留内部JS代码),false(清理内部JS代码)

inlineScript：内联JS代码保留状态

参数值：true(保留内联JS代码),false(清理内联JS代码)true(保留内联JS代码),false(清理内联JS代码)

internalStyle：内部样式保留状态

参数值：true(保留内部样式),false(清理内部样式)true(保留内部样式),false(清理内部样式)

inlineStyle：内联样式保留状态

参数值：true(保留内联样式),false(清理内联样式)true(保留内联样式),false(清理内联样式)

width：编辑器宽度

参数值：不带单位的数字，例：300300

height：编辑器高度

参数值：不带单位的数字，例：100100

background：编辑器背景

参数值：字符串，例：url(test.gif) no-repeat，设置编辑器背景，格式同CSS同名参数一致。建议直接设置textarea的css背景
备注：v1.1.1新添加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>'<br/>备注：1.0.0RC3新添加加载内部样式功能URL地址、URL数组以及直接内部样式，例如：'1.css'、['1.css','2.css']、'<style>body{font-size:20px;}</style>'<br/>备注：1.0.0RC3新添加加载内部样式功能

fullscreen：默认全屏显示

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

sourceMode：默认源代码模式

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

forcePtag：强制P标签

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

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

参数：0(不做任何清理),1(简单清理Word),2(深入清理Word),3(强制转文本),默认为1简单清理Word
说明：若网站应用需要保留更多的Word样式效果，请设置此值为1，不过产生的HTML代码体积会大大增大
备注：1.1.4版本中新变更，原为wordDeepClean和forcePasteText两个参数0(不做任何清理),1(简单清理Word),2(深入清理Word),3(强制转文本),默认为1简单清理Word
说明：若网站应用需要保留更多的Word样式效果，请设置此值为1，不过产生的HTML代码体积会大大增大
备注：1.1.4版本中新变更，原为wordDeepClean和forcePasteText两个参数

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

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

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

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

shortcuts：自定义键盘快捷方式

参数：快捷键对应事件代码的对象数组
示例：{'ctrl+enter':function(){$('#frmTest').submit();}}
备注：1.0.0beta2新添加
示例：{'ctrl+enter':function(){$('#frmTest').submit();}}
备注：1.0.0beta2新添加

urlBase：相对URL地址的基地址

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

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

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

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

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

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

参数：true(标注),false(不标注),默认为false
说明：若使用了ubb插件，请设置此属性为true
备注：1.0.0beta2新添加true(标注),false(不标注),默认为false
说明：若使用了ubb插件，请设置此属性为true
备注：1.0.0beta2新添加

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.0beta2新添加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.0beta2新添加

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

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

defLinkText：超链接的默认文字

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

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

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

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

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

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

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

upBtnText：上传按钮的文字

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

html5Upload：是否开启HTML5上传支持

参数值：true(允许),false(不允许),默认为true允许
说明：本功能需要浏览器支持HTML5上传
备注：1.0.0 Final新添加true(允许),false(不允许),默认为true允许
说明：本功能需要浏览器支持HTML5上传
备注：1.0.0 Final新添加

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

参数值：大于0的数值,默认：99,设置为1关闭多文件上传
说明：本功能需要浏览器支持HTML5上传
备注：1.0.0RC3新添加0的数值,默认：99,设置为1关闭多文件上传
说明：本功能需要浏览器支持HTML5上传
备注：1.0.0RC3新添加

upLinkUrl：超链接文件上传接收URL

参数值：接收用户上传的服务器端程序URL，默认留空为禁用超链接上传功能，具体使用方法请参考demo8演示文件
注：可使用内置变量：{editorRoot}，代表当前编辑器的根路径，例：{editorRoot}upload.phpURL，默认留空为禁用超链接上传功能，具体使用方法请参考demo8演示文件
注：可使用内置变量：{editorRoot}，代表当前编辑器的根路径，例：{editorRoot}upload.php

upLinkExt：超链接上传前限制本地文件扩展名

参数值：超链接上传前限制的文件扩展名列表，默认为：zip,rar,txt，建议与服务端扩展名检查列表一致zip,rar,txt，建议与服务端扩展名检查列表一致

upImgUrl：图片文件上传接收URL

参数值：接收用户上传的服务器端程序URL，默认留空为禁用上传功能，具体使用方法请参考demo8演示文件
注：可使用内置变量：{editorRoot}，代表当前编辑器的根路径，例：{editorRoot}upload.phpURL，默认留空为禁用上传功能，具体使用方法请参考demo8演示文件
注：可使用内置变量：{editorRoot}，代表当前编辑器的根路径，例：{editorRoot}upload.php

upImgExt：图片上传前限制本地文件扩展名

参数值：图片上传前限制的文件扩展名列表，默认为：jpg,jpeg,gif,png，建议与服务端扩展名检查列表一致jpg,jpeg,gif,png，建议与服务端扩展名检查列表一致

upFlashUrl：动画文件上传接收URL

参数值：接收用户上传的服务器端程序URL，默认留空为禁用上传功能，具体使用方法请参考demo8演示文件
注：可使用内置变量：{editorRoot}，代表当前编辑器的根路径，例：{editorRoot}upload.phpURL，默认留空为禁用上传功能，具体使用方法请参考demo8演示文件
注：可使用内置变量：{editorRoot}，代表当前编辑器的根路径，例：{editorRoot}upload.php

upFlashExt：动画上传前限制本地文件扩展名

参数值：动画上传前限制的文件扩展名列表，默认为：swf，建议与服务端扩展名检查列表一致swf，建议与服务端扩展名检查列表一致

upMediaUrl：视频文件上传接收URL

参数值：接收用户上传的服务器端程序URL，默认留空为禁用上传功能，具体使用方法请参考demo8演示文件
注：可使用内置变量：{editorRoot}，代表当前编辑器的根路径，例：{editorRoot}upload.phpURL，默认留空为禁用上传功能，具体使用方法请参考demo8演示文件
注：可使用内置变量：{editorRoot}，代表当前编辑器的根路径，例：{editorRoot}upload.php

upMediaExt：视频上传前限制本地文件扩展名

参数值：视频上传前限制的文件扩展名列表，默认为：avi，建议与服务端扩展名检查列表一致avi，建议与服务端扩展名检查列表一致

onUpload：文件上传成功回调函数

参数值：成功后需要执行的函数
说明：这个函数执行时返回的值为上传程序返回的msg变量，可能为字符串或者数组，若为字符串则直接代表url，若是数组，则必需包含一个url的变量，其它可由可开发者自定义
备注：1.0.0beta2新添加
说明：这个函数执行时返回的值为上传程序返回的msg变量，可能为字符串或者数组，若为字符串则直接代表url，若是数组，则必需包含一个url的变量，其它可由可开发者自定义
备注：1.0.0beta2新添加

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

插件对象的属性解释：
c：样式表名称
t：插件名字(鼠标在按钮上方时显示)
s：快捷方式，例："ctrl+enter"
h：是否鼠标悬停直接执行,1:直接执行(省略当前值代表不直接执行)
e：按钮点击后需要执行的代码(省略执行代码，则把当前的插件名作为参数，调用浏览器的execCommand函数)特别说明：
如果您希望样式表存储在系统自带的模板目录ui.css中，请将插件对象的样式名留空，则会自动按照插件名来调用相应的样式，例如：xhEdtBtnCut、xhEdtBtnCopy，其中的Cut和Copy是插件名具体调用方法请参考演示文件夹中的demo9
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新添加ID值，默认在form表单上绑定submit以同步结果
说明：通过本参数，在非标准submit提交环境下，比如AJAX提交，可以由用户点击提交按钮以触发编辑器最新值的同步
备注：v1.1.7新添加

onPaste：剪切板粘贴回调函数

参数值：用户粘贴后需要执行的函数
说明：此函数用来过滤用户粘贴的代码，若返回false禁用粘贴
备注：v1.1.8新添加
说明：此函数用来过滤用户粘贴的代码，若返回false禁用粘贴
备注：v1.1.8新添加

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

参数值：正则表达式
说明：本参数用来测试某些组件中测试URL是否属于本站域名
备注：v1.1.8新添加
说明：本参数用来测试某些组件中测试URL是否属于本站域名
备注：v1.1.8新添加

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

参数值：字符串(若不设置不开启此功能)
说明：当localUrlTest测试为false时，会将图片URL发往当前参数指定的服务器端上传接收程序，抓取成功后将本地URL返回并替换
备注：v1.1.8新添加
说明：当localUrlTest测试为false时，会将图片URL发往当前参数指定的服务器端上传接收程序，抓取成功后将本地URL返回并替换
备注：v1.1.8新添加

readTip：无障碍读屏提示

参数值：字符串(默认为空)
说明：无障碍读屏软件提示文字，可用来为残疾人士提示快捷键等信息
备注：v1.1.9新添加
说明：无障碍读屏软件提示文字，可用来为残疾人士提示快捷键等信息
备注：v1.1.9新添加

xhEditor用法相关推荐

【jQuery】网页文本格式编辑器xheditor
网页文本格式编辑器xheditor是一款优秀的.开源.兼容IE6的JQuery插件.现在很多网站都涉及到用户的交互,很难想象一个没有输入框的网站是怎么样的,你总不能一个给一个空白的文本框给别人吧?如果 ...
c语言中external，static关键字用法
static用法: 在C中,static主要定义全局静态变量.定义局部静态变量.定义静态函数. 1.定义全局静态变量:在全局变量前面加上关键字static,该全局变量变成了全局静态变量.全局静态变量有 ...
Pandas_transform的用法
先来看一个实例问题. 如下销售数据中展现了三笔订单,每笔订单买了多种商品,求每种商品销售额占该笔订单总金额的比例.例如第一条数据的最终结果为:235.83 / (235.83+232.32+107.9 ...
Python中yield和yield from的用法
yield 后面接的是 future 对象调用方委托生成器 yield from 直接给出循环后的结果 yield from 委托者和子生成器直接通信 yield from 直接处理stopIte ...
pytorch学习中 torch.squeeze() 和torch.unsqueeze()的用法
squeeze的用法主要就是对数据的维度进行压缩或者解压. 先看torch.squeeze() 这个函数主要对数据的维度进行压缩,去掉维数为1的的维度,比如是一行或者一列这种,一个一行三列(1,3)的 ...
python yield 和 yield from用法总结
#例1. 简单输出斐波那契數列前 N 个数 #缺点:该函数可复用性较差,因为 fab 函数返回 None,其他函数无法获得该函数生成的数列 #要提高 fab 函数的可复用性,最好不要直接打印出数列,而 ...
tf.nn.embedding_lookup()的用法
函数: tf.nn.embedding_lookup( params, ids, partition_strategy='mod', name=None, validate_indices=True, ...
OpenMP用法大全
OpenMP基本概念 OpenMP是一种用于共享内存并行系统的多线程程序设计方案,支持的编程语言包括C.C++和Fortran.OpenMP提供了对并行算法的高层抽象描述,特别适合在多核CPU机器上的 ...
Dorado用法与示例
Dorado用法与示例 dorado用后总结一.dorado概念 dorado的产品全名是"dorado展现中间件".从产品形态上dorado由两部分组成,第一部分是一个具有AJ ...
TensorFlow用法
TensorFlow用法什么是TensorFlow TensorFlow是一个开源软件库,用于使用数据流图进行数值计算.图中的节点表示数学运算,而图的边缘表示流动的多维数据数组(张量).这种灵活的体 ...