關於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