关于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。

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可视化编辑解决方案，在您获得安全高效代码存储的同时，又能享受可视化编辑的便捷

默认模式：

最近在一个项目中用到此文本编辑器，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运行下程序，文本编辑器出来了，效果还不错如图,如下链接地址：