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

原创 2016年06月11日 18:27:31

开心一笑

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

视频教程

大家好，我录制的视频《Java之优雅编程之道》已经在CSDN学院发布了，有兴趣的同学可以购买观看，相信大家一定会收获到很多知识的。谢谢大家的支持……

视频地址：http://edu.csdn.net/lecturer/994

提出问题

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图片上传前后端源码研究》

读书感悟

来自《天空之城》

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

个人感悟

其他

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