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>

当然还有别的办法，自己去百度或者谷歌一下。其实最好的办法是这篇文章阐述的方法   http://blog.sina.com.cn/s/blog_63b470180102ux4a.html

我当然亲自断点测试了一下，很好！！佩服牛人提供的好的方法！！！

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

ueditor上传图片设置的简单实例的更多相关文章

  1. 百度ueditor上传图片时如何设置默认宽高度

    百度ueditor上传图片时如何设置默认宽高度 一.总结 一句话总结:直接css或者js里面限制一下就好,可以用html全局限制一下图片的最大高度 直接css或者js里面限制一下就好,可以用html全 ...

  2. 关于富文本编辑器ueditor（jsp版）上传文件到阿里云OSS的简单实例，适合新手

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

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

    最近项目中遇到一个问题,UEditor上传图片后,在内容展示会修改图片样式.但是表情也是img标签,所以全局修改是有问题的, 所以只能着手修改一下插件的代码. 首先找到图片上传的服务器段文件.这里主要 ...

  4. UEditor之实现配置简单的图片上传示例

    UEditor之实现配置简单的图片上传示例 原创 2016年06月11日 18:27:31 开心一笑 下班后,阿华到楼下小超市买毛巾,刚买完出来,就遇到同一办公楼里另一家公司的阿菲,之前与她远远的有过 ...

  5. UEditor上传图片到七牛云储存（c#）

    我们的网站一般放在虚拟空间或者服务器上,图片如果存在本地目录,会占用很多空间和流量,还增加了负担,好的办法是把图片存放到云储存服务里面,平时用url去拿 云储存:普遍说又拍云和七牛比较好,看到七牛免费 ...

  6. ueditor上传图片到七牛云存储（form api,java）

    转:http://my.oschina.net/duoduo3369/blog/174655 ueditor上传图片到七牛云存储 ueditor结合七牛传图片 七牛的试炼 开发前的准备与注意事项说明 ...

  7. Hibernate(二)__简单实例入门

    首先我们进一步理解什么是对象关系映射模型? 它将对数据库中数据的处理转化为对对象的处理.如下图所示: 入门简单实例: hiberante 可以用在 j2se 项目,也可以用在 j2ee (web项目中 ...

  8. 【转】Android Https服务器端和客户端简单实例

    转载地址:http://blog.csdn.net/gf771115/article/details/7827233 AndroidHttps服务器端和客户端简单实例 工具介绍 Eclipse3.7 ...

  9. Centos7的安装、Docker1.12.3的安装，以及Docker Swarm集群的简单实例

    目录 [TOC] 1.环境准备 ​ 本文中的案例会有四台机器,他们的Host和IP地址如下 c1 -> 10.0.0.31 c2 -> 10.0.0.32 c3 -> 10.0.0. ...

随机推荐

  1. Spring Cloud（十四）Config 配置中心与客户端的使用与详细

    前言 在上一篇 文章 中我们直接用了本应在本文中配置的Config Server,对Config也有了一个基本的认识,即 Spring Cloud Config 是一种用来动态获取Git.SVN.本地 ...

  2. VS之解决方案文件夹

    Visual Studio提供了一种特殊的文件夹,它可以帮助组织大型解决方案.它们的名称也恰如其分,叫做“解决方案文件夹”. 注意   解决方案文件夹是解决方案资源管理器中的一种组织工具,创建这样的文 ...

  3. 【整理】HTML5游戏开发学习笔记（4）- 记忆力游戏

    1.预备知识(1)Canvas绘制多边形(2)Canvas绘制文字 2.实现思路涉及的对象  (1)场景Scene  场景代表了画布上的一块区域,场景里的每个物体都是场景里的一个元素,其绘制统一由场景 ...

  4. ASP.NET实现网站的自动升级

    网站的自动升级主要是要实现从一台服务器上下载某些文件到本服务器上,然后对下载下来的文件进行更新等操作. 比如,现在有服务器A,服务器B和客户端C. 作为COM公司开发的产品DIV网站系统被安装到服务器 ...

  5. CF293B 方格（带技巧的搜索）

    solution: 首先我们根据一条路径上不能有两个相同颜色的格子可以得出: 对于两个格子 \((x_1 , y_1 )\) 和 \((x_2 , y_2 )\) 必须满足: \(x_1<x_2 ...

  6. git使用常用命令

    第一部分:个人整理部分(读<Git教程By廖雪峰.pdf>笔记) /* 配置全局参数 */git config --global user.name "username" ...

  7. Java 在方法和作用域内的内部类

    通常,如果所读写 的代码包含了内部类,那么它们都是"平凡的"内部类,简单并且容易理解,然而,内部类的语法覆盖了大量其它的更加难以理解的计数,例如可以在一个方法里或者在任意的作用域里 ...

  8. SqlServer 中查询子节对应的上级自定义函数

    CREATE FUNCTION [dbo].[FN_TopGetOrgByUserName] ( @UserName NVARCHAR(128) ) RETURNS @showOrg TABLE(id ...

  9. KnockoutJs学习笔记（六）

    这篇文章主要涉及control flow部分的binding. foreach binding主要作用于lists或是tables内数据单元的动态绑定.下面是一个简单的例子: js部分: ko.app ...

  10. Kubernetes Master节点灾备恢复操作指南---升级版

    本文档简述了Kubernetes主节点灾备恢复的相关步骤,供在发生k8s master崩溃时操作. 就算是在k8s里部署了etcd群集, 主节点控制组件的高可用节点,灾备恢复也是必须要实现的操作,才能 ...