Ueditor配置及在項目中的使用

引言

上篇中簡單介紹了Ueditor的兩種定制方式，想了解的請戳這里：Ueditor的兩種定制方式。在項目中，Ueditor該怎么使用更方便呢？很容易讓人想到將ueditor放入用戶控件頁，可以拖到需要的地方。

Ueditor結構

Ueditor使用步驟

一，修改配置文件ueditor.config.js，配置Ueditor路徑

 window.UEDITOR_HOME_URL = "/Ueditor/";//"相對於網站根目錄的相對路徑"也就是以斜杠開頭的形如"/myProject/ueditor/"這樣的路徑。
    var URL = window.UEDITOR_HOME_URL || getUEBasePath();//獲取Ueditor的路徑
    //測試用 如果不知道路徑是什么可以通過alert來測試
    //alert("URL:" + URL);
    //alert("window.UEDITOR_HOME_URL:" + window.UEDITOR_HOME_URL);
    //alert("getUEBasePath():" + getUEBasePath());

上傳圖片的路徑配置。這里將上傳的文件放入網站根目錄Upload文件夾下，修改配置文件，將修正地址改為URL+“../”

, imagePath: URL + "../"                     //圖片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
        //,imageFieldName:"upfile"                   //圖片數據的key,若此處修改，需要在后台對應文件修改對應參數
        //,compressSide:0                            //等比壓縮的基准，確定maxImageSideLength參數的參照對象。0為按照最長邊，1為按照寬度，2為按照高度
        //,maxImageSideLength:900                    //上傳圖片最大允許的邊長，超過會自動等比縮放,不縮放就設置一個比較大的值，更多設置在image.html中
        , savePath: ['Upload']//['UploadFile', 'upload2', 'upload3']      //圖片保存在服務器端的目錄， 默認為空， 此時在上傳圖片時會向服務器請求保存圖片的目錄列表，
        // 如果用戶不希望發送請求， 則可以在這里設置與服務器端能夠對應上的目錄名稱列表
        //比如： savePath: [ 'upload1', 'upload2' ]

        //塗鴉圖片配置區
        , scrawlUrl: URL + "net/scrawlUp.ashx"           //塗鴉上傳地址
        , scrawlPath: URL + "../"                            //圖片修正地址，同imagePath

        //附件上傳配置區
        , fileUrl: URL + "net/fileUp.ashx"               //附件上傳提交地址
        , filePath: URL + "../"                   //附件修正地址，同imagePath
        //,fileFieldName:"upfile"                    //附件提交的表單名，若此處修改，需要在后台對應文件修改對應參數

        //遠程抓取配置區
        //,catchRemoteImageEnable:true               //是否開啟遠程圖片抓取,默認開啟
        , catcherUrl: URL + "net/getRemoteImage.ashx"   //處理遠程圖片抓取的地址
        , catcherPath: URL + "../"                  //圖片修正地址，同imagePath
        //,catchFieldName:"upfile"                   //提交到后台遠程圖片uri合集，若此處修改，需要在后台對應文件修改對應參數
        //,separater:'ue_separate_ue'               //提交至后台的遠程圖片地址字符串分隔符
        //,localDomain:[]                            //本地頂級域名，當開啟遠程圖片抓取時，除此之外的所有其它域名下的圖片都將被抓取到本地,默認不抓取127.0.0.1和localhost

        //圖片在線管理配置區
        , imageManagerUrl: URL + "net/imageManager.ashx"       //圖片在線管理的處理地址
        , imageManagerPath: URL + "../"                                    //圖片修正地址，同imagePath

        //屏幕截圖配置區
        , snapscreenHost: location.hostname                                 //屏幕截圖的server端文件所在的網站地址或者ip，請不要加http://
        , snapscreenServerUrl: URL + "net/imageUp.ashx" //屏幕截圖的server端保存程序，UEditor的范例代碼為“URL +"server/upload/net/snapImgUp.ashx"”
        , snapscreenPath: URL + "../"
        , snapscreenServerPort: location.port                                   //屏幕截圖的server端端口
        //,snapscreenImgAlign: ''                                //截圖的圖片默認的排版方式

        //word轉存配置區
        , wordImageUrl: URL + "net/imageUp.ashx"             //word轉存提交地址
        , wordImagePath: URL + "../"                       //
        //,wordImageFieldName:"upfile"                     //word轉存表單名若此處修改，需要在后台對應文件修改對應參數

同時修改Uploader.cs類文件，添加“~/”

 pathbase = pathbase + DateTime.Now.ToString("yyyy-MM-dd") + "/";
 uploadpath = cxt.Server.MapPath("~/"+pathbase);//獲取文件上傳路徑 

Config.cs類

/// <summary>
/// Config 的摘要說明
/// </summary>
public class Config
{
    public static string[] ImageSavePath = new string[] { "Upload" };
}

二，新建Ueditor.ascx用戶控件頁。
1.引入需要的js文件

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Ueditor.ascx.cs" Inherits="Wolfy.UeditorDemo.UC.Ueditor" %>
<script type="text/javascript" src="../Ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="../Ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="../Ueditor/lang/zh-cn/zh-cn.js"></script>

2.添加editor容器，並實例化uditor

<link href="/Ueditor/themes/default/css/ueditor.css" rel="stylesheet" />
<div id='myEditor' runat="server"></div>
<script type="text/javascript" charset="utf-8">
    window.onload = function () {
        UE.ui.Editor({
            //這部分配置 在ueditor.config.js配置文件中，放在這里是希望可以在Ueditor.ascx.cs中可以動態設置。可以將動態配置的功能在這里設置
            wordCount: '<%=WordCount?"true":"false"%>'
            , maximumWords: '<%=MaximumWords%>'
            , wordCountMsg: '<%=WordCountMsg%>'
            , wordOverFlowMsg: '<%=WordOverFlowMsg%>'
            , initialContent: '<%=SetContents %>'
        }).render("<%=myEditor.ClientID%>");
    }
