最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的不够详细明了,突然发现ueditor这么强大的工具在开发过程中的致命盲点,很纠结,最终经过很久的纠结和苦思冥想终于解决了该问题,以下是关于ueditor 在web 2.0版本下的问题解决思路和方法,因为经过测试 网上下载的ueditor编辑器在4.0下 问题不大。好了言归正传,首先亮出ueditor在我的项目的结构位置:

,这里先说明一下 标示的这些地方的作用,红框标示的是Ueditor整个文件的位置,红线标示的 是 配置过程中将会用到的各部分,接下来会一一讲解。接下来在亮出原始版本ueditor结构位置:

原始版本ueditor是不能正常上传图片的,之所以晒出这两张图片是为了更好的进行对比 找出 问题所在,便于分析 你的问题出在哪里。首先问题可以很明确的是程序编译没有通过,你按F6进行编译他提示生成成功,其实不然,接下来我们就来分析哪些地方造成的编译没有通过

我们先从上面带星号这个类开始讲:请看以下图片:,如果不出意外,你正在有这样的疑问,这个错误是怎么产生的,因为我那时就纠结了很久,如果你细心的话你会发现第一张图片中该文件已经改名为UploaderFile,这是当时最先想到的解决办法,以为改个名字就能解决 该报错原因,结果我错了,(当然改了名字也不影响),那么问题出在哪里呢?其实问题出在头部引用红线位置就是问题所在,2.0是不支持Linq的 所以 这句要删掉,同时引用Linq的还有Config.cs 然后就是上面两句话,可以看出下面一句话已经在报错了,这句话为何报错?因为看程序结构你可以看出Config.cs类和Uploader.cs类本来就在同一个项目中,这里在处理程序中再次引用就相当于原本就编译了,再编译一次,所以提示同时存在于.....两个地方,而为何4.0不报错,我想应该是4.0在升级后处理了这个逻辑吧!这三句话都必须删掉

接下来我把imageUp.ashx的代码贴出来,只要你是ueditor1_3_5-utf8-net这个版本 就没有问题。

 <%@ WebHandler Language="C#" Class="imageUp" %>
using System;
using System.Web;
using System.IO;
using System.Collections; public class imageUp : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain"; //上传配置
int size = ; //文件大小限制,单位MB //文件大小限制,单位MB
string[] filetype = { ".gif", ".png", ".jpg", ".jpeg", ".bmp" }; //文件允许格式 //上传图片
Hashtable info = new Hashtable();
Uploader up = new Uploader(); string pathbase = null;
int path=Convert.ToInt32( up.getOtherInfo(context, "dir"));
if (path == )
{
pathbase = "upload/"; }else{
pathbase = "upload1/";
} info = up.upFile(context, pathbase, filetype, size); //获取上传状态 string title = up.getOtherInfo(context, "pictitle"); //获取图片描述
string oriName = up.getOtherInfo(context, "fileName"); //获取原始文件名 HttpContext.Current.Response.Write("{'url':'" + info["url"] + "','title':'" + title + "','original':'" + oriName + "','state':'" + info["state"] + "'}"); //向浏览器返回数据json数据
} public bool IsReusable
{
get
{
return false;
}
} }

,接下来在看web.config文件,原始的文件时这样的:,其实这个文件 在整个问题中没有太大影响(也就是说不会影响图片上传),但是为何又要单独讲一下呢?因为在下这个亏吃的有点大,该文件中targetFramework="4.0"这句话 误导了我,以至于我一直以为必须要这句话才能在让该插件正常运行,也就是说,我这里是2.0的 就要把4.0改成2.0 ,网上还有人说把requestValidationMode这部分删除就行了,等等 到最后我才知道,所有报错的地方 都只是2.0配置文件不支持的原因,直接删除即可,当然不删也不影响,我这里是删除了的,因为我是一个 完美主义者,不喜欢看到有报错O(∩_∩)O哈哈~。

好了,进入正题,以上只是解决编译不通过的问题,其实最为重要的是以下部分ueditor.config.js 这个文件 才是核心啊,现在想想 我被坑了,而且还坑的不浅 我擦!!!

先来看看 原始的 文件在来看看 我配置好的文件:来讲讲红色框的问题,先看原始的图片的最上部分框和我配置好的第一张图片的框,观察window.UEDITOR_HOME_URL = "/ManagePage/ueditor"  这部分,原始版本没有配置,我这里添了的,他的作用是确定ueditor这个插件在你的项目中的位置,没有这句话会报很多错,错误的中心都是找不到某某文件,现在想想,这句话才是核心啊,

在来看看原始图片的第二个框:这部分就是配置图片上传的地方,注意看  原始版本有些地方被注解了,这些注解会影响图片上传弹出框的效果:,这就是被注解的效果,你只用将这部分的注解都去掉就行了,在看看原始图片的第三个框:其实没有作用,这部分可以根据你的需求 选择是否注解,这里不影响图片上传,

