使用UMeditor富文本编辑器上传图片

注：本文系做者原创，但可随意转载。

最近写本身的网站玩儿，写到博客的部分，打算使用UMeditor，由于以前也用过（可是好像没实现图片上传的功能），感受用起来还比较简单。

不过仍是折腾了一下午。。。遇到了不少问题，最麻烦的地方莫过于文档和实际代码不统一，致使文档的可信度大大下降，只能靠本身一步步跟踪调试。

好比，文档中js的配置文件给了两个节点 

{ "imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "imageUrlPrefix": "/myapp/ueditor/net/", }

可是实际下载下来的UMeditor代码的js配置文件中给的节点是，

//图片上传配置区

,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址
,imagePath:URL + "net/" //图片修正地址，引用了fixedImagePath,若有特殊需求，可自行配置
,imageFieldName:"upfile" //图片数据的key,若此处修改，须要在后台对应文件修改对应参数

 

 

问题1、

下载后，直接引用Umeditor，目录结构大体以下图，在ASP.NET MVC4项目中，把整个umeditor文件夹放在Scripts下。编辑博客的页面已经写好了，启动程序，进入编辑页面点击上传图片，进行上传，报错。

说明: 在编译向该请求提供服务所需资源的过程当中出现错误。请检查下列特定错误详细信息并适当地修改源代码。 

编译器错误消息: CS0433: 类型“Lyosaki.Site.Uploader”同时存在于“c:\Users\LiuYu\AppData\Local\Temp\Temporary ASP.NET Files\root\0d2fa058\84067035\App_Web_uploader.cs.c95a9a5.dyxu9rbj.dll”和“c:\Users\LiuYu\AppData\Local\Temp\Temporary ASP.NET Files\root\0d2fa058\84067035\assembly\dl3\3147e142\84a16ccb_7a2ad101\Lyosaki.Site.DLL”中

 

解决方案：由于在imageUp.ashx文件头部有一句 <%@ Assembly Src="Uploader.cs" %>， 但给出的是相对路径，系统在默认路径下找到了多个程序集致使编译失败。这里直接把这一句去掉，另外 Uploader.cs没有命名空间，这里加上命名空间Lyosaki.Site,而后直接在imageUp.ashx里边using Lyosaki.Site;便可。

 

问题2、

在不改变现有目录结构和默认图片上传路径的状况下，图片上传地址形如：~/Scripts/umeditor/net/upload/yyyy-MM-dd/Guid.jpg。

因此，我想优化文件组织结构，改变图片存储位置到~/Upload/yyyy-MM-dd/Guid.jpg。顺便把ashx和cs文件拿出来，放在Scripts文件夹下实在变扭。

这里调试了半天，由于图片上传路径的拼接逻辑实在是混乱，在c#两个文件里有配置，js里也有相关配置，而后c#上传完后还要回调js又传了个路径回去。。。

 

解决方案：在根目录下新建Ashx文件夹，把两个ashx文件拷过去。在根目录新建Helper文件夹，把Uploader.cs拷贝进去。

在imageUp文件ProcessRequest方法里修改pathbase为，

//上传配置
string pathbase = "/Upload/";。

表明要上传文件到 根目录的Upload文件夹下，可是不能写成"~/Upload"，由于这里路径后面会回调到js，js没法解析~。

在umeditor.config.js文件中，将图片上传配置修改成：

//图片上传配置区
, imageUrl: "/Ashx/imageUp.ashx" //图片上传提交地址
, imagePath: "" //图片修正地址，引用了fixedImagePath,若有特殊需求，可自行配置
, imageFieldName: "upfile" //图片数据的key,若此处修改，须要在后台对应文件修改对应参数

 

问题3、

点击图片上传后，弹窗如图，因为页面较长，能够上下滚动，但此时，整个“图片”弹窗是Fixed的，会随页面滚动。。。但"本地上传","网络图片"这两个pannel，以及中间的小电脑图片和下面那一行文字，确是relative的，滚动到下面，他们不会跟着滚动。。。

致使有几回我滚动到最下面而后点图片上传，却看不到中间的内容，还觉得是网络问题没加载出来。。。

 

解决方案：

在umeditor.css里面加入下面几行样式便可。

.edui-tab-pane {
position: fixed !important;
}

.edui-image-dragTip, .edui-image-upload1 {
left: 50% !important;
position: fixed !important;
}

 

目前暂时尚未遇到其余问题，但打算在其余地方复用一下它的上传弹窗和后台逻辑，先研究研究可否实现。