</script>

3，Ueditor.ascx.cs代碼，設置常用屬性，這樣就可以在引入用戶控件的頁面，動態的設置屬性了。

 public partial class Ueditor : System.Web.UI.UserControl
    {
        public Ueditor()
        {
            style = new System.Text.StringBuilder();
        }
        private string setContents;
        /// <summary>
        /// 給文本賦值 需html解碼
        /// </summary>
        public string SetContents
        {
            get
            { return setContents; }
            set
            {
                setContents = Server.HtmlDecode(value);
            }
        }
        private string editorName;
        /// <summary>
        /// 返回文本編輯內容
        /// </summary>
        public string EditorName
        {
            get
            {
                return editorName;
            }
            set
            {
                editorName = value;
                if (value == "")
                {
                    //默認值
                    editorName = "editorValue";
                }
            }
        }
        private bool isHide;
        ///<summary>
        ///控件是否隱藏
        ///</summary>
        public bool IsHide
        {
            get { return isHide; }
            set
            {
                isHide = value;

                if (isHide)
                {
                    style.Append("display:none;");
                }
                else
                {
                    style.Append("display:block;");
                }
            }
        }
        /// <summary>
        /// 設置高度
        /// </summary>
        public string Height { get; set; }
        /// <summary>
        /// 設置寬度
        /// </summary>
        public string Width { get; set; }
        ///<summary>
        ///設置相對路徑
        ///</summary>
        public string EditorPath { get; set; }
        private bool wordCount = false;
        /// <summary>
        /// 是否開啟字數統計
        /// </summary>
        public bool WordCount
        {
            get { return wordCount; }
            set { wordCount = value; }
        }

        private int maximumWords = 100000;
        /// <summary>
        /// 允許的最大字符數
        /// </summary>
        public int MaximumWords
        {
            get { return maximumWords; }
            set { maximumWords = value; }
        }
        /// <summary>
        /// 字數統計提示
        /// </summary>
        public string WordCountMsg
        {
            get
            {
                return "當前已輸入 {#count} 個字符，您還可以輸入{#leave} 個字符";
            }
        }

        /// <summary>
        /// 超出字數限制提示
        /// </summary>
        public string WordOverFlowMsg
        {
            get
            {
                return "<span style=\"color:red;\">你輸入的字符個數已經超出最大允許值，服務器可能會拒絕保存！</span>";
            }
        }
        private System.Text.StringBuilder style = null;
        protected void Page_Load(object sender, EventArgs e)
        {
            // EditorPath = Request.ApplicationPath;
            if (string.IsNullOrEmpty(Height))
            {
                Height = "100px";
            }
            if (string.IsNullOrEmpty(Width))
            {
                Width = "100px";
            }
            style.Append("Width:" + Width + ";Height:" + Height + ";");
            AddStyle(style);
            //為富文本編輯器 添加name屬性 根據name得到 富文本內容 必須
            myEditor.Attributes.Add("name", this.EditorName);

        }
        /// <summary>
        ///  為用戶控件 添加樣式
        /// </summary>
        /// <param name="strStyle"></param>
        private void AddStyle(System.Text.StringBuilder strStyle)
        {
            if (string.IsNullOrEmpty(myEditor.Attributes["style"]))
            {
                myEditor.Attributes.Add("style", style.ToString());
            }
            else
            {
                myEditor.Attributes["style"] += style;
            }
        }
    }

測試

將用戶控件拖入Test.aspx頁面。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Wolfy.UeditorDemo.Test" %>

<%@ Register Src="UC/Ueditor.ascx" TagName="Ueditor" TagPrefix="wolfy" %>

<!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>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <wolfy:Ueditor ID="MyUeditor" runat="server" Width="600px" IsHide="false" Height="300px" EditorName="myEditor" />
        </div>
    </form>
</body>
</html>

結果：

 上傳圖片

需要將Uploader.cs和Config.cs的屬性中生成操作改為“內容”，還應注意路徑問題。

 選擇圖片單擊確定，就可以將圖片加入編輯器

 測試獲取編輯器內容，文字及圖片等信息。這里必須在web.config配置文件中取消校驗，因為獲取到的內容可能含有標簽，如果添加，則會出現如下黃頁錯誤

在ueditor/net/web.config中將下面的信息，復制到網站的web.config中即可。

    <httpRuntime requestValidationMode="2.0" maxRequestLength="102400 "/>
        <pages validateRequest="false" controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID"></pages>
        <globalization fileEncoding="utf-8" requestEncoding="utf-8" responseEncoding="utf-8" culture="zh-CN"/>

 測試：

   protected void btnSave_Click(object sender, EventArgs e)
        {
            //獲取ueditor內容
            string content = Server.HtmlEncode(Request.Form[MyUeditor.EditorName]);
            Response.Write(Server.HtmlDecode(content));
        }

結果

ueditor的賦初值

比如在寫隨筆的時候，編輯功能的實現，就是這種將數據庫中存的內容，重新填入編輯器，編輯后然后保存。這里，由於lz電腦重裝系統后，sql一直安裝不上就不再測試了。

已經將該實現封裝在用戶控件的cs中了，可以直接將得到的htmlencode字符串賦給SetContents屬性即可。

//可以通過下面的設置 實現編輯功能
            MyUeditor.SetContents = "";

總結

Ueditor在使用的時候，路徑確實是很頭疼的問題，這里將其放入用戶控件頁，也是使用方便的一種途徑。