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

時間 2019-11-10

標籤 ueditor 百度文本編輯器使用解決方案简体版

原文原文鏈接

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

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

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

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

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

因而就找了kindeditor可是以爲他長得有點醜。。仍是放棄了asp.net

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

http://blog.sina.com.cn/s/blog_55b0c6470100y8kp.html編輯器

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

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

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

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了