ueditor上传图片

0.前言:我用过ckeditor,kingeditor还是感觉ueditor最好用,功能强大,经常更新。之前因为升级了struts2到2.5的了,原本的kingeditor已经不能共存,于是找到了uditor。开始比较迷茫的使用,各种百度,没有我满意的答案,明明可以很简单的使用,非要搞得别人看不懂!!!接下来看我的操作,尽量满足简单明了。

1.首先进入ueditor官网下载,这个很简单吧!这里可以下载:    http://ueditor.baidu.com/website/download.html        因为我用的javaweb,所以用的jsp,

2.添加必要的配置。下载后解压出来的文件夹的名字是 ueditor1_4_3_3-utf8-jsp 这里面有个子文件夹叫 utf8-jsp 。

a.新建一个文件夹名字ueditor,然后把utf8-jsp文件里的所用东西复制到ueditor,然后把ueditor放到你的项目里。

b.当然了,要把ueditor > jsp > lib下的jar包复制到WEB-INF > lib里,首先看看jar包有没有自动引入到项目库中,如果没有就Build Path一下。

3.页面引入Ueditor,引用两个必须的Js文件:ueditor.config.js,ueditor.all.js,和实例化ueditor。

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script>
<script type="text/javascript"src="${pageContext.request.contextPath}/ueditor/ueditor.all.js"></script>
</head>
<body>
<h1>UEditor简单功能</h1>

<!--style给定宽度可以影响编辑器的最终宽度-->
<script type="text/plain" id="myEditor">
<p>这里我可以写一些输入提示</p>
</script>
<script type="text/javascript">
// UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;

UE.getEditor(‘myEditor‘,{
//这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
//toolbars:[[‘FullScreen‘,‘simpleupload‘,‘Source‘, ‘Undo‘, ‘Redo‘,‘Bold‘,‘test‘]],
//focus时自动清空初始化时的内容
autoClearinitialContent:true,
//关闭字数统计
wordCount:false,
//关闭elementPath
elementPathEnabled:false,
//默认的编辑区域高度
initialFrameHeight:300
//更多其他参数,请参考ueditor.config.js中的配置项
});
/* UE.Editor.prototype.getActionUrl = function(action) {
//这里很重要,很重要,很重要,要和配置中的imageActionName值一样
if (action == ‘fileUploadServlet‘) {
//这里调用后端我们写的图片上传接口
return ‘http://localhost:8081/Test/fileUploadServlet‘;
}else{
return this._bkGetActionUrl.call(this, action);
}
} */

</script>

</body>

</html>

4.这是最容易报错的一步,请你首先找到 ueditor > jsp > controller.jsp,在controller.jsp添加一句

观察控制台输出了什么,我控制太输出的是:D:\java\workSpace\.metadata\.plugins\org.eclipse.wst.server.core\tmp5\wtpwebapps\WebDemo\

说明了图上保存的路径在这里,再看看 ueditor > jsp > config.json,

imageUrlPrefix这个就是访问你项目的跟路径名,比如我的是:http://localhost:8080/WebDemo/ueditor.jsp,那么imageUrlPrefix的值就是WebDemo了,然后找到控制台输出的

D:\java\workSpace\.metadata\.plugins\org.eclipse.wst.server.core\tmp5\wtpwebapps\WebDemo\里面看看有没有userImages文件夹,如果有 那么你的图片就插入成功了。但是显示不一定成功。

5.显示异常的解决。

a.如果是下面这种情况,说明你的imageUrlPrefix写错了,看清我的配置  "imageUrlPrefix": "/WebDemo", /* 图片访问路径前缀 */    项目名称WebDemo前面是有 / 的。如果你不知道你的项目路径,可以对着项目右击, 点击Properties ,下右图所示,红色表示你的项目跟路径访问地址

b.如果显示为   未找到上传数据

ueditor是一个功能十分强大的在线文本编辑器,但是在ssh框架中,确切的说实在struts2中由于其拦截器需要对request,session对象进行重新封装,这个过程中会把request对象中保存的一些内容清空,所以会导致ueditor的上传功能获取不到需要上传的内容导致“未找到上传文件”的错误!       之前你的web.xml里struts2配置可能是

<filter>
  <filter-name>struts2</filter-name>
  <filter-class>
  org.apache.struts2.dispatcher.filter.StrutsPrepareAndExecuteFilter
  </filter-class>
</filter>

<filter-mapping>
  <filter-name>struts2</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

