今天项目中要使用富文本编辑器，原本选择的是wangEditor，也是一款不错的编辑器，如果可以和ueditor一样可以看到代码就更好了。因为需要对编辑器中的内容添加样式，最终，还是选择了ueditor。也是第一次用ueditor，也参考了其他博主的文章，方便以后使用，所以记录一下。
第一步：
到ueditor官网将源码下载下来。官网地址：ueditor下载地址
我下载的是：jsp utf8版
第二步：
将压缩包解压后，把jsp文件夹之外的所有文件复制到你项目的静态目录下。
第三步：新建UeditorEntity实体
@Data
public class UeditorEntity {
private String state;
private String url;
private String title;
private String original;
public UeditorEntity() {
super();
}
public UeditorEntity(String state, String url, String title, String original) {
this.state = state;
this.url = url;
this.title = title;
this.original = original;
}
}
这个实体的作用是返回给编辑器的json格式。
第四步：创建PublicMsg配置类
此类是代替源码中jsp/config.json文件，在编辑初始化请求action=config时将内容返回前端。
public class PublicMsg {
public final static String UEDITOR_CONFIG = "{\n" +
" \"imageActionName\": \"uploadimage\",\n" +
" \"imageFieldName\": \"upfile\",\n" +
" \"imageMaxSize\": 2048000,\n" +
" \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
" \"imageCompressEnable\": true,\n" +
" \"imageCompressBorder\": 1600,\n" +
" \"imageInsertAlign\": \"none\",\n" +
" \"imageUrlPrefix\": \"http://192.168.0.166\",\n" +
" \"imagePathFormat\": \"\",\n" +
" \"scrawlActionName\": \"uploadscrawl\",\n" +
" \"scrawlFieldName\": \"upfile\",\n" +
" \"scrawlPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"scrawlMaxSize\": 2048000,\n" +
" \"scrawlUrlPrefix\": \"\",\n" +
" \"scrawlInsertAlign\": \"none\",\n" +
" \"snapscreenActionName\": \"uploadimage\",\n" +
" \"snapscreenPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"snapscreenUrlPrefix\": \"\",\n" +
" \"snapscreenInsertAlign\": \"none\",\n" +
" \"catcherLocalDomain\": [\"127.0.0.1\", \"localhost\", \"img.baidu.com\"],\n" +
" \"catcherActionName\": \"catchimage\",\n" +
" \"catcherFieldName\": \"source\",\n" +
" \"catcherPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"catcherUrlPrefix\": \"\",\n" +
" \"catcherMaxSize\": 2048000,\n" +
" \"catcherAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
" \"videoActionName\": \"uploadvideo\",\n" +
" \"videoFieldName\": \"upfile\",\n" +
" \"videoPathFormat\": \"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"videoUrlPrefix\": \"\",\n" +
" \"videoMaxSize\": 102400000,\n" +
" \"videoAllowFiles\": [\n" +
" \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
" \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\"],\n" +
" \"fileActionName\": \"uploadfile\",\n" +
" \"fileFieldName\": \"upfile\",\n" +
" \"filePathFormat\": \"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
" \"fileUrlPrefix\": \"\",\n" +
" \"fileMaxSize\": 51200000,\n" +
" \"fileAllowFiles\": [\n" +
" \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
" \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
" \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
" \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
" \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
" ],\n" +
" \"imageManagerActionName\": \"listimage\",\n" +
" \"imageManagerListPath\": \"/ueditor/jsp/upload/image/\",\n" +
" \"imageManagerListSize\": 20,\n" +
" \"imageManagerUrlPrefix\": \"\",\n" +
" \"imageManagerInsertAlign\": \"none\",\n" +
" \"imageManagerAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"],\n" +
" \"fileManagerActionName\": \"listfile\",\n" +
" \"fileManagerListPath\": \"/ueditor/jsp/upload/file/\",\n" +
" \"fileManagerUrlPrefix\": \"\",\n" +
" \"fileManagerListSize\": 20,\n" +
" \"fileManagerAllowFiles\": [\n" +
" \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
" \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
" \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
" \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
" \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
" ]\n" +
"}";
}
此类的参数作用，官网有详细说明。参数说明
修改参数值：
因为我只上传图片所以只对图片相关的参数做了修改。
imageUrlPrefix：前端显示图路径前缀。
imagePathFormat：生成文件名，因为我的文件名是在后端生成，所以此处我设置为空。
第五步：创建UeditorController
@Controller
public class UeditorController {
@Autowired
private SystemHelpService systemHelpService;
@Autowired
private SystemPlatformInfoService systemPlatformInfoService;
@Autowired
private SystemServiceService systemServiceService;
/**
* ueditor请求方法
*
* @param param
* @param upfile
* @param request
* @param filepath 自定义参数
* @return
*/
@RequestMapping(value = "/ueditor")
@ResponseBody
public String ueditor(@RequestParam("action") String param, MultipartFile upfile, HttpServletRequest request, @RequestParam(value = "filepath", required = false) String filepath) {
UeditorEntity ueditor = new UeditorEntity();
if (param != null & param.equals("config")) {
return PublicMsg.UEDITOR_CONFIG;
} else if (param != null & param.equals("uploadimage") || param.equals("uploadscrawl")) {
if (upfile != null) {
//{state：”数据状态信息”，url：”图片回显路径”，title：”文件title”，original：”文件名称”，···}
try {
return uploadImg(upfile, request, filepath);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
ueditor.setState("出现异常");
return JSON.toJSONString(ueditor);
}
} else {
ueditor.setState("文件为空");
return JSON.toJSONString(ueditor);
}
} else {
ueditor.setState("不支持该操作");
return JSON.toJSONString(ueditor);
}
}
@RequestMapping(value = "/imgUpload")
@ResponseBody
public UeditorEntity imgUpload(@RequestParam("action") String param, MultipartFile upfile, HttpServletRequest request) {
UeditorEntity ueditor = new UeditorEntity();
return ueditor;
}
/**
* 上传图片
* @param file
* @param request
* @param filepath
* @return
* @throws IOException
*/
public String uploadImg(MultipartFile file,
HttpServletRequest request, String filepath) throws IOException {
UeditorEntity ueditor = new UeditorEntity();
// 保存
Map<String, String> map = null;
try {
if ("help".equals(filepath)) {
map = systemHelpService.uploadImgs(file);
}
if ("aboutus".equals(filepath)) {
map = systemPlatformInfoService.uploadEditorImg(file);
}
if ("service".equals(filepath)) {
map = systemServiceService.uploadImgs(file);
}
} catch (Exception e) {
e.printStackTrace();
}
if (map != null) {
ueditor.setState("SUCCESS");
ueditor.setTitle(map.get("fileName"));
ueditor.setOriginal(map.get("fileName"));
ueditor.setUrl(map.get("imgUrl"));
} else {
ueditor.setState("ERROR:上传失败");
}
System.out.println(JSON.toJSONString(ueditor));
return JSON.toJSONString(ueditor);
}
}
ueditor方法中的filepath为自定义参数。因为项目中不同的图片放在不同的文件夹，所以通过此参数来进行控制。我的图片是保存在其他服务器上，具体代码在service中，此处不再贴出。
第六步：修改ueditor.config.js
修改为你自己的路径。
第七步：添加html内容
<!-- 加载编辑器的容器 -->
<textarea id="aboutContent" name="aboutContentStr" style="width:1024px;height:400px;"></textarea>
js文件引用：
<!-- 配置文件 -->
<script type="text/javascript" th:src="@{/ueditor/ueditor.config.js}"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" th:src="@{/ueditor/ueditor.all.js}"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
// 初始化编辑器
var editor = UE.getEditor("aboutContent");
// 自定义请求参数，UeditorController 中ueditor方法的filepath
editor.ready(function () {
editor.execCommand('serverparam', {
'filepath': 'help'
});
});
// 获取编辑器内容
var html = editor.getContent();
</script>
到此编辑器就配置成功了，也可以上传图片。
4470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
