百度编辑器 ueditor1.1.8.1 For Asp.net 配置 上传功能详解



第一步：从官网下载相关文件 百度搜索“UEditor”

————————————————————————————————————————————

第二步：将下载的文件解压之后放到自己的项目中。编辑器出问题一般都是和路径有关的，如图：

————————————————————————————————————————————
第三步：配置editor_config.js

URL和imagePath皆使用根目录开始的方式，这样可以避免不同的调用页路径混乱的现象。

URL：编辑器路径，因为这里直接把编辑器放在项目根目录了。

imagePath：用户上传图片时，图片保存的路径，具体在JS文件中的注视已经很清楚了。

————————————————————————————————————————————

第四步：让编辑器在浏览器上显示出来。如图：

这里使用了隐藏控件在后台给编辑器赋值的方式。

样式表和JS的引用如下图：

接下来就让我们看下效果图吧！！！




————————————————————————————————————————————
第五步：上传功能

首先，确保imagePath上传目录的正确后添加Asp.net的上传配置文件，如下图：

其次，编辑up.ashx.cs文件：

【——up.ashx.cs——】

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;

namespace PLA93303MainWebsite.UEditor.server.upload.net
{
    /// <summary>
    /// UEditor For Asp.net 上传功能
    /// </summary>
    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;
        }
    }
}

 

文件上传功能不仅仅是检测了后缀名，还用C#检测真实文件类型，更确保文件的安全性。

最后，需要修改一下dialogs\image里的image.html文件，修改位置如下图：

【路径】

【image.html】

把上传处理页面修改为刚才配置的功能页面就可以了。
————————————————————————————————————————————
第六步：在根目录下新建一个UserFiles/UEditorUploads路径的文件夹保存上传的图片。到此为止百度编辑器配置完毕。

同时上传3张图片，前两张是不同格式的，后一张是WORD文件修改后缀名为.JPG的文件，程序会成功阻止非图片文件上传，却不影响真实图片上传。

 

这里需要提到，有些朋友配置Asp.net上传功能的时候使用了WEB应用程序页面，也就是.ASPX，那样也是可以的，但需要注意.ASPX页面不能有前台显示的任何内容，必须为空。如果不为空Response.Write("{'url':'" + retPath + "','title':'" + sFileName + "','state':'" + state + "'}");就输出给用户了，编辑器是无法取到state中的值来判断文件是否上传成功的。所以看到了网上不少人出现了上传图片成功，编辑器不显示图片的效果。

————————————————————————————————————————————

 

插入图片生成alt标签

1、首先，打开以下路径的editor_all.js文件

2、其次，找到插入图片，操作图片的对齐方式方法

细心的朋友已经发现我把行号也截图了，具体的修改代码如下：

4434行：

(ci.title?' title="'+ci.title+'" alt="'+ci.title+'"':'') + ' border="'+ (ci.border||0) + '" hspace = "'+(ci.hspace||0)+'" vspace = "'+(ci.vspace||0)+'" />';

4447行：

(ci.title?' title="'+ci.title+'" alt="'+ci.title+'"':'') + ' /></p>';

3、最后，把修改好的editor_all.js文件文件转成editor_all_min.js文件进行调用就可以了。这里也可以省略此步骤，但需要注意调用文件的改变。相差一倍的大小呢，还是用editor_all_min.js文件对系统更优化。

 

————————————————————————————————————————————

 

这里想吐槽一下，刚开始为了省事直接问了ueditor讨论群3里的编辑器二次开发，他居然问我懂不懂title和alt的区别，告诉我：

“title是图片的标题 alt也是图片的标题，只是在极少数的浏览器里不认title，而使用了alt，你完全可以当做这两个没有区别。”

希望大家不要误导，因为在实际项目中不但效果完全不同，用户的需求也会变幻莫测。

首先我们看看效果，如下图：

在图片不能正常显示或用户屏蔽图片加载时，alt标签是明文显示的，起到提示用户当前位置的站位信息。

个别用户反而觉得title标签在鼠标经过时遮盖图片，影响图片效果，降低UEO。

两者的区别是显而易见的，另外喜欢SEO的朋友还比较青睐使用各种标签堆砌关键词。这里不讨论利弊，但用户的需求就是我们吃饭的本钱，做过实际项目的朋友都有体会。