关于Jquery 编辑器 xhEditor的使用总结

以下部分是从网上拷贝的介绍资料：

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运行下程序，文本编辑器出来了，效果还不错如图,如下链接地址：

 

 http://hi.csdn.net/space-95339-do-album-picid-482512.html