第一步:从官网下载相关文件 百度搜索“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的朋友还比较青睐使用各种标签堆砌关键词。这里不讨论利弊,但用户的需求就是我们吃饭的本钱,做过实际项目的朋友都有体会。