xhEditor编辑器入门基础

1.1. 在线可视化HTML编辑器概述

在Web程序应用中，最常见的一种行为是信息和言论的发布和交流。而在信息发布的，往往会有对信息发布的格式、类型和功能上的需求，比如加粗、下划线等等，以使文字信息能够更形象更美观的传达给阅读者，也提高信息发布的工作效率。在这个需求的背景下，HTML在线编辑器就应运而生了。

顾名思义，在线HTML编辑器就是在线编辑HTML代码的工具，它经常被应用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入HTML的地方，是Web应用的常用模块之一。在线HTML编辑器可以实现对编辑内容添加各种丰富多彩的文字效果，以及提供各种方便快捷的操作功能，最大的提高编辑工作效率。在线HTML编辑器是任何网站不可或缺的重要功能组件，是互联网用户得心应手的驰骋网络的有力工具。

1.2. 获取xhEditor

您可以访问xhEditor官方网站下载最新版本的xhEditor编辑器，xhEditor官方网站地址为，打开右上角的免费下载 | 代码向导链接，即可找到最新版本的下载地址。

xhEditor无需任何安装，无需任何设置，直接解压缩并拷贝到你的网站相应文件夹狼蚁网站SEO优化即可直接调用。

1.3. xhEditor运行环境

xhEditor是基于浏览器的HTML、CSS和Javascript环境开发的，原则上市场上绝大部分浏览器我们都能完美的运行，目前已测试的浏览器兼容列表如下IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+ (+号代表往后所有新版本)。xhEditor是完全基于浏览器环境的，不存在操作系统选择性，是完全跨平台的。xhEditor也可以应用在任何的服务端语言环境下，例如PHP、ASP、ASP.NET、JAVA等，可以在您的CMS、博客、论坛、商城等互联网平台上完美的嵌入运行，能够非常灵活简单的和您的系统实现完美的无缝衔接。

1.4. xhEditor基本使用指南

您只需按照以下简单步骤即可学会使用xhEditor
下载最新版本xhEditor:
将下载的压缩文件解压缩，上传其中的xheditor-zh-.min.js以及xheditor_emot、xheditor_plugins和xheditor_skin三个文件夹到网站相应文件夹中
在需要调用xhEditor编辑器的网页head标签结束之前添加以下代码
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/xheditor-zh-.min.js"></script>
注jQuery和xhEditor的js文件路径请根据你网站具体路径情况相应修改
在需要实现可视化的文本框textarea属性中添加
class="xheditor {skin:'default'}"
注前面主参数也可以是xheditor-mfull、xheditor-mini或xheditor-simple，分别加载多行完全、迷你和简单工具栏。后面大括号用来定义更多的初始化参数，可以省略。

经过以上步骤，你就已经成功的将xhEditor编辑器安装在你的网页中。若需要学习更多xhEditor编辑器的使用技术，请参阅xhEditor进阶使用。
2. xhEditor进阶使用
2.1. 进阶使用指导
2.2. 初始化参数列表
2.3. API函数接口列表
2.4. 上传程序开发规范
2.5. 插件开发指南
2.6. 皮肤设计指南
2.7. 关于二次开发

2.1. 进阶使用指导

阅读本章节请先阅读xhEditor入门基础，若你已经熟悉xhEditor的基本使用，请往下继续。

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);

2.2. 初始化参数列表