好了,到此为止 如果你还报以下错误:,那么你就可以在imageUp设置断点监视以下,简单的说一下这个错的原因,500 Internal.....错误,通常我们会联想到 编译错误,刚开始的时候我也想到了这个原因,只是不知道如何处理,后来,我们 头 直接把error 后面那部分复制到浏览器的地址中,执行如图: 根据返回来的 这些字符 我们就能推断 错误中下面那部分的 原因了,是因为上传成功后url 、title等都为空造成的,解决办法是:在imageUp 设置断点监视以下:我的结果是:根据图中红色框部分,我们可以推测:传递过来的参数是upload1 字符串,这里他进行 Convert.toInt32 当然会报错,就造成了 上面上传报错的情况,解决办法是:直接把上传过来的参数作为存储的地址即可。至此  大功告成了。

如果 你的图片上传还出问题 就在百度中收索:ueditor1_3_5-utf8-net .netFramwork 2.0版本 在csdn中 我上传了 2.0 和 4.0 两个版本。4.0的 就收ueditor1_3_5-utf8-net .netFramwork 4.0版本   里面有完整配置。

关于editor网页编辑器ueditor.config.js 配置图片上传的更多相关文章

  1. 从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...

  2. Django配置图片上传

    本文首先实现django中上传图片的过程,然后解决富文本编辑器文件上传的问题. 一. 上传图片 1.在 settings.py 中配置MEDIA_URL  和 MEDIA_ROOT 在 D:\blog ...

  3. 百度编辑器ueditor批量上传图片或者批量上传文件时,文件名称和内容不符合,错位问题

    百度编辑器ueditor批量上传附件时,上传后的文件和实际文件名称错误,比如实际是文件名“dongcoder.xls”,上传后可能就成了“懂客.xls”.原因就是,上传文件时是异步上传,同时进行,导致 ...

  4. 关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手

    关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手   本人菜鸟一枚,最近公司有需求要用到富文本编辑器,我选择的是百度的ueditor富文本编辑器,闲话不多说,进入正 ...

  5. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  6. 百度编辑器前后端二开图片上传Js Thinkphp tp5 ueditor

    百度编辑器图片上传Jsueditor.all.min.js 下载链接 链接:https://pan.baidu.com/s/1VNgw9ELgRRHKeCQheFkQTw 提取码:fnfi 使用方法: ...

  7. drupal中安装CKEditor文本编辑器,并配置图片上传功能

    一.下载: 1.CKEditor模块 2.IMCE模块 二.安装       1.复制: 下载完上面两个模块之后,解压,将解压后整个文件夹,复制粘贴,放到 sites\all\modules下面,个人 ...

  8. 百度ueditor vue项目应用 -- 图片上传源码修改

    本文目的有两个,一.废掉单图上传,二.改造多图上传 大家都知道百度ueditor不是针对vue项目开发的,官方文档提供的源码包里有需要后端配置的接口,but到vue项目就不太好办了,网上有些文章也介绍 ...

  9. struts2+ckeditor配置图片上传

    又是一个漫漫长夜. 公司的编辑器坏了,用的是百度编辑器,上传图片的网址被框架给拦截了,我们本地怎么测试都没问题,放到服务器就这样了.和老李找了半天,疯了,没原因的. 笔者以前用过jsp+ckedito ...

随机推荐

  1. Python之路-(Django进阶二)

    model: 双下划线: # 获取个数 # # models.Tb1.objects.filter(name='seven').count() # 大于,小于 # # models.Tb1.objec ...

  2. zookeeper清除事物日志

    dataDir=/data/zookeeper/data dataLogDir=/data/zookeeper/log       zk事物日志(快照)存放目录,高负荷工作的时候,会产生大量的日志,需 ...

  3. logstash插件

    codec 插件   goeip插件 input { file { path => ["/data/nginx/logs/access.log"] type =>&qu ...

  4. Linux命令集合

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...

  5. 记得初学JS时候练个九九乘法表都写的要死要活

    还记得当初刚接触JS时候,看到视频中老师写了个九九乘法表,觉得好神奇,可是自己在下面动手写了半天还是有各种问题,甚是懊恼啊.今又看到园子里有关于乘法表的博文,出于对过去的不舍与缅怀,遂重写一遍. &l ...

  6. com.caucho.hessian.io.HessianProtocolException: is unknown code 解决方案

    问题: Cannot access Hessian remote service at [http://....../remote/syllabusService]; nested exception ...

  7. 分布式入门之2:Quorum机制

    1.  全写读1(write all, read one) 全写读1是最直观的副本控制规则.写时,只有全部副本写成功,才算是写成功.这样,读取时只需要从其中一个副本上读数据,就能保证正确性. 这种规则 ...

  8. Azure Virtual Machine 之 如何利用Management Class Libraries 创建VM

    之前发的blog简单的介绍了如何使用Management Class Libraries 来控制Azure platform. 但由于官方并没有提供文档,所以我们只能够通过自己研究来摸索使用该类库的方 ...

  9. request_irq() | 注册中断服务函数【转】

    本文转载自:http://blog.csdn.net/wealoong/article/details/7566546#t0 参考  : ARM Linux 中断机制分析.pdf linux-2.6. ...

  10. java连接mysql步骤

    转自:http://www.cnblogs.com/hongten/archive/2011/03/29/1998311.html JDBC连接mysql数据库   •创建一个以JDBC连接数据库的程 ...