ueditor百度富文本編輯器使用解決方案

寫網站的時候都是用asp.net2.0寫的

但是看了百度的富文本編輯器使用說明都是。net framework 4.0 版本的

百度了半天看的各種的解決方案

我把最新版本的百度富文本編輯器下載下來 改了.sln 文件信息 可以用vs2008打開 當然會報一些錯誤 。。類名不存在等等

百度了半天還是沒解決問題后來放棄了。（最終還是用了百度的）

於是就找了kindeditor但是覺得他長得有點丑。。還是放棄了

又接着百度ueditor配置方法看到了一篇博文

http://blog.sina.com.cn/s/blog_55b0c6470100y8kp.html

百度編輯器 ueditor1.1.8.1 For Asp.net 配置 上傳功能詳解

讓我恍然大悟 因為開始的解決方案是如何讓最新版本的 在.net framework2.0上部署 為什么不換個思路低版本的在。net framework上部署呢

好了不說感悟了大致過程和上面博主寫的差不錯我說一下配置過程中的細節

1.當然是下載文件了

2 新建ueditor文件夾 將下載的文件粘貼進來如圖所示目錄結構

3.接下來修改dialogs/image/image.html

    url:'../../server/upload/net/up.ashx', // 上傳處理頁面的url地址

 4在server/upload/net/下新建up.ashx一般處理程序用來處理上傳過來的圖片

   up.ashx

 

using System;
using System.Collections;
using System.Data;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.IO;

namespace 編輯器.ueditor.server.upload.net
{
    /// <summary>
    /// $codebehindclassname$ 的摘要說明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class up : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            string uploadPath = "UserFiles/UEditorUploads";   //保存路徑
            string fileType = ".jpg,.jpeg,.gif,.png,.bmp";   //文件允許格式
            int fileSize = 2048;    //文件大小限制，單位KB
            string state = "";
            string sFileName = "";
            string retPath = "";
            HttpPostedFile oFile = context.Request.Files[0];
            string pictitle = context.Request.Form["pictitle"];  //獲得圖片描述
            string fileExtension = System.IO.Path.GetExtension(oFile.FileName).ToLower();
            if (fileType.ToLower().IndexOf(fileExtension) > -1 && IsAllowedExtension(oFile))//檢測是否為允許的上傳文件類型
            {
                if (fileSize * 1024 >= oFile.ContentLength)
                {
                    try
                    {
                        string DirectoryPath;
                        // 取消下面注釋按文件夾歸檔儲存
                        //DirectoryPath = uploadPath + DateTime.Now.ToString("yyyy-MM");
                        DirectoryPath = uploadPath;
                        sFileName = DateTime.Now.ToString("yyyyMMddHHmmssffff");  //文件名稱
                        //生成隨機數，避免時間完全相同上傳
                        Random rnd = new Random();
                        int numSJ = rnd.Next(1000, 9999);
                        sFileName = sFileName + Convert.ToString(numSJ);
                        string FullPath = "~/" + DirectoryPath + "/" + sFileName + fileExtension;//最終文件路徑
                        if (!Directory.Exists(context.Server.MapPath("~/" + DirectoryPath)))
                            Directory.CreateDirectory(context.Server.MapPath("~/" + DirectoryPath));
                        oFile.SaveAs(context.Server.MapPath(FullPath));
                        //Response.Write("parent.reloadImg(‘" + Page.ResolveUrl(FullPath) + "‘);" + "location.href=‘upload.aspx?url=" + Page.ResolveUrl(FullPath) + "‘;");
                        //string retPath = "/" + DirectoryPath + "/" + sFileName + fileExtension;
                        retPath = sFileName + fileExtension;
                        state = "SUCCESS";
                    }
                    catch (Exception ex)
                    {
                        //Response.Write("上傳文件失敗。" + ex.Message);
                        //MessageBox.ShowAndRedirect(this, "上傳文件失敗。" + ex.Message, "upload.aspx");
                        state = "上傳文件失敗," + ex.Message;
                    }
                }
                else
                {
                    state = "上傳文件大小超過限制";
                }
            }
            else
            {
                state = "上傳文件擴展名是不允許的擴展名";
            }
            //返回上傳信息
            context.Response.Write("{'url':'" + retPath + "','title':'" + pictitle + "','state':'" + state + "'}");
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
        /// <summary>
        /// C#檢測真實文件類型函數
        /// </summary>
        /// <param name="hifile"></param>
        /// <returns></returns>
        private bool IsAllowedExtension(HttpPostedFile hifile)
        {
            bool ret = false;
            System.IO.Stream fs = hifile.InputStream;
            System.IO.BinaryReader r = new System.IO.BinaryReader(fs);
            string fileclass = "";
            byte buffer;
            try
            {
                buffer = r.ReadByte();
                fileclass = buffer.ToString();
                buffer = r.ReadByte();
                fileclass += buffer.ToString();
            }
            catch
            {
                return false;
            }
            //r.Close();
            //fs.Close();

            //String[] fileType = { "255216", "7173", "6677", "13780", "8297", "5549", "870", "87111", "8075" };
            //純圖片
            String[] fileType = {
            "7173",    //gif
            "255216",  //jpg
            "13780",   //png
            "6677"     //bmp
        };
            for (int i = 0; i < fileType.Length; i++)
            {
                if (fileclass == fileType[i])
                {
                    ret = true;
                    break;
                }
            }
            return ret;
        }
    }
}

