xheditor文字編輯器的簡單實用介紹

暖楓無敵發表於2011-09-05
一、下載最新的xheditor檔案包：http://download.csdn.net/source/3574826

二、在aspx頁面同目錄下，放置一個upload.aspx（單頁面模型）檔案
<%@ Page Language="C#" AutoEventWireup="true" CodePage="65001" %>
<%@ Import namespace="System" %>
<%@ Import namespace="System.Collections" %>
<%@ Import namespace="System.Configuration" %>
<%@ Import namespace="System.Data" %>
<%@ Import namespace="System.Web" %>
<%@ Import namespace="System.Web.Security" %>
<%@ Import namespace="System.Web.UI" %>
<%@ Import namespace="System.Web.UI.HtmlControls" %>
<%@ Import namespace="System.Web.UI.WebControls" %>
<%@ Import namespace="System.Web.UI.WebControls.WebParts" %>

<script runat="server">
    /*
 * upload demo for c# .net 2.0
 *
 * @requires xhEditor
 * @author Jediwolf<jediwolf@gmail.com>
 * @licence LGPL(http://www.opensource.org/licenses/lgpl-license.php)
 *
 * @Version: 0.1.3 (build 100504)
 *
 * 注1：本程式僅為演示用，請您務必根據自己需求進行相應修改，或者重開發
 * 注2：本程式將HTML5上傳與普通POST上傳轉換為byte型別統一處理
 *
 */

protected void Page_Load(object sender, EventArgs e)
{
    Response.Charset = "UTF-8";

    // 初始化一大堆變數
    string inputname = "filedata";//表單檔案域name
    string attachdir ="../upload";     // 上傳檔案儲存路徑，結尾不要帶/
    int dirtype = 1;                 // 1:按天存入目錄 2:按月存入目錄 3:按副檔名存目錄  建議使用按天存
    int maxattachsize = 2097152;     // 最大上傳大小，預設是2M
    string upext = "txt,rar,zip,jpg,jpeg,gif,png,swf,wmv,avi,wma,mp3,mid";    // 上傳副檔名
    int msgtype = 2;                 //返回上傳引數的格式：1，只返回url，2，返回引數陣列
    string immediate = Request.QueryString["immediate"];//立即上傳模式，僅為演示用
    byte[] file;                     // 統一轉換為byte陣列處理
    string localname = "";
    string disposition = Request.ServerVariables["HTTP_CONTENT_DISPOSITION"];

    string err = "";
    string msg = "''";
    
    if (disposition != null)
    {
        // HTML5上傳
        file = Request.BinaryRead(Request.TotalBytes);
        localname = Regex.Match(disposition, "filename=\"(.+?)\"").Groups[1].Value;// 讀取原始檔名
    }
    else
    {        
        HttpFileCollection filecollection = Request.Files;
        HttpPostedFile postedfile = filecollection.Get(inputname);

        // 讀取原始檔名
        localname = postedfile.FileName;
        // 初始化byte長度.
        file = new Byte[postedfile.ContentLength];
        
        // 轉換為byte型別
        System.IO.Stream stream = postedfile.InputStream;
        stream.Read(file, 0, postedfile.ContentLength);
        stream.Close();

        filecollection = null;
    }
    
    if (file.Length == 0)err = "無資料提交";
    else
    {
        if (file.Length > maxattachsize)err = "檔案大小超過" + maxattachsize + "位元組";
        else
        {
            string attach_dir, attach_subdir, filename, extension, target;

            // 取上載檔案字尾名
            extension = GetFileExt(localname);
            
            if (("," + upext + ",").IndexOf("," + extension + ",") < 0)err = "上傳副檔名必需為：" + upext;
            else
            {
                switch (dirtype)
                {
                    case 2:
                        attach_subdir = "month_" + DateTime.Now.ToString("yyMM");
                        break;
                    case 3:
                        attach_subdir = "ext_" + extension;
                        break;
                    default:
                        attach_subdir = "day_" + DateTime.Now.ToString("yyMMdd");
                        break;
                }
                attach_dir = attachdir + "/" + attach_subdir + "/";

                // 生成隨機檔名
                Random random = new Random(DateTime.Now.Millisecond);
                filename = DateTime.Now.ToString("yyyyMMddhhmmss") + random.Next(10000) + "." + extension;

                target = attach_dir + filename;
                try
                {
                    CreateFolder(Server.MapPath(attach_dir));

                    System.IO.FileStream fs = new System.IO.FileStream(Server.MapPath(target), System.IO.FileMode.Create, System.IO.FileAccess.Write);
                    fs.Write(file, 0, file.Length);
                    fs.Flush();
                    fs.Close();
                }
                catch (Exception ex)
                {
                    err = ex.Message.ToString();
                }

                // 立即模式判斷
                if (immediate == "1") target = "!" + target;
                target=jsonString(target);
                if(msgtype==1)msg = "'"+target+"'";
                else msg = "{'url':'" + target + "','localname':'" + jsonString(localname) + "','id':'1'}";
            }
        }
    }

    file = null;
    
    Response.Write("{'err':'" + jsonString(err) + "','msg':" + msg + "}");
}


string jsonString(string str)
{
    str = str.Replace("\\", "\\\\");
    str = str.Replace("/", "\\/");
    str = str.Replace("'", "\\'");
    return str;
}


string GetFileExt(string FullPath)
{
    if (FullPath != "")return FullPath.Substring(FullPath.LastIndexOf('.') + 1).ToLower();
    else return "";
}

void CreateFolder(string FolderPath)
{
    if (!System.IO.Directory.Exists(FolderPath))System.IO.Directory.CreateDirectory(FolderPath);
}
    
</script>




三、在需要使用文字編輯器的頁面aspx中新增下載的xheditor檔案中包含的js，具體如下：

在<head></head>標籤內，增加如下內容：

   
<script src="../Scripts/xheditor-1.1.9/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>

    <script src="../Scripts/xheditor-1.1.9/xheditor_plugins/ubb.min.js" type="text/javascript"></script>

    <script src="../Scripts/xheditor-1.1.9/xheditor-1.1.9-zh-cn.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
            $('#tbtmpContent').xheditor({
                upLinkUrl: "upload.aspx", upLinkExt: "zip,rar,txt",
                upImgUrl: "upload.aspx", upImgExt: "jpg,jpeg,gif,png,bmp",
                upFlashUrl: "upload.aspx", upFlashExt: "swf",
                upMediaUrl: "upload.aspx", upMediaExt: "wmv,avi,wma,mp3,mid",
                shortcuts: { 'ctrl+enter': submitForm }
            });
        });
        function submitForm() { $('#form1').submit(); }
    </script>




在form內新增一個Mode為MultiLine的文字控制元件，注意這個ID和上面jquery函式的那個名稱。

 
<asp:TextBox ID="tbtmpContent" TextMode="MultiLine" BorderWidth="0" runat="server"  Width="100%" CssClass="inputc" Height="250px"></asp:TextBox>






相關文章