富文本编辑器-ueditor基本配置

首页 > 代码库 > 富文本编辑器-ueditor基本配置

富文本编辑器-ueditor基本配置

2024-07-03 22:27:24 233人阅读

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码..相对于其他流行的富文本编辑器如ckeditor等具有配置简单、更具有中国特色！以下主要是涉及的内容是关于百度富文本编辑器的上传配置以及如何与struts2等结合问题。

1 版本问题

一般而言建议使用UMEditor版本，同时百度web前端开发部也提供了定制版本。如果使用定制版本要注意的一点就是将工具栏的图标添加上分割线！分割线添加的方法如下就可：

ueditor.config.js查找toolbars，可以在相关的功能按钮之间加"|"

2 上传配置

UEditor默认的上传路径是/ueditor/jsp/upload/..，这个相对而言是很不合理的！一般而言上传文件夹是放置在网站的根目录之下的。

由于所有的资源与编辑器资源路径有关所以首先设置编辑器资源路径为相对路径为：/项目名/编辑器文件夹/

2.1 上传图片配置

图片上传主要涉及以下参数

ueditor.config.js ->imagePath //图片修正地址

config.properties->savePath //图片存储地址

imageUp.jsp //图片上传Java代码

以上imagePath+"savePath"为图片在网络中的地址，其中imagePath是用于上传图片回显，一般为upload的父路径，savePath是相对于imageUp.jsp的相对地址，如../../upload/images则是网站根目录下的upload/images文件夹。

2.1.1 ueditor.config.js配置

2.2.2 config.properties配置

savePath=../../upload/images

2.2.3 imageUp.jsp配置

未修改:

1 up.upload();
2 response.getWriter().print("{‘original‘:‘"+up.getOriginalName()+"‘,‘url‘:‘"+up.getUrl()+"‘,‘title‘:‘"+up.getTitle()+"‘,‘state‘:‘"+up.getState()+"‘}");

View Code

修改之后：

1 up.upload();
2 /*URL的修正,此处涉及到回显*/
3 String urlFix=up.getUrl().replace("../../", "");  
4 response.getWriter().print("{‘original‘:‘"+up.getOriginalName()+"‘,‘url‘:‘"+urlFix+"‘,‘title‘:‘"+up.getTitle()+"‘,‘state‘:‘"+up.getState()+"‘}");

View Code

2.2 图片管理配置

由于图片上传配置的修改，所以其后的图片管理必须同时修改配置，其中主要涉及的是

ueditor.config.js -> imageManagerPath //图片管理地址

imageManage.jsp //图片管理Java代码

2.2.1 ueditor.config.js修改