Ueditor配置及在專案中的使用
阿新 • • 發佈：2019-01-07
簡單介紹了Ueditor的兩種定製方式，想了解的請戳這裡：Ueditor的兩種定製方式。在專案中，Ueditor該怎麼使用更方便呢？很容易讓人想到將ueditor放入使用者控制元件頁，可以拖到需要的地方。
Ueditor結構
Ueditor使用步驟
一，修改配置檔案ueditor.config.js，配置Ueditor路徑上傳圖片的路徑配置。這裡將上傳的檔案放入網站根目錄Upload資料夾下，修改配置檔案，將修正地址改為URL+“../”1 window.UEDITOR_HOME_URL = "/Ueditor/";//"相對於網站根目錄的相對路徑"也就是以斜槓開頭的形如"/myProject/ueditor/"這樣的路徑。 2 var URL = window.UEDITOR_HOME_URL || getUEBasePath();//獲取Ueditor的路徑 3 //測試用 如果不知道路徑是什麼可以通過alert來測試 4 //alert("URL:" + URL); 5 //alert("window.UEDITOR_HOME_URL:" + window.UEDITOR_HOME_URL); 6 //alert("getUEBasePath():" + getUEBasePath());
同時修改Uploader.cs類檔案，新增“~/”, 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轉存表單名若此處修改，需要在後臺對應檔案修改對應引數
1 pathbase = pathbase + DateTime.Now.ToString("yyyy-MM-dd") + "/";
2 uploadpath = cxt.Server.MapPath("~/"+pathbase);//獲取檔案上傳路徑 二，新建Ueditor.ascx使用者控制元件頁。/// <summary> /// Config 的摘要說明 /// </summary> public class Config { public static string[] ImageSavePath = new string[] { "Upload" }; }
1.引入需要的js檔案
1 <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Ueditor.ascx.cs" Inherits="Wolfy.UeditorDemo.UC.Ueditor" %>
2 <script type="text/javascript" src="../Ueditor/ueditor.config.js"></script>
3 <script type="text/javascript" src="../Ueditor/ueditor.all.js"></script>
4 <script type="text/javascript" src="../Ueditor/lang/zh-cn/zh-cn.js"></script><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>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中即可。
1 <httpRuntime requestValidationMode="2.0" maxRequestLength="102400 "/>
2 <pages validateRequest="false" controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID"></pages>
3 <globalization fileEncoding="utf-8" requestEncoding="utf-8" responseEncoding="utf-8" culture="zh-CN"/> protected void btnSave_Click(object sender, EventArgs e)
2 {
3 //獲取ueditor內容
4 string content = Server.HtmlEncode(Request.Form[MyUeditor.EditorName]);
5 Response.Write(Server.HtmlDecode(content));
6 }結果
ueditor的賦初值
比如在寫隨筆的時候，編輯功能的實現，就是這種將資料庫中存的內容，重新填入編輯器，編輯後然後儲存。這裡，由於lz電腦重灌系統後，sql一直安裝不上就不再測試了。
已經將該實現封裝在使用者控制元件的cs中了，可以直接將得到的htmlencode字串賦給SetContents屬性即可。
1 //可以通過下面的設定 實現編輯功能 2 MyUeditor.SetContents = "";
總結
Ueditor在使用的時候，路徑確實是很頭疼的問題，這裡將其放入使用者控制元件頁，也是使用方便的一種途徑。