开发者社区> 暖枫无敌> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Dynatable – 基于 HTML5 & jQuery 的交互表格插件
  Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5 和 JSON 实现。Dynatable 的目的是提供一种简单的、可扩展的 API,能够轻松的浏览和操作大规模的数据集。
1227 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1062 0
jquery插件整理篇(七)表格插件
(1)Flexigrid Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
899 0
推荐18款非常棒的 jQuery 表格插件
  我们一般都是用HTML表格来显示结构化数据,如今有很多的 jQuery 表格插件可以帮助我们更好的组织和控制表格数据,增强表格的功能和操作。今天要与大家分享的是18个非常优秀的 jQuery 表格插件,有用到朋友可以参考一下。
1344 0
+关注
625
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载