使用Ueditor上传图片到图片服务器（一）

网站的文章，经过运营平台来发布文章（图文消息），上传图片等。百度Ueditor比较成熟就采用了该技术，另外上传的图片是网站系统以及运营平台系统共享的，因此考虑搭建独立的图片服务器，之后也能够提供给公司其余服务使用，当作单独的文件服务器。javascript

一、Ueditor接入

关于Ueditor的接入，资料不少，我主要参考了：http://blog.csdn.net/Amayadream/article/details/47285209等博客，官网：http://fex.baidu.com/ueditor/。css

（1）：添加pom依赖前端

<!-- Ueditor begins -->
        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>${version.commons-codec}</version>
        </dependency>
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>${version.commons-fileupload}</version>
        </dependency>
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>${version.json}</version>
        </dependency>
<dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>${commons-io.version}</version>
        </dependency>
        <!-- Ueditor ends -->

并无引入ueditor的jar包，而是在源码的基础上进行了二次开发，有须要的能够找我要（连接：https://pan.baidu.com/s/1kXb17gz 密码：joom）。全部ueditor的统一入口Controller接口：java

/** * ueditor编辑器 */ @RequestMapping("ueditor") public ResponseEntity<String> ueditor(HttpServletRequest request) { HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.TEXT_HTML); String json = ueditorService.exec(request); return new ResponseEntity<String>(json, headers, HttpStatus.OK); }

具体看我提供的连接里的代码。json

（2）将ueditor的静态代码js/css等放到项目里，须要配置的地方：服务器

ueditor.config.json——配置各类图片、文件路径名称，远程上传的话须要配置如下：app

ftp上传部分的代码，在我提供的包里，我提供的代码改一下相应的包名，能够直接使用。接下来的文章会讲解包里的部分代码。编辑器

imageUrlPrefix能够配置图片服务器的地址，若是是本地的话为空。Ueditor是自动将imageUrlPrefix+imagePathFormat做为完整的图片地址来使用的。ide

（3）配置：网站

设置window.UEDITOR_HOME_URL

设置后台请求URL，全部Ueditor的统一请求地址，请求到我上边提到的Controller的统一入口，不一样的请求包括：imageUpload/config等等。该配置是ueditor.config.js：

二、textArea嵌入编辑器：

引入js文件：

<!-- 配置文件 -->
<script type="text/javascript" src="${staticPath }/static/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="${staticPath }/static/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript"> var jobRequirementUe = UE.getEditor('jobRequirement', { autoHeightEnabled : true, autoFloatEnabled : true }); var jobResponsibilityUe = UE.getEditor('jobResponsibility', { autoHeightEnabled : true, autoFloatEnabled : true }); </script>

View Code

textArea部分：

<td>
                        <!-- 加载编辑器的容器 --> <textArea id="newsContent" name='newsContent' style="width: 100%; height: 100%;">${newsCenter.newsContent}</textArea>
                    </td>

View Code

至此，该编辑器能够正常使用，能够写文字，文章中嵌入图片。图片会上传至远程服务器，图片地址是ueditor自动拼接：imageUrlPrefix+imagePathFormat，我是把整篇文章的内容（getContent方法），包括样式，图片地址存入数据一个text字段。网站的前端能够直接拿来展现。

三、Ueditor单独上传图片功能：

Ueditor没有提供单独上传图片的功能，可是编辑器中有上传图片的功能，能够基于此，稍稍加点内容就能够实现了：

JS代码以及HTML部分代码：

<!-- 配置文件 -->
<script type="text/javascript" src="${staticPath }/static/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="${staticPath }/static/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript"> var uploadImageUe = UE.getEditor("uploadImage", { initialFrameWidth : 800, initialFrameHeight : 300, }); uploadImageUe.ready(function() { //设置编辑器不可用(事实上不能够设置不可用...因此注释掉,以观后效) //_editor.setDisabled(); //隐藏编辑器,由于只使用上传功能
 uploadImageUe.hide(); //侦听图片上传
        uploadImageUe.addListener('beforeInsertImage', function(t, arg) { //将图片地址赋给input
            $("#pictureHref").attr("value", arg[0].src); //将图片地址赋给img的src,实现预览
            $("#showImage").attr("src", arg[0].src); }); }); //上传dialog
 function upImage() { var myImage = uploadImageUe.getDialog("insertimage"); myImage.open(); } </script>

View Code

<tr>
                    <td>新闻配图</td>
                    <td><input type="text" id="pictureHref" name="pictureHref" style="width: 100%;" value="${newsCenter.pictureHref}"></td>
                    <td><a href="javascript:void(0)" onclick="upImage()">上传图片</a></td>
                    <td><img id="showImage" src="${newsCenter.pictureHref}" style="width: 120px; height: 100px;"> <!-- 定义一个新编辑器,可是会隐藏它,由于只会用到图片上传 -->
                        <textarea id="uploadImage"></textarea></td>
                </tr>

View Code

image.js中作以下修改，找截图部分位置，加一句：

至此，就能够单独使用上传图片的功能了。效果以下：

由于我对前端不太熟练，因此这篇文章写得不是很清晰。还请见谅。

下一篇文章我会写搭建图片服务器部分，以及如何经过ftp传文件到图片服务器部分。