5 修改ueditor/editor_config.js
  

(function () {
    //這里你可以配置成ueditor目錄在您網站中與根目錄之間的相對路徑或者絕對路徑（指以http開頭的絕對路徑）
    //window.UEDITOR_HOME_URL可以在外部配置，這里就不用配置了
    //場景：如果你有多個頁面使用同一目錄下的editor,因為路徑不同，所以在使用editor的頁面上配置這個路徑寫在這個js外邊
    //var URL = window.UEDITOR_HOME_URL || '../';
    var tmp = window.location.pathname,
    //   URL= tmp.substr(0,tmp.lastIndexOf("\/")+1).replace("_examples/","");//這里你可以配置成ueditor目錄在您網站的相對路徑或者絕對路徑（指以http開頭的絕對路徑）
     URL = "ueditor" //該值與第二步新建的文件夾同名
    UEDITOR_CONFIG = {
    imagePath:"UserFiles/UEditorUploads/", //圖片文件夾所在的路徑，用於顯示時修正后台返回的圖片url！具體圖片保存路徑需要在后台設置。！important
        compressSide:0, //等比壓縮的基准，確定maxImageSideLength參數的參照對象。0為按照最長邊，1為按照寬度，2為按照高度
        maxImageSideLength:900, //上傳圖片最大允許的邊長，超過會自動等比縮放,不縮放就設置一個比較大的值
        relativePath:true,      //是否開啟相對路徑。開啟狀態下所有本地圖片的路徑都將以相對路徑形式進行保存.強烈建議開啟！

        catcherUrl:"getImage.php",             //處理遠程圖片抓取的程序地址
        UEDITOR_HOME_URL:URL, //為editor添加一個全局路徑

 6 test.aspx 測試文件

  ValidateRequest="false"必須有這段代碼 因為asp.net界面提交信息時是不允許輸入html javascript代碼為了防止腳本注入攻擊

<%@ Page Language="C#"  ValidateRequest="false"  AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="編輯器.test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title>Ueditor測試</title>
	<meta  http-equiv="X-UA-Compatible" content="IE=5"/>
        <!-- 功能：解決兼容性視圖問題-->
<script src="ueditor/editor_config.js" type="text/javascript"></script>

<script src="ueditor/editor_all.js" type="text/javascript"></script>

<link href="ueditor/themes/default/ueditor.css" rel="stylesheet" type="text/css"/>

</head>

<body>

<form id="form1" runat="server">

<div id="editorValuedata" runat="server"  style="display:none;"><font color="gray">文明上網，從你我做起</font></div>

<div name="editorValue" runat="server" id="editorValue"></div>

<asp:Button ID="btnSubmit" runat="server" Text="點擊我一下告訴你提交的內容" 

onclick="btnSubmit_Click"/>

</form>


<script type="text/javascript">

    var editor = new baidu.editor.ui.Editor({//實例化編輯器

        UEDITOR_HOME_URL: 'ueditor/',

        iframeCssUrl: 'ueditor/themes/default/iframe.css'

    });

    editor.render('editorValue'); //將編譯器渲染到容器

    editor.setContent(document.getElementById('editorValuedata').innerHTML); //設置初始值，你可以將初始值放到<div id="editorValuedata" style="display:none"></div>內

  //  document.getElementById('editorValuedata').innerHTML = "";

</script>

</body>
</html>

 test.aspx后台代碼 如何獲取前台的值

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

namespace 編輯器
{
    public partial class test : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {

            }
        }

        ///<summary>
        /// 獲取提交的內容
        ///</summary>
        ///<param name="sender"></param>
        ///<param name="e"></param>
        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            string str = this.editorValue.InnerHtml;
            //測試獲取編輯文本的值
            string str1 = Request.Params["editorValue"].ToString();
            ClientScript.RegisterClientScriptBlock(this.GetType(), "s", "alert('" + str1 + "')", true);
            this.editorValuedata.InnerHtml = str1;
        }
    }
}

 OK了