最近公司项目中需要做一个简易的BBS论坛,相应的就需要富文本编辑器,之前使用过CFeditor,但UI总感觉不适合个人喜爱,经过对比后选择了百度开源的UEditor。
UEditor官网地址:http://ueditor.baidu.com/website/
目前最新版本:1.4.3,以下使用及配置都是基于此版本。我们使用的是jsp版本,以下为默认目录:
进入jsp目录,我们可以看到ueditor所需要依赖的包,以及统一处理入口controller.jsp,还有对应请求配置,主要是涉及上传图片,视频,文件等;
将ueditor引入eclipse的web工程中
由于项目中使用maven工程,需要将依赖的jar配置到pom.xml中
一、配置
1. 定义页面展现的对象
<script id="message" name="message" type="text/plain">
或
<textarea id="message"></textarea>
2. 引入UEditor的JS文件
<script type="text/javascript" src="${contextPath}/ueditor/ueditor.config.js"></script> <script type="text/javascript" src="${contextPath}/ueditor/ueditor.all.min.js"></script>
3. 根据实际情况,修改相应的配置
<script type="text/javascript"> // 定义UEditor对应的主目录 window.UEDITOR_HOME_URL = "${contextPath}/ueditor/"; // 页面加载完成后载入UEditor window.onload = function () { window.UEDITOR_CONFIG.initialFrameWidth = 1600; window.UEDITOR_CONFIG.initialFrameHeight = 600; UE.getEditor("message"); } </script>
4. 运行所在的WEB应用,浏览相应的页面就可以看到UEditor效果;
5. 可以根据实际需要对富文本进行精简
window.UEDITOR_CONFIG.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', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|', 'insertimage', 'insertvideo', 'emotion', 'pagebreak', '|', 'horizontal', 'date', 'time', 'spechars', '|', 'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', '|', 'preview', 'searchreplace' ]];
6. 自定义请求地址,ueditor 1.4.2+ 推荐使用唯一的请求地址,通过GET参数action指定不同请求类型,但往往在实际开发中,我们需要自己定义图片或其它附件上传逻辑。UEditor默认上传目录为ueditor主目录/ueditor/jsp/upload/image/文件名,这里我们使用自己实现的文件上传逻辑,依赖spring mvc,以下为示例代码:
spring mvc 配置
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:p="http://www.springframework.org/schema/p" xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd"> <!-- 自动扫描且只扫描@Controller --> <context:component-scan base-package="net.jforum.view.forum" use-default-filters="false"> <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller" /> <context:include-filter type="annotation" expression="org.springframework.web.bind.annotation.ControllerAdvice" /> </context:component-scan> <mvc:annotation-driven content-negotiation-manager="contentNegotiationManager"> <mvc:message-converters register-defaults="true"> <!-- 将StringHttpMessageConverter的默认编码设为UTF-8 --> <bean class="org.springframework.http.converter.StringHttpMessageConverter"> <constructor-arg value="UTF-8" /> </bean> <!-- 将Jackson2HttpMessageConverter的默认格式化输出设为true --> <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"> <property name="prettyPrint" value="true" /> </bean> </mvc:message-converters> </mvc:annotation-driven> <!-- REST中根据URL后缀自动判定Content-Type及相应的View --> <bean id="contentNegotiationManager" class="org.springframework.web.accept.ContentNegotiationManagerFactoryBean"> <property name="mediaTypes"> <value> json=application/json xml=application/xml </value> </property> </bean> <!-- 容器默认的DefaultServletHandler处理 所有静态内容与无RequestMapping处理的URL --> <mvc:default-servlet-handler /> <!-- 定义无需Controller的url<->view直接映射 --> <mvc:view-controller path="/" view-name="index" /> <!-- SpringMVC上传文件时,需要配置MultipartResolver处理器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding" value="UTF-8"/> <!-- 指定所上传文件的总大小不能超过6M。注意maxUploadSize属性的限制不是针对单个文件,而是所有文件的容量之和 --> <property name="maxUploadSize" value="6291456"/> <property name="resolveLazily" value="true"/> </bean> </beans>图片上传:
private static Logger logger = Logger.getLogger(UeditorAction.class); private ObjectMapper mapper = new ObjectMapper(); @RequestMapping(value = "uploadImage", method = RequestMethod.POST) @ResponseBody public String uploadImage(@RequestParam("upfile") MultipartFile file, HttpServletRequest request, HttpServletResponse response) { String output = ""; Map<String, Object> result = new HashMap<String, Object>(); try { String fileName = file.getOriginalFilename(); String uuid = UUID.randomUUID().toString(); Map<String, Object> userInfo = SSOUserUtil.getPrincipal(request); String userId = String.valueOf(userInfo.get(IUser.USER_ID)); String filePath = FilePathUtil.getUploadFullPath(String.valueOf(userId), uuid + fileName.substring(fileName.lastIndexOf("."))); FileUtil.uploadFile(filePath, file.getInputStream()); String url = Base64.encodeBase64String(filePath.getBytes("UTF-8")); result.put("url", HttpServletUtil.getServerName(request) + "/ueditor/getImage/" + url); result.put("original", fileName); result.put("size", file.getSize()); result.put("type", fileName.substring(fileName.lastIndexOf("."))); result.put("state", "SUCCESS"); output = mapper.writeValueAsString(result); } catch (Exception e) { logger.error("ueditor image upload error : ", e); } return output; }页面图片上传请求地址:
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl; UE.Editor.prototype.getActionUrl = function(action) { if (action == "uploadimage") { return "${contextPath}/ueditor/uploadImage"; } else { return this._bkGetActionUrl.call(this, action); } }图片获取:
@RequestMapping(value = "getImage/{path}", method = RequestMethod.GET) public void getImage(@PathVariable String path, HttpServletRequest request, HttpServletResponse response) { FileInputStream fis = null; OutputStream os = null; try { path = new String(Base64.decodeBase64(path), "UTF-8"); fis = new FileInputStream(path); os = response.getOutputStream(); int c; byte[] b = new byte[4096]; while ((c = fis.read(b)) != -1) { os.write(b, 0, c); } os.flush(); } catch (Exception e) { logger.error("ueditor get image error : ", e); } finally { if (fis != null) { try { fis.close(); } catch (Exception e) { } } if (os != null) { try { os.close(); } catch (Exception e) { } } } }到此图片上传OK。
相关推荐
ueditor包含使用方法
百度Ueditor使用方法
亲测整理的ueditor的使用步骤及引用方法,帮助新手同仁绕坑
注意本文不提供一条龙式的使用方法,只是将使用过程中的一些实现思路进行总结,供以参考。react项目中导入ueditor,会存在各种不正交的问题,需要注意。 引入 首先在ueditor官网下载最新安装包,然后在项目入口的...
网上搜索后,发现有人也遇到此问题,并且对ueditor的源码进行编辑,实现了上传到项目外的指定目录下,但是不够灵活,只要使用了该jar包后,只能上传其他目录,本身到项目路径的又不支持了。我们项目的文件存放位置,...
东西完整,亲测可用
ueditor使用
由于项目需求,要开发一个新闻发布模块,在网上找了找,看有没有什么插件可以用,后来发现了Ueditor百度编辑器,的确挺强大的。这里我只讲解jsp版本的,与servlet和SpringMVC整合,两种方式的应用。这里提供了纯...
ueditor使用说明文档,自己编写的,希望对你有帮助
此文档中有相关的说明,具体的说明已在文档中列出
springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑).doc
1、内含两个文件:①、UEditorDemo.rar ②、UEdtior的简单使用.doc; 2、第一个文件是一个web项目,可以导入MyEclipse中直接启动看效果; 3、第二个文件时一个word文档,记录了UEditor的使用过程; 4、需要一个资源...
jsp中使用ueditor的详细案例,仅供参考。示例中许多细节未能详细考虑周到,欢迎指正。
直接在myeclipse上导入项目后,就可以直接运行,看了这个案例 ueditor 你就会了 很有帮助的 支持图片上传功能 相信对你有帮助
网页版百度在线ueditor编辑器使用下载 网页版百度在线ueditor编辑器使用下载
vue 百度编辑器ueditor使用文件,直接使用在项目即可.
ThinkPHP UEditor 配置以及使用案例 是一个js 文件 里面有 后台 action 前台 html 案例,被代码注释掉 亲测可用,js中的配置较为详细,明天继续搞定图片的插入与上传
百度Ueditor最新版使用实例,配置无错误,简单易懂,实用。
ueditor静态资源包最新版
帮助想要使用vue-ueditor-wrap的伙伴们更便捷的获取到这个资源运行项目