xhEditor用法
xhEditor是一个基于jQuery开发的简单迷你并且高效的在线可视化HTML编辑器,而且兼容很多浏览器,所以就选它了,具体使用如下:
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();
<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();
var _picture_name = _msg.substring(_msg.lastIndexOf("/")+1);
var _picture_path = Substring(_msg);
var _str = "<input type='checkbox' name='_pictures' value='"+_picture_path+"' checked='checked' onclick='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>
5、初始化参数列表
初始化参数示例代码:
$('#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:关于xhEditorskin:皮肤风格选择
参数值: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>'<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
备注: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变更为urlTypeemotPath:修改表情图片的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.phpupLinkExt:超链接上传前限制本地文件扩展名
参数值:超链接上传前限制的文件扩展名列表,默认为:zip,rar,txt,建议与服务端扩展名检查列表一致
upImgUrl:图片文件上传接收URL
参数值:接收用户上传的服务器端程序URL,默认留空为禁用上传功能,具体使用方法请参考demo8演示文件
注:可使用内置变量:{editorRoot},代表当前编辑器的根路径,例:{editorRoot}upload.phpupImgExt:图片上传前限制本地文件扩展名
参数值:图片上传前限制的文件扩展名列表,默认为:jpg,jpeg,gif,png,建议与服务端扩展名检查列表一致
upFlashUrl:动画文件上传接收URL
参数值:接收用户上传的服务器端程序URL,默认留空为禁用上传功能,具体使用方法请参考demo8演示文件
注:可使用内置变量:{editorRoot},代表当前编辑器的根路径,例:{editorRoot}upload.phpupFlashExt:动画上传前限制本地文件扩展名
参数值:动画上传前限制的文件扩展名列表,默认为:swf,建议与服务端扩展名检查列表一致
upMediaUrl:视频文件上传接收URL
参数值:接收用户上传的服务器端程序URL,默认留空为禁用上传功能,具体使用方法请参考demo8演示文件
注:可使用内置变量:{editorRoot},代表当前编辑器的根路径,例:{editorRoot}upload.phpupMediaExt:视频上传前限制本地文件扩展名
参数值:视频上传前限制的文件扩展名列表,默认为: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是插件名 具体调用方法请参考演示文件夹中的demo9submitID:触发表单提交的按钮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新添加
官网:http://xheditor.com
原文:http://kms.lenovots.com/kb/article.php?id=13203
xhEditor用法的更多相关文章
- Html在线编辑器--基于Jquery的xhEditor轻量级编辑器
xhEditor V1.2.2 下载地址 开源中国社区: http://www.oschina.net/p/xheditor xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHT ...
- xhEditor 简单用法
1.下载需要文件包: http://xheditor.com/ 2.解压文件中文件 xheditor-zh-cn.min.js以及xheditor_emot.xheditor_plugins和xhed ...
- 【HTML5+MVC4】xhEditor网页编辑器图片上传
准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html 注意事项:xhEditor分为v1.1.1 ...
- xhEditor与Java结合使用
xhEditor是一个轻量级的html编辑器,使用它可以非常方便的编辑图文内容,然而官方文档中只有php的演示,没有Java版的,最近两天参考网上各种各样的文档,琢磨了一下用法,现已可以正常运行,现在 ...
- 在 VS2013的ASPNET站点开发中用 xheditor v1.1.13 作为HTML编辑器
要用vs2013开发一个博客站点,.net framework 4,须要一个HTML编辑器作为写文章的工具.经多方试用,排除了dotnettextbox.kceditor.认为xheditor ...
- EditText 基本用法
title: EditText 基本用法 tags: EditText,编辑框,输入框 --- EditText介绍: EditText 在开发中也是经常用到的控件,也是一个比较必要的组件,可以说它是 ...
- jquery插件的用法之cookie 插件
一.使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...
- Java中的Socket的用法
Java中的Socket的用法 Java中的Socket分为普通的Socket和NioSocket. 普通Socket的用法 Java中的 ...
- [转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法
一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBo ...
随机推荐
- MicroStation VBA 可视化界面
第十章 可视界面 Private Sub UserForm_Initialize() Dim ViewCen As Point3d Dim MyView As View For Each MyView ...
- 关于tableview内cell自定义的注册以及创建
自定义cell的方法主要有两种,storyboard以及xib(假设新建的是cellTableViewCell类) 比较倾向于xib方式使用xib在xib文件内将自定义的cell绘制好后导入到调用文件 ...
- 简单的ASP.NET Forms身份认证
读了几篇牛人的此方面的文章,自己也动手做了一下,就想有必要总结一下.当然我的文章质量自然不能与人家相比,只是写给从没有接触过这个知识点的朋友. 网站的身份认证我以前只知道session,偶然发现一些牛 ...
- 3、Javascript学习 - IT软件人员学习系列文章
接下来,我们开始进入Javascript语言的学习. Javascript语言是一种解释性的语言,不同于ASP.NET.C#语言的这种编译性的语言.它随着HTML网页的发布而发布,就是说嵌入到HTML ...
- 谈谈yii2-gii如何自定义模板
作者:白狼 出处:http://www.manks.top/article/yii2_gii_custom_template本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位 ...
- C#八皇后问题 枚举值
记得刚出道的时候, 有考虑怎么面试, 以及可能会遇到的面试题, 有一个人说了一下 八皇后问题, 据说要用 sql 语句写出来, 暂时我 写了一个C#版本的, 经测验,八皇后算法结果为 92种, 这个与 ...
- 数据泵如何生成导出文件的DDL脚本
在使用exp/imp时,生成对应dumpfile文件的DDL脚本非常容易,在使用命令imp时,添加参数show, show=y表示展示imp导入的时候,输出相关DDL语句(不包括insert语句),而 ...
- Protocol 编码的三种常用方式
1.使用固定长度 2.使用固定长度的请求头,请求头中说明了body的长度. 例如HTTP 协议: http请求协议: http 响应协议: 3.使用界定符.例如有很多基于text(文本)协议都会在每个 ...
- 烂泥:puppet3.7安装与配置
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 有关服务器的自动化管理,这方面以前没有接触过.打算这段时间把这块知识给补上. 现在服务器自动化管理软件,使用最多也最火的就是puppet了. 那么我们今 ...
- mysql行锁和表锁
mysql innodb支持行锁和表锁,但是MyIsam只支持表锁.现在我们说说mysql innodb的行锁和 有如下表id为主键 为了出现演示效果,我们将mysql的autocommit设置为0 ...