xhEditor 基础用法

---

xhEditor是基于jQuery的简单迷你且高效的在线可视化HTML编辑器
xhEditor的DEMO

---

官网 //xheditor.com 好似不维护了
1 下载xhEditor 最新版本 下载地址xhEditor
demo 文件夹各种形式的配置实例 将其中的jquery-1.4.2.min.js
xheditor-zh-cn.min.js 及 xheditor_emot xheditor_plugins 和xheditor_skin
三个文件夹拷贝到项目的相应目录

---

在相应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>
调用方法方法1 在textarea 上添加属性
class="xheditor {skin:'default'}"
前面主参数也可以是xheditor-mini 和xheditor-simple
分别加载迷你和简单工具栏 后面详细参数可以省略
方法2 推荐使用
在页面初始JS 代码里加上
$(“#helpInfo”).xheditor();
<script type="text/javascript">
$(document).ready(function(){//初始化xhEditor编辑器插件
$("#helpInfo").xheditor({tools:'simple',skin:'default',upMultiple:true, upImgUrl: '{editorRoot}/upload.jsp', upImgExt: "jpg,jpeg,gif,bmp,png", onUpload:insertUpload});//xbhEditor编辑器图片上传回调函数
function insertUpload(msg) {
var _msg = msg.toString(),_picture_name = _msg.substring(_msg.lastIndexOf("/")+1), _picture_path = Substring(_msg),_str = "<input type='checkbox' name='_pictures' value='"+_picture_path+"' checked='checked' οnclick='return false'/><label>"+_picture_name+"</label><br/>";
$("#helpInfo").append(_msg); //$("#uploadList").append(_str);
}//处理服务器返回到回调函数的字符串内容,格式是JSON的数据格式.
function Substring(s){ return s.substring(s.substring(0,s.lastIndexOf("/")).lastIndexOf("/"),s.length);}});</script>

---

初始化参数列表

$('#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"});

---

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 Windows media player视频
Hr 插入水平线
Emot 表情
Table 表格
Source 切换源代码模式
Preview 预览当前代码
Print 打印
Fullscreen 切换全屏模式
About 关于xhEditor
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背景
loadCSS 加载样式
URL地址 URL数组以及直接内部样式 例如 '1.css' ['1.css','2.css'] '<style>body{font-size:20px;}</style>'<br />备注 1.0.0 RC3新添加加载内部样式

---

功能fullscreen 默认全屏显示 true(全屏大小),false(标准大小)
sourceMode 默认源代码模式 true(源代码模式),false(编辑模式)
forcePtag 强制P标签 true(强制使用P标签),false(不强制),默认true
cleanPaste 是否清理粘贴的HTML代码
参数 0(不做任何清理),1(简单清理Word),2(深入清理Word),3(强制转文本),默认为1简单清理Word
若网站应用需要保留更多的Word样式效果 请设置此值为1 不过产生的HTML代码体积会大大增大
备注 1.1.4版本中新变更 原为wordDeepClean和forcePasteText两个参数
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为空

hoverExecDelay 悬停自动执行延迟的时间
参数 数值(单位毫秒) 默认为100 设置为-1关闭此功能

defLinkText 超链接的默认文字
字符串(默认值 “点击打开链接”)
只在不选择任何内容的情况下才会用到这个参数值
modalWidth showModal弹出窗口的默认宽度
数值 默认为350
弹出窗口的默认宽度
modalHeight showModal弹出窗口的默认高度 数值 默认为220
弹出窗口的默认高度
modalTitle showModal弹出窗口是否显示上方的标题栏
true(显示),false(不显示)
控制弹出窗口是否显示上方的标题栏 默认为显示 若需要显示一个更定制个性化的iframe窗口 可通过此参数隐藏上方的标题栏
upBtnText 上传按钮的文字
任意字符串,默认值 “上传”
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函数)
如果希望样式表存储在系统自带的模板目录ui.css中 请将插件对象的样式名留空 则会自动按照插件名来调用相应的样式 例如 xhEdtBtnCut xhEdtBtnCopy 其中的Cut和Copy是插件名
具体调用方法请参考演示文件夹中的demo9
submitID 触发表单提交的按钮ID值
表单提交按钮的ID值 默认在form表单上绑定submit以同步结果
通过本参数 在非标准submit提交环境下 比如AJAX提交 可以由用户点击提交按钮以触发编辑器最新值的同步

onPaste 剪切板粘贴回调函数
用户粘贴后需要执行的函数
此函数用来过滤用户粘贴的代码 若返回false禁用粘贴

localUrlTest 非本站域名测试正则表达式
正则表达式
本参数用来测试某些组件中测试URL是否属于本站域名

remoteImgSaveUrl 远程图片抓取接收程序URL
字符串(若不设置不开启此功能)
当localUrlTest测试为false时 会将图片URL发往当前参数指定的服务器端上传接收程序 抓取成功后将本地URL返回并替换

readTip 无障碍读屏提示 字符串(默认为空)
无障碍读屏软件提示文字 可用来为残疾人士提示快捷键等信息