关闭

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

标签: UEdito图片
66898人阅读 评论(33) 收藏 举报
分类:

开心一笑

下班后,阿华到楼下小超市买毛巾,刚买完出来,就遇到同一办公楼里另一家公司的阿菲,之前与她远远的有过几次眼神交流,但从没说过话,“买毛巾啊”,看着阿华手里的毛巾,阿菲先开口了。
阿华回到:“是啊,这里的老板眼神太好了,我不敢偷,就只有买了。”
阿菲一下就哈哈笑了,配合到:“哇,原来你是小偷。”
阿华:“嘘,小声点,其实主要原因是……”阿华指着自己的脑袋接着说到:“你看,我是个有头有脸的人,所以还是要用用毛巾的。”

视频教程

CSDN学院:

http://edu.csdn.net/lecturer/994

腾讯学院:

https://huangwy.ke.qq.com/

网易学院:

http://study.163.com/instructor/1035331499.htm

提出问题

Ueditor简单介绍和实现图片上传功能????

读书感悟

前提:

  • 假如你已经安装tomcat服务器;
  • 假如你已经把项目运行到Eclipse上;
  • 假如你已经有java基础;
  • 假如你对js有一定基础;
  • 假如你已经下载ueditor1_4_3_3-src源码,记得是开发的哦;

那么开始吧!

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

运行tomcat上,在google浏览器运行(Test是我的项目名称):

http://localhost:8081/Test/jsp/config.json

出现一串长长的json的字符串,说明运行成功。

这里写图片描述

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

3.运行http://localhost:8081/Test/_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:8081/Test/_examples/simpleDemo.html

如图:

这里写图片描述

5.可是你会发现,点击图片上传按钮,一点反应都没有,尼玛有木有!
这里开始介绍ueditor.config.js文件,

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

重点讲:serverUrl: URL + “php/controller.php”,没错,你没有看错,这个就是请求后端的统一接口路径,记得是统一接口路径,也就是说只有这个路径,没有第二个,会不会觉得很坑呢?

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

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