就是因为这个/*拦截了controller.jsp      我做的修改是

<filter-mapping>
  <filter-name>struts2</filter-name>
  <url-pattern>*.do</url-pattern>

  <url-pattern>*.action</url-pattern>
</filter-mapping>

当然还有别的办法,自己去百度或者谷歌一下。

6.做完这些工作,那么恭喜你ueditor就可以正常使用和上传图片了。

时间: 2024-10-29 19:07:42

ueditor上传图片的相关文章

ueditor上传图片到七牛云存储(form api,java)

转:http://my.oschina.net/duoduo3369/blog/174655 ueditor上传图片到七牛云存储 ueditor结合七牛传图片 七牛的试炼 开发前的准备与注意事项说明 Let's rock 与ueditor结合前的准备工作 首先从表单开始 生成token 建立图片空间 生成token 上传流程 集成ueditor 将ueditor中的图片模块的在线管理功能和七牛结合 ueditor上传图片到七牛云存储 重要说明,本人已不做java多年,请不要加qq再问我java的

百度UEditor上传图片-再总结一次

晚上,在继续开发BriefCMS,把百度UEditor上传图片的问题,给解决了,终于解决了. 公司极简版CMS.BriefCMS.个人官网,最近2个月,与百度UEditor厮杀了好久.最值得吐槽的,就是百度UEditor的上传图片功能,感觉不够简便. 百度UEditor官方,在JSP场景下的应用,太简单了.对我以前写的项目来说,还可以. 对于最近的3个项目来说,就不灵活了. 因为,图片存储.controller.jsp都不是存储在webapps目录下,不能直接访问,都需要做映射. 无论是JSP.

百度ueditor 上传图片后如何设置样式

最近项目中遇到一个问题,UEditor上传图片后,在内容展示会修改图片样式.但是表情也是img标签,所以全局修改是有问题的, 所以只能着手修改一下插件的代码. 首先找到图片上传的服务器段文件.这里主要是php讲解 找到php目录下Uploader.class.php 337行 public function getFileInfo() { return array( "state" => $this->stateInfo, "url" => $th

UEditor上传图片等附件都出现红叉

我的环境: vs2010+netframework3.5+ueditor1_3_5-utf8-net 问题:UEditor上传图片等附件都出现红叉 尝试了网络上各种方法都不对, 后来只能自己看下imageUp.ashx的代码... 解决方案: 默认代码: ? 1 2 3 4 5 6 if (!String.IsNullOrEmpty(context.Request.QueryString["fetch"]))       {           context.Response.Add

UEditor上传图片到七牛云储存(c#)

我们的网站一般放在虚拟空间或者服务器上,图片如果存在本地目录,会占用很多空间和流量,还增加了负担,好的办法是把图片存放到云储存服务里面,平时用url去拿 云储存:普遍说又拍云和七牛比较好,看到七牛免费额度很大,网上评价也挺好的,我就选了七牛 编辑器:我用的是百度的UEditor编辑器,之后需要修改一些的开放的类和js文件 下面写一下c#版本的修改方法(java版本在下一篇) 一.集成UEditor 1.在项目中加入UEditor 在UEditor的下载页,可以下载到最新的1.4.3.3 .Net

UEditor上传图片被压缩得模糊的解决方法

UEditor功能很强大,但是有个很不友好的功能:会在使用UEditor上传图片时,如果你的原始图片尺寸过大,就会先自动对图片大小进行压缩,然后将压缩的文件给servlet.也就是说,使用UEditor 上传图片后会导致图片大小发生改变并使图片变得模糊,而这是在用户毫不知情的情况下进行的操作,非常讨厌.如果不想让上传的精美照片被UEditor 压缩得面目全非,可以通过以下方法禁止UEditor自动压缩图片:打开该目录的文件:UEditor\php\ue.config.php,找到如下代码: $C

百度编辑器 Ueditor 上传图片时打开文件夹的延迟问题,点击上传图片弹窗打开慢问题

在使用 ueditor 开发时, 作为一个web文本编辑器使用时. 当点击上传图片时, 文件夹要延迟好久才能打开. 解决: 针对多图片上传, 将/ueditor/dialogs/image/image.js 文件下的以下代码 1 2 3 4 5 accept: {                     title: 'Images',                     extensions: acceptExtensions,                     mimeTypes:

UEditor上传图片到七牛C#(后端实现)

由于个人网站空间存储有所以选择将图片统一存储到七牛上,理由很简单 1  免费10G 的容量  ,对个人网站足够用 2  规范的开发者文档 和完善的sdk(几乎所有热门语言sdk) 整体思路 图片上传七牛云 在我看来无非两种方式 1 前端表单或ajax异步提交请求到七牛服务器 ,当然此时也需要经过后端获取相应的  token (图片->七牛服务器) 2 直接后端代码请求 七牛服务器 ,官方有各版本语言的sdk 提供 ,可提高开发效率 ,降低开发难度  (图片->自己服务器->七牛服务器)

用ueditor上传图片、文件等到七牛云存储

ueditor上传文件,是用数据流的形式上传的. 而七牛云存储官方文档中,只提供了文件路径上传的方式. 但是,仅仅是在官方文档中写了这一种方式. 事实上,利用VS的对象管理器,打开Qiniu的dll,我们可以看到以下东西: 其实Qiniu提供的SDK中,是可以利用文件流上传文件的. 所以,根据官方文档提供的案例,我们可以将上传改写成下面的样子: /// <summary> /// 上传文件 /// </summary> /// <param name="key&qu