今天使用Ueditor编辑器上传图片一直出问题,在网上找了多种方法,最后总结如下:

Ueditor编辑器是百度开发的编辑器,要在jsp页面添加Ueditor编辑器,需要以下几步:

(1)到 http://ueditor.baidu.com/website/download.html 下载jsp版本的,解压后放到项目webContent目录下;

(2)将jsp/lib下的五个包添加到WEB-INF/lib下,注意,有不同版本包冲突的,删除原本存在的jar包。

(3)在所要添加的jsp页面添加以下代码

<script type="text/javascript" charset="utf-8" src="use/edit/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="use/edit/ueditor/ueditor.all.min.js"> </script>
<!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="use/edit/ueditor/lang/zh-cn/zh-cn.js"></script>

并在你想放置的编辑器位置添加以下代码:

<script id="container" name="content" type="text/plain" style="width:480px">这里就是你要输入的文本内容</script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
   var ue = UE.getEditor('container');
</script>

到这一步,运行项目,编辑器已经添加成功,可以进行编辑文字了,如下图:

当时点击上传图片出现:后端配置项没有正常加载,上传插件不能正常使用或者未能找到上传图片或上传失败

后台是否报错:javax.servlet.ServletException: java.lang.NoSuchMethodError;

这时,先检查jar包是否冲突,一般使用SSH框架都会用到commons-io 和commons-fileUpload这两个包,而刚添加的jsp/lib下的包也包含这两个。

接下来就是和Struts2 整合:

   添加过滤器,过滤controller.jsp

package com.blog.filter;

import java.io.IOException;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest; import org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter; public class UeditorStrutsFilter extends StrutsPrepareAndExecuteFilter { @Override
public void doFilter(ServletRequest req, ServletResponse res,
FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) req;
String url = request.getRequestURI();
if (url.contains(request.getContextPath()+"/use/edit/ueditor/jsp/")) {
chain.doFilter(req, res);
}else{
super.doFilter(req, res, chain);
}
}
}

修改web.xml文件:

 <filter>
  <filter-name>myeditor</filter-name>
  <filter-class>com.blog.filter.UeditorStrutsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>myeditor</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

重新编译项目,就可以上传图片了。

使用Ueditor编辑器上传图片总结;的更多相关文章

  1. 在linux下使用百度ueditor编辑器上传图片

    百度ueditor编辑器虽然强大,但是也有不足的地方.如果对ueditor流程不是很熟悉可以说走的弯路比较多,费力不讨好.下面呢,就是要解决ueditor遇到的问题. 用ueditor上传图片遇到的问 ...

  2. C# Asp.net 修改Ueditor编辑器上传图片保存路径

    默认情况下Ueditor图片上传的保存路径是在/ueditor/net/upload/目录下,(如:http://localhost/ueditor/net/upload/123.png), 但是有时 ...

  3. ASP.NET配置Ueditor编辑器上传图片路径

    1.配置ueditor/editor_config.js文件,将 //图片上传配置区 ,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址 ,im ...

  4. UEditor编辑器上传图片开发流程

    在ueditor目录下找到uedior.config.js,找到如下三行: ,imageUrl: "<%=path %>/controller.json" //图片上传 ...

  5. 帝国cms更换Ueditor编辑器上传图片加水印

    Ueditor安装包,里面有个/php/文件夹,找到Uploader.class.php,这是通用上传类文件找到private function upFile(),这是上传文件的主处理方法,找到122 ...

  6. 教你如何调用百度编辑器ueditor的上传图片、上传文件等模块

    出于兴趣爱好,前段时间自己尝试写了一个叫simple的cms,里面使用了百度ueditor编辑器,发现它的多图片上传模块很不错,用起来很方便,又可以选择已经上传好的图片.正好我又是个懒人,发现有现成的 ...

  7. ueditor 编辑器的配置 实现上传图片---附效果图

    由于项目需要,最近使用了ueditor,实现了图片上传功能,在此分享一下遇到的一些问题. 项目使用net+mvc框架搭建,则选择的是NET版本ueditor 编辑器(可去百度官网下载), 下载完成导入 ...

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

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

  9. 解决百度 ueditor v1.4.3 编辑器上传图片失真的bug?

    项目中,用到百度ueditor编辑器,发现,上传大一点的图片,图片会失真,刚开始还以为是PHP端做了图片压缩,仔细看配置说明,发现是编辑器自带有个自动压缩图片的功能,可恶的是,压缩后的图片失真了! 决 ...

随机推荐

  1. iOS NFC

    #import <CoreNFC/CoreNFC.h> @interface ViewController ()<NFCNDEFReaderSessionDelegate> @ ...

  2. redis报错:java.net.SocketException: Broken pipe (Write failed); nested exception is redis.clients.jedis.exceptions.JedisConnectionException: java.net.SocketException: Broken pipe (Write failed)

    最近写了一个服务通过springboot构建,里面使用了redis作为缓存,发布到服务器运行成功,但是有时候会报redis的错误:org.springframework.data.redis.Redi ...

  3. Linux Mint chrome浏览器提示“需要安装adobe flash player”

    出现这种情况,是因为系统没有安装flash 插件造成的,用以下的命令安装: sudo apt-get install adobe-flashplugin 安装完成后,重启浏览器. 如果chrome浏览 ...

  4. Vue组织架构图组件

    vue-tree-chart   :deciduous_tree: Vue2树形图组件 安装 npm i vue-tree-chart --save 使用 in template: <TreeC ...

  5. golang 日期时间处理

    package main import ( "fmt" "time" ) func main() { fmt.Println(time.Now()) //显示时 ...

  6. day20 hashlib、hmac、subprocess、configparser模块

    hashlib模块:加密 import hashlib# 基本使用cipher = hashlib.md5('需要加密的数据的二进制形式'.encode('utf-8'))print(cipher.h ...

  7. DDctf 新得

    滴这道题当时做的时候只做到了看到index.php的源码 当时给了一个博客的提示猜到是swp的那个 但是没有想到是里面的 文件就没有做了,然后在看了wp过后就明白了 访问博客我文章里面的文章里面的pr ...

  8. 基于H5的摄像头视频数据流采集

    最近,为了支持部门团队的项目,通过H5实现摄像头的视频流数据的捕获,抓取到视频流后,传输到视频识别服务器进行后续的逻辑处理. 视频数据的采集过程,其实是比较没有谱的过程,因为之前没有研究过HTML5操 ...

  9. Excel阅读模式/单元格行列指示/聚光灯开发 技术要点再分享

    1. 引言 文题中所谓技术要点再分享,本意是想在大神Charltsing Liu的博文“简单介绍Excel单元格行列指示的实现原理(俗称聚光灯功能)”的基础上写一点个人开发体会.写本文的初衷有三点,一 ...

  10. Linux系统编程之事件驱动

    通常,我们写服务器处理模型的程序时,有以下几种模型:(1)每收到一个请求,创建一个新的进程,来处理该请求:(2)每收到一个请求,创建一个新的线程,来处理该请求:(3)每收到一个请求,放入一个事件列表, ...