window.UEDITOR_CONFIG = {

    //为编辑器实例添加一个路径,这个不能被注释
    UEDITOR_HOME_URL: URL

    // 服务器统一请求接口路径
    , serverUrl: URL + "php/controller.php"

    //工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的重新定义
    , toolbars: [[
        'fullscreen', 'source', '|', 'undo', 'redo', '|',
        'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
        'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
        'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
        'directionalityltr', 'directionalityrtl', 'indent', '|',
        'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
        'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
        'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
        'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
        'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
        'print', 'preview', 'searchreplace', 'drafts', 'help'
    ]]
    //当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置,否则以配置值为准
    //,labelMap:{
    //    'anchor':'', 'undo':''
    //}

    //语言配置项,默认是zh-cn。有需要的话也可以使用如下这样的方式来自动多语言切换,当然,前提条件是lang文件夹下存在对应的语言文件:
    //lang值也可以通过自动获取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase()
    //,lang:"zh-cn"
    //,langPath:URL +"lang/"

    //主题配置项,默认是default。有需要的话也可以使用如下这样的方式来自动多主题切换,当然,前提条件是themes文件夹下存在对应的主题文件:
    //现有如下皮肤:default
    //,theme:'default'
    //,themePath:URL +"themes/"

    //,zIndex : 900     //编辑器层级的基数,默认是900

    //针对getAllHtml方法,会在对应的head标签中增加该编码设置。
    //,charset:"utf-8"

    //若实例化编辑器的页面手动修改的domain,此处需要设置为true
    //,customDomain:false

    //常用配置项目
    //,isShow : true    //默认显示编辑器

    //,textarea:'editorValue' // 提交表单时,服务器获取编辑器提交内容的所用的参数,多实例时可以给容器name属性,会将name给定的值最为每个实例的键值,不用每次实例化的时候都设置这个值

    //,initialContent:'欢迎使用ueditor!'    //初始化编辑器的内容,也可以通过textarea/script给值,看官网例子

这里写图片描述
6.你会发现,你选择一张图片,我卡,图片上传不了
打开google浏览器调试,如下图:

这里写图片描述

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

    // 服务器统一请求接口路径
    , serverUrl: URL + "jsp/controller.jsp"

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

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

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

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

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

"imageUrlPrefix" = http://localhost:8081/Test/


/* 前后端通信相关的配置,注释只允许使用多行方式 */
{
    /* 上传图片配置项 */
    "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制,单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "http://localhost:8081/Test/", /* 图片访问路径前缀 */
    "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
                                /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
                                /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
                                /* {time} 会替换成时间戳 */
                                /* {yyyy} 会替换成四位年份 */
                                /* {yy} 会替换成两位年份 */
                                /* {mm} 会替换成两位月份 */
                                /* {dd} 会替换成两位日期 */
                                /* {hh} 会替换成两位小时 */
                                /* {ii} 会替换成两位分钟 */
                                /* {ss} 会替换成两位秒 */
                                /* 非法字符 \ : * ? " < > | */
                                /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */

图片如下:

这里写图片描述

8.结束,可是这样真的够吗,够吗,够吗,爽吗,爽吗,爽吗 重要的事说三遍????

请看下一章《UEditor之基于Java图片上传前后端源码研究》

读书感悟

来自《天空之城》

  • 越是试着忘记,越是记得深刻;有时候坚持你最不想做的事之后,变可得到你最想要的东西。
  • 迷倒我的不是彩虹,而是在我面前,看彩虹的人。
  • 谁在梦,谁沉醉,谁在醒,谁笑,谁心痛,谁站在城中等着你,谁在城外等我,看天空之城的焰火,照亮的是寂寞

个人感悟

其他

如果有带给你一丝丝小快乐,就让快乐继续传递下去,欢迎转载,点赞,顶,欢迎留下宝贵的意见,多谢支持!

30
2
查看评论

UEditor之图片上传如何和真实项目结合

开心一笑 周末,五六个朋友聚餐,席间,阿凌注意到阿艳沉默少语,不比以往的活波开朗,像有心事。饭后回去的路上,阿凌走到阿艳身边说:“你的电量好像不够了?” 阿艳:“啊,什么?” 阿凌:“看你好像关掉了好多程序,今天不见你说话,也不见你笑。”这时,阿凌指着阿艳的脸接着说道:“看,就只剩屏幕还安静地...
  • huangwenyi1010
  • huangwenyi1010
  • 2016-06-12 20:26
  • 29631

Ueditor 图片上传配置

(三) 下面这部分呢,来讲下编辑器的上传图片的功能,在官方文件中没有详细的介绍怎么配置上传图片的方法 1)在ueditor/jsp下的config.json文件中修改 "imageUrlPrefix"和"imagePathFormat" ...
  • u014362204
  • u014362204
  • 2017-03-22 11:22
  • 4958

百度控件ueditor上传图片到指定路径(即图片存储在服务器外面,非工程目录下)

最近做个小项目,项目要求把使用百度控件ueditor上传的图片存放在非工程目录下,指定到指定盘符,路径可配置,ueditor默认情况下存放在工程内部,如: D:\soft\apache-tomcat-7.0.41\apache-tomcat-7.0.41\webapps\njhd\ueditor 现...
  • yuancenyi
  • yuancenyi
  • 2016-11-24 23:04
  • 14287

ueditor修改图片上传 文件上传 .net版 自定义文件夹

  • 2015-05-18 23:34
  • 3.47MB
  • 下载

ueditor跨域上传图片文件(基于jsp框架、tomcat)

额,好久没有用到ueditor了,因为现在的相关工作很少涉及到富文本编辑;最近临时带了一个项目,里面要用到富文本编辑器,而且文件要统一上传到文件服务器上保存;应为以前用过ueditor就试着在网上着一些跨域保存的资料,找了半天都是只言片语说不清楚,最后摸索了两天,综合了网上的很多办法,结合自己的一些...
  • u012613903
  • u012613903
  • 2017-01-19 15:21
  • 5509

Ueditor 1.4.3 单独调用上传图片,或文件功能

第一步, 引入文件<script src="ueditor/ueditor.config.js" type="text/javascript" charset="utf-8"></script> <script...
  • xuz0917
  • xuz0917
  • 2017-05-20 14:35
  • 535

SSM配置Ueditor实现图片的上传<二>

今天下午写的那篇博客好像挺多人看的,回去以后惊了我都!本来想洗洗睡的我准备打起精神继续讲讲SSM配置Ueditor实现图片的自定义上传,上篇博客我们配置成功了用Ueditor实现了图片的上传,但是显然在实际开发的过程当中,我们的图片的地址和图片名称是要存在数据库,然而用Ueditor默认的上传功能,...
  • qq_34292044
  • qq_34292044
  • 2017-05-15 00:17
  • 1623

UEditor上传图片和上传文件(基于jquery)

客户端:                                         &#...
  • HuiShouDeZaiLai
  • HuiShouDeZaiLai
  • 2017-07-19 12:36
  • 210

基于ueditor-1.4.3.3实现图片上传到项目以外的目录下

  • 2017-07-28 15:45
  • 30KB
  • 下载

Ueditor 图片自定义上传

本文学习自:http://yt-lemon.iteye.com/blog/2210465 非常感谢! 百度富文本编辑器ueditor 下载地址: http://ueditor.baidu.com/website/download.html 一、准备工作 按需下载不同版本。 ...
  • Only_Wan
  • Only_Wan
  • 2017-04-06 14:19
  • 1865
    个人资料
    • 访问:419813次
    • 积分:5618
    • 等级:
    • 排名:第5578名
    • 原创:201篇
    • 转载:0篇
    • 译文:0篇
    • 评论:313条
    个人教程

    CSDN视频教程

    个人信息
    博客专栏