在Web程序应用中,经常会有编辑文章等需求。为了文章的排版布局如word文档编辑器一样美观方便,如:加粗、下划线、左右对齐等等,以使文字信息能够更形象更美观的传达给阅读者,同时也提高信息发布的工作效率。在这个需求的背景下,HTML在线编辑器就应运而生了。
1、导入JS库
您可以访问xhEditor官方网站下载最新版本的xhEditor编辑器,xhEditor官方网站地址为:http://xheditor.com/,打开右上角的免费下载 | 代码向导链接,即可找到最新版本的下载地址。xhEditor无需任何安装,无需任何设置,直接解压缩并拷贝到你的网站相应文件夹下面即可直接调用。
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/xheditor-1.2.2.min.js"></script>
<script type="text/javascript" src="js/xheditor_langzh-cn.js"></script>
注:jQuery和xhEditor的js文件路径请根据你网站具体路径情况相应修改
2、HTML实现可视化的文本框textarea
<form id="frmDemo" method="post" action="">
<span style="white-space:pre"> </span><textarea id="elm1" name="elm1" style="width: 860px; height: 180px; display: none;">Hello xhEditor!</textarea>
</form>
在需要实现可视化的文本框textarea属性中添加:
class="xheditor {skin:'default'}"
注:前面主参数也可以是xheditor-mfull、xheditor-mini或xheditor-simple,分别加载多行完全、迷你和简单工具栏。后面大括号用来定义更多的初始化参数,可以省略。
3、xhEditor的调用
通过js调用xheditor插件
<script>
$('#elm1').xheditor();
$('#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"
});
</script>
xhEditor提供两种方式初始化编辑器:
- 方法1:利用class属性来初始化和传递各种初始化参数,例:
class="xheditor {skin:'default'}"
- 方法2:利用xhEditor提供的jQuery插件接口来实现对特定textarea的初始化和传递参数,例:
$('#elm1').xheditor(); 或者 $('#elm1').xheditor({tools:'mini'});
特别说明:两种初始化方法只能选择其中一种使用,如果两种方法的代码同时存在页面中,方法2的代码不会有任何效果。
我们更倾向于推荐大家使用方法1,因为更简单易用,不涉及任何的Javascript代码。通过简单的参数设置即可定制各种效果的编辑器界面,简单易用且功能强大。
如果想实现更加复杂的交互应用,或者希望xhEditor编辑器能够和自己的Javascript代码实现互相访问,那么你可以选择使用方法2,相对具有更大的自由空间。
xhEditor也提供了即时的卸载编辑器方法:
$('#elm1').xheditor(false);
4、初始化的参数列表
-
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:删除链接 Img:图片 Flash:Flash动画 Media:Windows media player视频 Emot:表情 Table:表格 Source:切换源代码模式 Preview:预览当前代码 Print:打印 Fullscreen:切换全屏模式 About:关于xhEditor
-
skin:皮肤风格选择
参数值:default(默认风格),o2007blue(Office2007蓝色),o2007silver(Office2007银色),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']、'<style>body{font-size:20px;}</style>'<br />备注:1.0.0 RC3新添加加载内部样式功能
-
fullscreen:默认全屏显示
参数值:true(全屏大小),false(标准大小)
-
sourceMode:默认源代码模式
参数值:true(源代码模式),false(编辑模式)
-
forcePtag:强制P标签
参数值:true(强制使用P标签),false(不强制),默认true
-
forcePasteText:强制将粘贴的内容转换为文本
参数值:true(强制转文本),false(不转文本),默认false 备注:v1.1.0新添加
-
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新添加
-
wordDeepClean:Word文档深入清理选项
参数:true(深入清理),false(不深入清理,保留style样式效果),默认为true 说明:若网站应用需要保留更多的Word样式效果,请设置此值为false,不过产生的HTML代码体积会大大增大 备注: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.0Final新添加
-
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
5、API函数接口列表
API接口示例代码:
var editor=$('#elm1').xheditor({tools:'full',skin:'default'});
editor.focus();
editor.setSource('str')
sHtml=editor.getSource()
editor.appendHTML('<p>aaa</p>')
editor.pasteHTML('<p>aaa</p>')
editor.pasteText('str')
sHtml=editor.formatXHTML('<b>aaa</b>')
editor.toggleSource()
editor.toggleFullscreen()
alert(editor.settings.upImgExt);
editor.settings.upImgExt='txt,doc';
API接口列表:
-
focus:使编辑器获得焦点
无参数
-
setSource:设置编辑器源代码
参数1:要设置的源代码内容,例:'<p>aaa</p>'
-
getSource:返回编辑器格式后的源代码
无参数
-
appendHTML:粘贴HTML内容到编辑器结尾处
参数1:要粘贴的HTML代码,例:'<p>uuu</p>' 注:0.9.5版添加
-
getSelect:返回当前选中的内容
参数1:返回格式,可选'text'返回文本格式,其它所有值都返回HTML格式
-
pasteHTML:粘贴HTML内容到编辑器当前光标处
参数1:要粘贴的HTML代码,例:'<p>uuu</p>' 参数2:是否覆盖粘贴,留空(覆盖粘贴)、true(粘贴在光标选择区域之前)、false(粘贴在光标选择区域之后)
-
pasteText:粘贴文本到编辑器当前光标处
参数1:要粘贴的文本,例:'这里的内容完全原样显示<strong>aaa</strong>' 参数2:是否覆盖粘贴,留空(覆盖粘贴)、true(粘贴在光标选择区域之前)、false(粘贴在光标选择区域之后)
-
formatXHTML:格式化XHTML代码
参数1:需要格式化的HTML代码,例:'<b>aaa</b>',返回'<strong>aaa</strong>' 参数2:是否代码缩进换行,true(执行缩进格式化),false(不执行缩进格式化),默认为false
-
toggleSource:在源代码模式和编辑模式之间切换
参数1:空(切换),true(显示源代码模式),false(显示编辑模式)
-
toggleFullscreen:在全屏模式和标准大小之间切换
参数1:空(切换),true(显示全屏模式),false(显示标准模式)
-
toggleShowBlocktag:切换块标签显示状态
参数1:空(切换),true(切换为显示块标签),false(切换为不显示块标签)
-
addShortcuts:添加快捷键
参数1:快捷键值,例:'ctrl+enter' 参数2:用户按下快捷键后需要响应的程序代码,例:function(){$('#frmTest').submit();} 说明:允许为某个相同快捷键值重复添加多个响应代码 备注:1.0.0 beta2新添加
-
delShortcuts:删除快捷键
参数1:快捷键值,例:'ctrl+enter' 备注:1.0.0Final新添加
-
exec:立即执行按钮及插件
参数1:工具按钮名称(不区分大小写),例:Link、img 说明:此函数可以在插件内部或者外部Javascript代码中进行调用
-
showModal:显示模式窗口
参数1:模式窗口的标题title 参数2:模式窗口的内容content 参数3:模式窗口的宽度w 参数4:模式窗口的高度h 参数5:模式窗口关闭时的回调函数onRemove
-
showIframeModal:显示iframe式的模式窗口
参数1:模式窗口的标题 参数2:iframe的地址ifmurl,可使用内置变量:{editorRoot},代表当前编辑器的根路径,例:{editorRoot}xheditor_plugins/test.html 参数3:提供给目标iframe页面回调用的回调函数,可以在iframe页面中以这样的形式调用:callback('1.gif'); 参数4:模式窗口的宽度w 参数5:模式窗口的高度h 参数6:模式窗口关闭时的回调函数onRemove
-
settings:获取或者修改编辑器内部参数
internalScript:是否清除内部代码 inlineScript:是否清除内联代码 internalStyle:是否清除内部样式 inlineStyle:是否清除内联样式 forcePtag:强制使用P标签 upLinkUrl:超链接上传接口地址 upLinkExt:超链接本地上传扩展限制 upImgUrl:图片上传接口地址 upImgExt:图片本地上传扩展限制 upFlashUrl:动画上传接口地址 upFlashExt:动画本地上传扩展限制 upMediaUrl:视频上传接口地址 upMediaExt:视频本地上传扩展限制 beforeSetSource:在设置源代码到编辑器前调用此函数 beforeGetSource:从编辑器返回源代码前调用此函数 focus:编辑器获得焦点时回调此函数 blur:编辑器失去焦点时回调此函数 注:修改有效变量仅限以上,其它的变量都仅在编辑器初始化时使用
6、案例完整代码
以上就是xhEditor可视化编辑器的基本用法,下面我附上整篇完整的代码,有需要的随意拿走
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>xhEditor</title>
</head>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/xheditor-1.2.2.min.js"></script>
<script type="text/javascript" src="js/xheditor_langzh-cn.js"></script>
<link rel="stylesheet" type="text/css" href="css/ui.css" />
<body>
<form id="frmDemo" method="post" action="">
<textarea id="elm1" name="elm1" style="width: 860px; height: 180px; display: none;">Hello xhEditor!</textarea>
</form>
<script>
$('#elm1').xheditor();
$('#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"
});
</script>
</body>
</html>