以下部分是从网上拷贝的介绍资料:
xhEditor is a simple,small,fast WYSWYG(What You See What You Get) XHTML editor based by jQuery. that is webbased and compatible with Internet Explorer 6.0-8.0,Firefox 3.0,Opera 9.6,Chrome 1.0,Safari 3.22 .
xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器,基于网络访问并且兼容IE 6.0-8.0,Firefox 3.0,Opera 9.6,Chrome 1.0,Safari 3.22。
下载地址:http://xheditor.googlecode.com/files/xheditor-0.9.7-fix-zh-cn.zip
Features(特点):
- Small:初始加载5个文件,包括:1个js(45k)+2个css(7k)+2个图片(4k),总共56k。若js和css文件进行gzip压缩传输,可以进一步缩减为21k左右。
- Fast:基于jQuery引擎开发,提供高效的代码执行效率
- Simple:简单的调用方式,加一个class属性就能将您的textarea立马变成一个功能丰富的可视化编辑器。
- Word:实现Word代码自动检测并清理,提供高效完美的Word代码过滤方案,生成代码最优化精简,但是却不丢失任何细节效果。
- UBB: 提供完美的UBB可视化编辑解决方案,在您获得安全高效代码存储的同时,又能享受可视化编辑的便捷
-
Demo(演示):http://static.pirate9.com/js/xheditor_demos/demo1.html
- 默认模式:
- 自定义按钮:http://static.pirate9.com/js/xheditor_demos/demo2.html
- 皮肤选择:http://static.pirate9.com/js/xheditor_demos/demo3.html
- 其它选项:http://static.pirate9.com/js/xheditor_demos/demo4.html
- Javascript交互:http://static.pirate9.com/js/xheditor_demos/demo5.html
- 非utf-8编码网页调用:http://static.pirate9.com/js/xheditor_demos/demo6.html
- UBB可视化编辑:http://static.pirate9.com/js/xheditor_demos/demo7.html
- Ajax文件上传:http://static.pirate9.com/js/xheditor_demos/demo8.html
- 插件扩展:http://static.pirate9.com/js/xheditor_demos/demo9.html
- iframe调用文件上传:http://static.pirate9.com/js/xheditor_demos/demo10.html
最近在一个项目中用到此文本编辑器,xheditor,总结下使用步骤:
(1)、按照上述下载地址下载后,解压此文件,将解压过后的文件拷贝到项目根目录下即可。
(2)、在项目的Default.aspx文件的<title></title>后</head>之前添加如下script脚本:
<script src="xheditor-0.9.7-fix-zh-cn/zh-cn/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="xheditor-0.9.7-fix-zh-cn/zh-cn/xheditor.js" type="text/javascript"></script>
<script src="xheditor-0.9.7-fix-zh-cn/zh-cn/xheditor_plugins/ubb.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#txtContent').xheditor(true, { tools: 'full', skin: 'default' });
});
</script>
(3)、在<div></div>之间加入以下代码:
<table width="100%">
<tr>
<td width="15%" align="right" valign="top"> 公告标题:</td>
<td><asp:textbox id="Text_p_name" runat="server" Width="80%"></asp:textbox></td>
<td style="WIDTH: 4px" align="left">
<asp:requiredfieldvalidatorid="valName"runat="server"ControlToValidate="Text_p_name" ErrorMessage="[条 目名称]必须输入!" Font-Size="X-Small">*</asp:requiredfieldvalidator>
</td>
</tr>
<tr>
<td align="right" valign="top">公告内容:</td>
<td>
<asp:TextBox ID="txtContent"TextMode="MultiLine"runat="server"Rows="12"Columns="80" width="100%" />
</td>
</tr>
<tr>
<td colspan="2">
<table width="100%">
<tr>
<td bgcolor="#f5f5f5" height="30" align="center">
<input type="button" value="提交" id="commit" runat="server" onserverclick="commit_ServerClick" />
<input type="button" value="取消" id="cancle" runat="server" onserverclick="cancle_ServerClick" />
</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
(4)、在.cs文件里添加如下两个方法:
public void commit_ServerClick(object sender, System.EventArgs e)
{
//提交代码,自己写吧
}
public void cancle_ServerClick(object sender, System.EventArgs e)
{
//取消代码,也得你自己写
}
(5)、OK,Ctrl+F5运行下程序,文本编辑器出来了,效果还不错如图,如下链接地址: