Java往事之《百度UEditor插件配置图片上传问题》

百度UEditor插件配置图片上传问题

前言:之前第一次用到UEditor插件的时候,一脸懵逼!没错就是一脸懵逼,去UEditor插件官网下载了一个开发版的。然后对于新鲜技术好奇,本人就迫不及待的把它copy到了我的项目里,运行之后发现鼠标点到输入框里面的时候,什么鬼啊,握了棵草!上传图片的插件置灰了如下图1,一看还有一个多图片上传的插件还在,就赶紧点了一下,点开的那一瞬间我吃了一鲸,如下图2!

图1

图2

很好!下面看一下如何解决这个问题。

1.首先你可以到官网Ueditor,查看很详细的文档,包括如何安装到Eclipse,相关jar包和如何使用Ueditor,本文主要介绍如何实现单图片上传!

2.把WEB-INF/jsp/src下的java源码copy到项目源码中,方便之后的调试代码,如下图:

3.运行http://localhost:8082/testUEditor/_examples/simpleDemo.html,可以打开看下这个文件:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

<title></title>

<script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script>

<script type="text/javascript" charset="utf-8" src="editor_api.js"></script>

</head>

<body>

<h1>UEditor简单功能</h1>

<!--style给定宽度可以影响编辑器的最终宽度-->

<script type="text/plain" id="myEditor">

<p>这里我可以写一些输入提示</p>

</script>

<script type="text/javascript">

UE.getEditor(‘myEditor‘,{

//这里可以选择自己需要的工具按钮名称,此处仅选择如下五个

toolbars:[[‘FullScreen‘, ‘Source‘, ‘Undo‘, ‘Redo‘,‘Bold‘,‘test‘]],

//focus时自动清空初始化时的内容

autoClearinitialContent:true,

//关闭字数统计

wordCount:false,

//关闭elementPath

elementPathEnabled:false,

//默认的编辑区域高度

initialFrameHeight:300

//更多其他参数,请参考ueditor.config.js中的配置项

})

</script>

</body>

</html>

上面例子很简单,就是如何初始化一个富文本框,已经如何配置工具条等等

4.因为我们要实现图片上传功能,所有要把图片上传按钮搞上去,方法如下:

1)第一种方法:把simpleupload加到toolbars中:

toolbars:[[‘FullScreen‘,simpleupload ,‘Source‘, ‘Undo‘, ‘Redo‘,‘Bold‘,‘test‘]]

2)第二种方法:直接把toolbars注释掉

这时就会读取默认的配置文件ueditor.config.js,下面介绍,不过会把所有的按钮全部显示出来

重新运行http://localhost:8082/Test/_examples/simpleDemo.html

如下图:

5.这时你就会发现,我之前遭遇的奇葩事情发生了,点击图片上传按钮,一点反应都没有,如果你鼠标点了一下输入框,按钮还给置灰了!

这里开始介绍ueditor.config.js文件,

首先,你会发现在这个文件可以配置很多,具体看下面即可

重点讲:serverUrl: URL + “PHP/controller.php”,这个就是请求后端的统一接口路径,记得是统一接口路径,也就是说只有这个路径,没有第二个。

我们把路径改成jsp的:, serverUrl: URL + “jsp/controller.jsp”

我们把注释去掉,重新启动tomcat,刷新页面,点击图片上传按钮

看完上面这个图,是不是感觉成功了,哈哈哈哈.....并没有!是不是很坑大表弟?看下图,选完图片的效果

大家可以看到图片没有正常显示出来,人家官网可是能看到图的。还能不能愉快的玩耍了???

6.说明还有些配置文件还没配好,我们看刚刚配置的后端请求路径

// 服务器统一请求接口路径

, serverUrl: URL + "jsp/controller.jsp"

记住,大家要把这个文件当作后端的java文件,一定要记住,很重要的。

controller.jsp会返回同目录下的config.json文件,大家要把它当作是后端返回的数据即可

这时,我们先看config.json文件:

只看部分配置,下面的配置都很重要,但我们先解决上面出现的问题:

上面的问题应该是图片的路径不对造成的,所以我们修改配置:imageUrlPrefix,把他改成下面的配置,重启,刷新:

"imageUrlPrefix" = http://localhost:8082/testUEditor/

