1.1. 在线可视化HTML编辑器概述
在Web程序应用中，最常见的一种行为是信息和言论的发布和交流。而在信息发布的同时，往往会有对信息发布的格式、类型和功能上的需求，比如：加粗、下划线等等，以使文字信息能够更形象更美观的传达给阅读者，同时也提高信息发布的工作效率。在这个需求的背景下，HTML在线编辑器就应运而生了。
顾名思义，在线HTML编辑器就是在线编辑HTML代码的工具，它经常被应用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入HTML的地方，是Web应用的常用模块之一。在线HTML编辑器可以实现对编辑内容添加各种丰富多彩的文字效果，以及提供各种方便快捷的操作功能，最大的提高编辑工作效率。在线HTML编辑器是任何网站不可或缺的重要功能组件，是互联网用户得心应手的驰骋网络的有力工具。
1.2. 获取xhEditor
您可以访问xhEditor官方网站下载最新版本的xhEditor编辑器，xhEditor官方网站地址为：http://xheditor.com/，打开右上角的免费下载 | 代码向导链接，即可找到最新版本的下载地址。
xhEditor无需任何安装，无需任何设置，直接解压缩并拷贝到你的网站相应文件夹下面即可直接调用。
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:http://xheditor.com/download
将下载的压缩文件解压缩，上传其中的xheditor-zh-cn.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-cn.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.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：删除链接
Img：图片
Flash：Flash动画
Media：Windows 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：单表情区域高度，必需大于或等于表情最大高