zoukankan      html  css  js  c++  java
  • 在 VS2013的ASPNET站点开发中用 xheditor v1.1.13 作为HTML编辑器

    要用vs2013开发一个博客站点,.net   framework  4,须要一个HTML编辑器作为写文章的工具。经多方试用,排除了dotnettextbox、kceditor。认为xheditor 不错,现将用法记录例如以下:

    1.到http://download.csdn.net/download/chenhaoying/4274663下载,会得到一个名为:“xheditor-1.1.13在asp.net中使用.rar”的文件。

    2.用vs2013新建一个站点,站点名不论什么,此例为Test4hxEditor.例如以下图。


    3.将xheditor-1.1.13在asp.net中使用.rar 文件里的xheditor_emot、xheditor_skin两个目录及xheditor-1.1.13-zh-cn.min.js、jquery-1.4.4.min.js两个文件解压到上站点所在的目录“d:快盘Test4hxEditor”内。

    4.在vs2013内为TestfhxEditor加入一个Web窗口,此例中名为Default。

    5.在vs2013内打开Default.aspx文件,改动例如以下,当中粗体显示的为改动添加的内容。例如以下所看到的:

    <pre name="code" class="plain"><%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="xheditor-1.1.13-zh-cn.min.js"></script>
        <script type ="text/javascript">
            $(document).ready(function () {
                $('#elm1').xheditor({ tools: 'GStart,Fontface,FontSize,Blocktag,Bold,Italic,Underline,Strikethrough,FontColor,BackColor,Removeformat,Separator,Align,List,Outdent,Indent,Separator,Cut,Copy,Paste,Pastetext,Separator,Link,Unlink,Img,Emot,Table,Separator,About,GEnd', skin: 'default', showBlocktag: false, internalScript: false, internalStyle: false,  600, height: 300, loadCSS: 'http://xheditor.com/test.css', fullscreen: false, sourceMode: false, forcePtag: true, upImgUrl: "pictures", upImgExt: "jpg,jpeg,gif,png" });
            });
        </script> 
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <textarea runat="server" id="elm1" name="content" rows="20" cols="100"></textarea>
                 <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                 <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        </div>
        </form>
    </body>
    </html>


    
    
    
    

    6.将Default.aspx设计视图下,双击当中的"Button"button,进入Default.aspx.cs文件的编辑界面,并将其编辑为例如以下所看到的:


    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = elm1.Value;
        }
    }


    7.在vs2013内打开Web.config文件,改动成例如以下:


    <?xml version="1.0" encoding="utf-8"?>
    <configuration>
        <system.web>
          <compilation debug="true" targetFramework="4.0" />
          <httpRuntime requestValidationMode="2.0" />
        </system.web>
    </configuration>


    8.执行站点。出现一个编辑器,在当中输入内容并编辑,完毕后单击按"Button"button,可将所编辑的内容传给label1。例如以下图所看到的。




    至此,xheditor 已基本可用,至于图片上传的功能,參见 http://blog.csdn.net/u010966077/article/details/23653919


  • 相关阅读:
    (14)python函数与变量
    ①③python中的字符串与字符编码
    ①②python文件操作及文件增删改查
    rsa公钥私钥
    MySQL创建数据库和表
    Rsync + Innotify 部署实例
    LNMPT部署示例
    Nginx 调优
    Nginx 二进制方式安装
    wget & curl 命令
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/4372385.html
Copyright © 2011-2022 走看看