【Spring Boot】使用百度富文本UEditor

本文最后更新于 1739 天前，其中的信息可能已经有所发展或是发生改变。

[successbox title=”Eeditor”]

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。

Github项目地址：https://github.com/fex-team/ueditor

官网下载地址：https://ueditor.baidu.com/website/download.html

[/successbox]

[successbox title=”Spring Boot中的使用”]

1.导入Maven。

[sourcecode language=”xml” title=”pom.xml”]
<!–UEditor依赖的jar包 –>

<!– https://mvnrepository.com/artifact/org.json/json –>
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20180130</version>
</dependency>

<!– https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload –>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>
<!– 也是md5加密的包 –>
<!– https://mvnrepository.com/artifact/commons-codec/commons-codec –>
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.11</version><!–$NO-MVN-MAN-VER$–>
</dependency>

<!– https://mvnrepository.com/artifact/commons-io/commons-io –>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.6</version>
</dependency>
[/sourcecode]
2.将下载的UEditor解压并放入静态资源里面。
3.修改文件里面的ueditor/ueditor.config.js 修改如下内容
[sourcecode language=”xml” title=”ueditor.config.js”]
window.UEDITOR_CONFIG = {

//为编辑器实例添加一个路径，这个不能被注释
UEDITOR_HOME_URL: URL

// 服务器统一请求接口路径
, serverUrl: "/ueditor/ueditor"

//工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义
[/sourcecode]
4.添加配置文件类。
[sourcecode language=”java” title=”PublicMsg.java”]
package com.liuliu.com.util;

public class PublicMsg {
public final "\n" +
"\n" +
"\n" +
"\n" +
" " "\n" +
" " " " " "\n" +
"\n" +
" " " " " "\n" +
"}";
/**
* Ueditor的返回状态类型
*/
public enum UeditorMsg{
SUCCESS(&q private String v;
UeditorMsg(String v){
this.v =v;
}
public String get(){
return this.v;
}
}
}
[/sourcecode]
5.添加controller。
[sourcecode package com.liuliu.com.controller; 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\": \"\",\n" +
" \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\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" +
uot;SUCCESS"),ERROR("上传失败");
language=”java” title=”UeditorController.java”]

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import com.liuliu.com.domain.Ueditor;
import com.liuliu.com.util.DateUtil;
import com.liuliu.com.util.MD5;
import com.liuliu.com.util.PublicMsg;
import com.liuliu.com.util.Upload;

@Controller("UeditorController")
@RequestMapping("/ueditor")
public class UeditorController {

@RequestMapping(value="/ueditor")
@ResponseBody
public String ueditor(HttpServletRequest request) {

return PublicMsg.UEDITOR_CONFIG;
}

//配置图片上传
@RequestMapping(value="/imgUpload")
@ResponseBody
public Ueditor imgUpload(MultipartFile upfile) {
Ueditor ueditor = new Ueditor();
//下面是用到另一篇文章的上传文件类
String filename = Upload.upload(upfile, "C:\\APP\\java\\spring boot\\eclipse-workspace\\liuliu\\src\\main\\resources\\static\\imgs\\introduce\\",
//给文件重命名
MD5.md5(DateUtil.getNowNumber()+Math.round(Math.random() * 1000000)));
//注意是大写的SUCCESS
ueditor.setState("SUCCESS");
ueditor.setUrl("/imgs/introduce/"+filename);
ueditor.setOriginal(filename);
ueditor.setTitle(filename);
return ueditor;
}
}
[/sourcecode]
6.编写页面。
[sourcecode language=”html” title=”demo.html”]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>商品简介</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script>
window.UEDITOR_HOME_URL = "/ueditor/";
</script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"> </script>
<!–建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败–>
<!–这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文–>
<script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>

<!–请在下方写此页面业务相关的脚本–>
<script type="text/javascript" src="/hui/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/hui/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/hui/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="/hui/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript">
var pro_id = ${proId!};
var ue = UE.getEditor(‘editor’,{maximumWords:3000});
//提交更改模拟一个ajax提交，这里是提交HTML的内容
function introduce_button(){
if(confirm("确定要提交?")){
var pro_introduce = ue.getContent();
if(ue.hasContents()){
$.ajax({
type: "POST",
url: "/product/pro_introduce_update",
data: {proIntroduce:pro_introduce,proId:pro_id},
dataType: "text",
success: function(data){
layer.msg("修改简介成功！",{
icon:1,
time:1000,
end: function () {
var index = parent.layer.getFrameIndex(window.name);
parent.$(‘.btn-refresh’).click();
parent.layer.close(index);
}
});
},
error:function() {
layer.msg(‘修改简介失败!’,{icon:5,time:1000});
}
});
}else{
alert("内容不能为空！");
}
}
}

function quxiao_button(){
var index = parent.layer.getFrameIndex(window.name);
parent.$(‘.btn-refresh’).click();
parent.layer.close(index);
}
</script>
</body>
</html>
[/sourcecode]
[/successbox]
这里提供一个下载：
ueditor1_4_3_3-utf8-jsp：[bdbtn]https://pan.benzhu.xyz/代码/软件/UEditor/ueditor1_4_3_3-utf8-jsp.zip[/bdbtn]

功能

分类目录

文章归档

发送评论编辑评论

发送评论 编辑评论

推荐文章

发送评论编辑评论