初始化参数示例代码
$('#elm1').xheditor({tools:'full',skin:'default',showBlocktag:true,internalScript:false,internalStyle:false,width:300,height:200,loadCSS:'http://xheditor./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删除链接
Img图片
FlashFlash动画
MediaWindows media player视频
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
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新添加
wordDeepCleanWord文档深入清理选项
参数true(深入清理),false(不深入清理，保留style样式效果),默认为true
说明若网站应用需要保留更多的Word样式效果，请设置此值为false，不过产生的HTML代码体积会大大增大
备注1.0.0 beta2新添加
hoverExecDelay悬停自动执行延迟的时间
参数数值(单位毫秒)，默认为100，设置为-1关闭此功能
备注1.0.0 rc2新添加
defLinkText超链接的默认文字
参数值字符串(默认值“点击打开链接”)
说明只在不选择任何内容的情况下才会用到这个参数值
modalWidthshowModal弹出窗口的默认宽度
参数值数值，默认为350
说明弹出窗口的默认宽度
modalHeightshowModal弹出窗口的默认高度
参数值数值，默认为220
说明弹出窗口的默认高度
modalTitleshowModal弹出窗口是否显示上方的标题栏
参数值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

2.3. 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.0 Final新添加
exec立即执行按钮及插件
参数1工具按钮名称(不区分大小写)，例Link、img
说明此函数可以在插件内部或者外部Javascript代码中进行调用
showModal显示模式窗口
参数1模式窗口的标题title
参数2模式窗口的内容content
参数3模式窗口的宽度w
参数4模式窗口的高度h
参数5模式窗口关闭时的回调函数onRemove
showIframeModal显示iframe式的模式窗口
参数1模式窗口的标题
参数2iframe的地址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:编辑器失去焦点时回调此函数

注修改有效变量仅限以上，其它的变量都仅在编辑器初始化时使用

2.4. 上传程序开发规范

上传接收程序开发必读
上传程序分标准HTML4上传和HTML5上传两种情况处理
1, HTML4上传使用标准的表单上传域，上传文件域的name为filedata
2, HTML5上传的整个POST数据流就是上传的文件完整数据，而本地文件名等信息储存于HTTP_CONTENT_DISPOSITION这个服务器变量中
返回内容必需是标准的json字符串，结构可以是如下{"err":"","msg":"200906030521128703.gif"} 或者 {"err":"","msg":{"url":"200906030521128703.jpg","localfile":"test.jpg","id":"1"}} 注若选择结构2，则url变量是必有

需了解更多细节，请参考发行包中的demos文件夹。其中upload.php、upload.asp、upload.aspx仅为演示参考代码，若您使用的是其它的服务器脚本语言，请自行对初始化参数中的upLinkUrl、upImgUrl、upFlashUrl和upMediaUrl进行修改，并开发相应服务器上传接收程序。若您希望在自己的项目中实际使用，请自行修改代码或者重新开发，开发过程中请注意上传文件的格式及大小限制，注意服务器脚本安全问题。

上传文件管理建议方案
在编辑器初始化时在upload.php后面跟上一个服务器生成的绝对唯一的跟踪值，例如upload.php?infoid=123
在服务器接收程序中以这个跟踪值保存到数据库中，也可以限制单个跟踪值下总上传文件数或者总文件大小，否则就是一个可以上传无限个文件的漏洞了
最终当前表单提交时，再根据编辑器提交的HTML内容和数据库中上传内容进行比较，删除所有没有使用的上传文件
定期由服务器脚本删除上传数据库中没提交的文件记录，这样就能防止别人将你的网站作为免费相册空间了

2.5. 插件开发指南

标准插件开发流程
设计插件图标并在页面中定义好CSS
定义插件参数并写入初始化参数plugins
编写插件调用时要执行的代码

狼蚁网站SEO优化我们就demo09中的一个最简单插件作介绍
<style type="text/css">
.testClassName {
background:transparent url(img/plugin.gif) no-repeat 20px 20px;
background-position:3px 3px;
}
</style>
test7:{c:'testClassName',t:'测试7showIframeModal (Ctrl+7)',s:'ctrl+7',e:function(){
var _this=this;
_this.showIframeModal('测试showIframeModal接口','uploadgui.html',function(v){_this.loadBookmark();_this.pasteText('返回值\r\n'+v);},500,300);
}}

这个插件实现的功能是打开一个iframe，并将iframe返回的参数字符串插入到当前编辑器光标处。
其中test7为插件的name，用来在tools初始化参数中调用
c:'testClassName'为插件的样式名称
t:'测试7showIframeModal (Ctrl+7)'是鼠标放在按钮上显示的提示文字
s:'ctrl+7'是定义插件的快捷方式，在编辑器区域里按设置的快捷方式就会执行此插件事件；
e:function(){}为插件点击后要执行的代码

特别说明
插件执行函数中可以用this.的方式调用2.3.章节中所有的API接口函数。如果使用回调函数，请将this变量保存在临时变量中，例如_this;
在某些浏览器下，打开会转移焦点的操作界面，会导致编辑区域焦点丢失。例如showIframeModal，在回调函数中需先执行loadBookmark函数恢复焦点，之后才能调用pasteHTML等函数;
如果希望样式表存储在系统自带的模板目录ui.css中，请将插件对象样式名留空，则会自动按照插件名来调用相应的样式，例如xhEdtBtnCut、xhEdtBtnCopy，其中的Cut和Copy是插件名;

若希望xhEditor开发团队为您定制特殊的功能、皮肤和插件，请参阅我们提供的商业服务页面。

2.6. 皮肤设计指南

xhEditor的皮肤保存在xheditor_skin文件夹中，每个皮肤一个子文件夹，文件夹结构如下
xheditor_skin
└─default
├─ui.css
├─iframe.css
└─img
├─icons.gif
├─...
└─loading.gif
编辑器按钮、面板、模式窗口等样式全部统一存储在ui.css文件中
编辑区域的样式存储在iframe.css文件中
编辑器内核用到的图片及css文件中用到的所有图片统一存储在img文件夹中
ui.css文件简单解析

xheLayout编辑器table样式；xheTool工具按钮所在区域的样式；xheButton按钮样式；xhePanel操作面板的样式；xheMenu菜单样式；xheEmot表情样式；xheColor颜色选择器的样式；xheDialog面板上的对话框样式；xheModal模式窗口样式；

xhEditor皮肤结构相对非常简单，有一定的HTML和CSS设计基础即可完成设计工作。

若希望xhEditor开发团队为您定制特殊的功能、皮肤和插件，请参阅我们提供的商业服务页面。

2.7. 关于二次开发

由于二次开发相对复杂度较高，需要对xhEditor源代码结构熟悉，而开发者的水平有高有低，容易出现的问题也五花八门。鉴于这个原因，xhEditor开发团队对非商业授权用户不提供任何的技术文档和技术支持，希望大家理解。

若希望xhEditor开发团队为您定制特殊的功能、皮肤和插件，请参阅我们提供的商业服务页面。

3. 其它相关
3.1. 使用常见问题

3.1. 使用常见问题
xhEditor能兼容哪些jQuery版本？
我的网页是GB2312编码的，怎样才能使xhEditor编辑器没有乱码？
正常加载了xhEditor，读取textarea的value值，为什么读取不到最新编辑结果？
怎么添加自定义的表情？
怎么覆盖编辑器自带的默认表情？
当前页面设置了document.domain，如何让xhEditor工作正常？
textarea处在隐藏的区域中，如何初始化编辑器？
使用普通表单提交，怎么每次服务端取到的值总是之前旧的编辑结果？
xhEditor能兼容哪些jQuery版本？

xhEditor最初的版本是基于jQuery 1.3.2开发的，目前v1.0系列的所有版本都能最大的兼容1.3.2。为了获得更好的代码性能，目前xhEditor官方更建议使用最新的1.4.2版本。

虽然说v1.0版本系列能最大的兼容jQuery 1.3.2，在实际测试过程中，也发现一个不可修正的问题在IE6下无法使用缩略图上传模式。如果你不需要使用缩略图模式，可以在jQuery 1.3.2基础上完美的运行xhEditor v1.0版本系列。
我的网页是GB2312编码的，怎样才能使xhEditor编辑器没有乱码？

如果使用最新版xhEditor的mini压缩版本，因为里面的文字完全utf-8编码化，可以直接调用，不会出现乱码现象。

如果使用的是源代码js文件或早期的xhEditor版本，在非utf-8编码的网页中使用就会出现乱码现象，只需将script的charset属性设置成utf-8即可完美解决
<script type="text/javascript" charset="utf-8" src="xheditor-zh-.js"></script>
正常加载了xhEditor，读取textarea的value值，为什么读取不到最新编辑结果？

目前网络中所有的在线编辑器都是利用新创建的iframe来实现可视化编辑功能，xhEditor也不例外，所以在提交前必需要将最新的编辑结果重新同步到原来的textarea。

xhEditor默认会在textarea所在的form对象中绑定onsubmit事件，当用户点击submit按钮时，xhEditor就会将最新结果同步回textarea，随后随表单中的其它表单项一同提交到服务端脚本。，如果不需要用Javascript额外处理，普通的表单式提交是没任何问题的。

如果网页中需要用Javascript额外处理编辑结果，比如ajax提交表单，则有三种解决方案
使用jQuery的事件绑定或者标准DOM绑定方法在form上绑定submit事件(绑定代码必需在xhEditor初始化代码后面)，即是在xhEditor把值回传后再读取，在相应绑定的函数中读取textarea的value值即是最新编辑结果;
使用jQuery的标准取值方法:$('#textarea_id').val();
使用xhEditor提供的专用读值API接口editor.getSource();

怎么添加自定义的表情？

可以在初始化参数中使用emots参数来自