重新访问一下,效果如下图:

完美~perfect~成功的配置了图片上传!

时间: 2024-12-22 22:32:33

Java往事之《百度UEditor插件配置图片上传问题》的相关文章

struts2+ckeditor配置图片上传

又是一个漫漫长夜. 公司的编辑器坏了,用的是百度编辑器,上传图片的网址被框架给拦截了,我们本地怎么测试都没问题,放到服务器就这样了.和老李找了半天,疯了,没原因的. 笔者以前用过jsp+ckeditor,觉得里面上传功能挺好用,于是想出这个法子,把网站的编辑器换掉. 用的是最新的版本的,4点几的.很有wordpress的感觉,不知道是不是一家的.先预览一下: 代码: package action; import java.io.File; import java.io.FileInputStre

Django配置图片上传

本文首先实现django中上传图片的过程,然后解决富文本编辑器文件上传的问题. 一. 上传图片 1.在 settings.py 中配置MEDIA_URL  和 MEDIA_ROOT 在 D:\blog_project  下建立文件夹 uploads MEDIA_URL = '/uploads/' # 上传图片的路径:D:\blog_project\uploads MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads') # 上传图片的根路径 BASE_DIR:

UMEditor(Ueditor mini)修改图片上传路径

UMEditor(Ueditor mini)修改图片上传路径 imageUp.ashx string pathbase = "/UpLoad/images/"; //保存文件夹在网站根目录下 dialogs/image/image.js //修改为 var $img = $("<img src='" + url + "' class='edui-image-pic' />"),//去掉editor.options.imagePath,

ckeditor4.5.1配置图片上传的方法

本篇博文主要面向初学者,一步一步地实现ckeditor的图片上传,欢迎各位大神指正. ckeditor的图片上传默认是关闭的,网上也有很多相关的教程,可是不是讲的不完整,就是版本太旧已经不适用.我写这篇博文主要面向初学者,有错误的地方欢迎指正. 截止本文撰写,ckeditor最新版本是4.5.1,我下载的版本是4.5.1standard,如果本文的方法不管用,请下载同一版本尝试. 1.开启图片上传界面 文件地址:ckeditor/plugins/image/dialogs/image.js 搜索

JQuery插件:图片上传本地预览插件,改进案例一则。

/* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插件网站:http://keleyi.com/keleyi/phtml/image/16.htm *参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法; *使用方法: <div> <img id

ckeditor4.7配置图片上传

ckeditor作为老牌的优秀在线编辑器,一直受到开发者的青睐. 这里我们讲解下 ckeditor最新版本4.7的图片上传配置. https://ckeditor.com/ 官方 进入下载 https://ckeditor.com/download 我们下载完整版 默认本地上传没有开启: 找到ckeditor/plugins/image/dialogs/image.js文件 打开 然后搜索 id:"Upload",hidden   默认值是!0 我们改成0即可 刷新页面,点击那个上传图

【前端插件】图片上传插件收集

http://tpl.9iphp.com/146.htmlHTML5实现的图片上传预览功能 http://www.dropzonejs.com/ 图片上传预览. http://segmentfault.com/a/1190000000754560HTML5 本地裁剪图片并上传至服务器(老梗) http://elemefe.github.io/image-cropper/图片裁剪 上传 http://veerkat.me/blog/posts/HTML5-tu-pian-shang-chuan-y

Jquery插件-Html5图片上传并裁剪

/** * 图片裁剪 * @author yanglizhe * 2015/11/16 */ (function($){ /** * Drag */ var Drag={obj:null,init:function(elementHeader,element){elementHeader.onmousedown=Drag.start;elementHeader.obj=element;if(isNaN(parseInt(element.style.left))){element.style.le

UEditor配置图片上传

最近项目中需要用到一个图文编辑器功能,因为之前的kingeditor功能过于简陋,所以决定换成Ueditor,前端已经配置好了,这个是后台配置 1,确定前台已经配置好了 2,将编辑器的插件包下载下来,将里面文件夹拷到网站的静态资源目录 3,文件夹里面包含一个PHP文件夹,这个里面包含文件上传,后台配置文件,打开config.json文件,需要配置的地方是:"imagePathFormat":"这里写你的上传图片保存路径,一定要是绝对路径" 4,在你引用编辑器的模版中