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

简介: 以下部分是从网上拷贝的介绍资料:xhEditor is a simple,small,fast WYSWYG(What You See What You Get) XHTML editor based by jQuery.

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

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(特点):

最近在一个项目中用到此文本编辑器,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

相关文章
|
JavaScript 算法 前端开发
jQuery第二天,笔记总结(二)
jQuery第二天,笔记总结(二)
92 0
jQuery第二天,笔记总结(二)
|
移动开发 缓存 JavaScript
jQuery第二天,笔记总结(一)
jQuery第二天,笔记总结
83 0
jQuery第二天,笔记总结(一)
|
JavaScript 前端开发
jQuery第一天,笔记总结(二)
jQuery第一天,笔记总结(二)
140 0
jQuery第一天,笔记总结(二)
|
存储 JavaScript 前端开发
jQuery第一天,笔记总结(一)
jQuery第一天,笔记总结
145 0
jQuery第一天,笔记总结(一)
|
JavaScript 前端开发
jQuery中的一些基本操作总结
jQuery中的一些基本操作总结
120 0
jQuery中的一些基本操作总结
|
JavaScript 数据安全/隐私保护 索引
jQuery选择器总结(选择器+元素筛选)
jQuery选择器总结(选择器+元素筛选)
208 0
|
JavaScript
jquery获取第几个元素的方法总结
jquery获取第几个元素的方法总结
340 0
|
JavaScript
《锋利的jquery》认识jquery总结
《锋利的jquery》认识jquery总结
85 0
|
前端开发 JavaScript
web前端技能方法总结(css、js、jquery、html)(30)
web前端技能方法总结(css、js、jquery、html)
128 0
|
前端开发 JavaScript
web前端技能方法总结(css、js、jquery、html)(29)
web前端技能方法总结(css、js、jquery、html)
111 0