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

晚上,在继续开发BriefCMS,把百度UEditor上传图片的问题,给解决了,终于解决了。

公司极简版CMS、BriefCMS、个人官网,最近2个月,与百度UEditor厮杀了好久。最值得吐槽的,就是百度UEditor的上传图片功能,感觉不够简便。

百度UEditor官方,在JSP场景下的应用,太简单了。对我以前写的项目来说,还可以。

对于最近的3个项目来说,就不灵活了。

因为,图片存储、controller.jsp都不是存储在webapps目录下,不能直接访问,都需要做映射。

无论是JSP、图片等静态资源访问、config.json配置文件、Action等动态请求,关键的关键就是:后端服务器程序要能够响应。
JSP访问,后端响应;Action动态请求,后端照旧响应。这就是最简单的说法。

再总结一次百度UEditor的用法:

1. 在HTML、JSP、FTL等视图文件中,引入UEditor的JS和CSS,比如:

<script type="text/javascript" charset="utf-8"

src="${base}/theme/default/static/framework/ueditor/ueditor.config.js"></script>

<script type="text/javascript" charset="utf-8"

src="${base}/theme/default/static/framework/ueditor/ueditor.all.min.js"></script>

<script type="text/javascript" charset="utf-8"

src="${base}/theme/default/static/framework/ueditor/lang/zh-cn/zh-cn.js"></script>

2.ueditor.config.js中配置,获得config.json等图片上传等相关的URL,比如:
 , serverUrl: URL + "../../../ueditor/controller.jsp"

JSP也好,动态Action请求也好,后端响应它,返回给正确的config.json配置文件。

最坑的就是获得config.json这个文件,它的路径和config.js中的配置有严重的依赖关系。
如果想把图片存储到 非Webapp等硬盘目录,需要手动修改controller.jsp的rootPath。

3. 响应图片。
   不再Webapp目录下的,记得做映射。

灵丹妙药: 遇到问题的时候,根据错误提示,经过编码的,翻译成中文,就知道为什么了。实在不行,就debug程序,也不难,一般都是获得config.json的路径不对。debug一次,你就了解实际路径的生成规则了,然后你什么就懂了。

原文首发:http://fansunion.cn/article/detail/552.html

时间: 2024-12-23 14:14:28

百度UEditor上传图片-再总结一次的相关文章

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

本周,CSDN有个网友遇到了百度UEditor上传问题,最后商定付50元钱,我帮他解决这个问题.    他最初想自己搞定这个问题,结果搞了好多次,好几天,还是没能解决.    2015年1月17日8:25~2015年1月18日00:24,4个小时终于搞定了这个问题. 1.总的感悟    本来预计1个小时,就能解决的,结果硬是花费了4个小时,挺无奈的. 虽说是帮客户解决一个问题,但实际上一个问题相关的问题,非常多.另外,就是解决这个问题,不是普通的咨询,已经参与到写代码.单步跟踪.QQ语音.QQ远

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

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

百度UEditor图片上传、SpringMVC、Freemarker、Tomcat、Nginx、静态资源

个人官网.公司项目都需要 可视化编辑器,百度UEditor做得很不错,就用的这个.项目后台用到了SpringMVC.Freemarker,开发过程中部署在Jetty,线上部署用Tomcat,最后可能配置Nginx代理.     在实际使用过程中,遇到了太多的问题,因此有必要梳理和总结下. 1. 先说百度UEditor在Java环境中的使用:1.1   Html页面或者Freemarker模版里,引入百度UEditor的相关JS和CSS,如下 <script type="text/javas

ASP.NET MVC5 中百度ueditor富文本编辑器的使用

随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor,另一种是ueditor的迷你版umeditor. 一.我们先讲完全版的ueditor. 1.建立数据模型. 2.建立对应的控制器和视图. 3.访问http://ueditor.baidu.com/website/download.html 进入开发版的下载页面,下载.net UTF-8版本,现在最新

百度ueditor的图片上传,前后端交互使用

百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor.config.js即可.这里就不多说. 至于图片上传,ueditor 设计的时候是考虑和后端交互的,所以会看到可以下载什么php,java版本,还有很多网上会说道有什么后端配置文件,改那改这的,但是实际上后端存储业务是按照公司实际来的,实践起来并不顺利. 本文重点讲述的只用前端文件和ueditor.

百度ueditor 实例化 Cannot set property &#39;innerHTML&#39; of null 完美解决方案

此时此刻,我正在用博客园推荐的TinyMCE编辑器写这个博客,突然想起最近在项目中使用百度ueditor编辑器中的一些经历.所以记录在此,与大家分享. 不得不说,百度ueditor是一款很好的在线编辑器,为开发者提供了诸多便利,你甚至可以用它来把word文档的内容按照一定的格式转换成html代码,然后再放进自己的项目中. 1.我们的项目中,用户在注册时有可能需要查看用户协议和隐私协议,而我们的文案是将这两个协议的内容放在word文档中,作为苦逼的开发人员,你需要把这些文字展示在html页面上,并

页面插入百度UEditor编辑器

工作中用到了百度的富文本.以下总结记录一下,UEditor嵌入网页的方法. 第一步 到百度UEditor官网下载所需版本:http://ueditor.baidu.com/website 本次下载的是 utf-8的jsp版:ueditor1_4_3_2-utf8-jsp.zip. 第二步 解压得到如图文件结构;之后打开jsp/lib/ 将lib下的jar包 导入项目,注意jar包版本问题,如果项目中有相同的包,删掉低版本保留高版本的. 第三步 浏览器打开index.html会发现这是UEdito

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的

ThinkPHP整合百度Ueditor图文教程

ThinkPHP整合百度Ueditor图文教程 ThinkPHP整合百度Ueditor,基于黄永成老师的视频说明的申明:最好大家都能写绝对路径的都写好绝对路径比如:window.UEDITOR_HOME_URL 他在教程里面已经说了的,我就不再次说了啊,就一笔带过,好了不废话! 在调用编辑器的时候首先先初始化一些值: <script type="text/javascript" charset="utf-8"> window.UEDITOR_HOME_U