网站的文章,通过运营平台来发布文章(图文消息),上传图片等。百度Ueditor比较成熟就采用了该技术,另外上传的图片是网站系统以及运营平台系统共享的,所以考虑搭建独立的图片服务器,以后也可以提供给公司其他服务使用,当做单独的文件服务器。
1、Ueditor接入
关于Ueditor的接入,资料很多,我主要参考了:http://blog.csdn.net/Amayadream/article/details/47285209等博客,官网:http://fex.baidu.com/ueditor/。
(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接口:
/** * 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); }
具体看我提供的链接里的代码。
(2)将ueditor的静态代码js/css等放到项目里,需要配置的地方:
ueditor.config.json——配置各种图片、文件路径名称,远程上传的话需要配置以下:
ftp上传部分的代码,在我提供的包里,我提供的代码改一下相应的包名,可以直接使用。接下来的文章会讲解包里的部分代码。
imageUrlPrefix可以配置图片服务器的地址,如果是本地的话为空。Ueditor是自动将imageUrlPrefix+imagePathFormat作为完整的图片地址来使用的。
(3)配置:
设置window.UEDITOR_HOME_URL
设置后台请求URL,所有Ueditor的统一请求地址,请求到我上边提到的Controller的统一入口,不同的请求包括:imageUpload/config等等。该配置是ueditor.config.js:
2、textArea嵌入编辑器:
引入js文件:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!-- 配置文件 --> <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>
textArea部分:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<td>
<!-- 加载编辑器的容器 --> <textArea id="newsContent" name='newsContent'
style="width: 100%; height: 100%;">${newsCenter.newsContent}</textArea>
</td>
至此,该编辑器可以正常使用,可以写文字,文章中嵌入图片。图片会上传至远程服务器,图片地址是ueditor自动拼接:imageUrlPrefix+imagePathFormat,我是把整篇文章的内容(getContent方法),包括样式,图片地址存入数据一个text字段。网站的前端可以直接拿来展示。
3、Ueditor单独上传图片功能:
Ueditor没有提供单独上传图片的功能,但是编辑器中有上传图片的功能,可以基于此,稍稍加点内容就可以实现了:
JS代码以及HTML部分代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!-- 配置文件 --> <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>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<tr> <td>新闻配图</td> <td><input type="text" id="pictureHref" name="pictureHref" style="width: 100%;" value="${newsCenter.pictureHref}"></td> <td><a href="javascript:void(0)" οnclick="upImage()">上传图片</a></td> <td><img id="showImage" src="${newsCenter.pictureHref}" style="width: 120px; height: 100px;"> <!-- 定义一个新编辑器,但是会隐藏它,因为只会用到图片上传 --> <textarea id="uploadImage"></textarea></td> </tr>
image.js中做如下修改,找截图部分位置,加一句:
至此,就可以单独使用上传图片的功能了。效果如下:
因为我对前端不太熟练,所以这篇文章写得不是很清晰。还请见谅。
下一篇文章我会写搭建图片服务器部分,以及如何通过ftp传文件到图片服务器部分。