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

介绍

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

Github项目地址：

https://github.com/fex-team/ueditor

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

ueditor1_4_3_3-utf8-jsp：本地下载

Spring Boot中的使用

1.导入Maven

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>

2.将下载的UEditor解压并放入静态资源里面

3.修改文件里面的ueditor/ueditor.config.js

ueditor.config.js

window.UEDITOR_CONFIG = {

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

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

//工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义

4.添加配置文件类

PublicMsg.java

package com.liuliu.com.util;

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\": \"\",\n" +
            " \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
            "\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" +
            "\n" +
            " \"snapscreenActionName\": \"uploadimage\",\n" +
            " \"snapscreenPathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\",\n" +
            " \"snapscreenUrlPrefix\": \"\",\n" +
            " \"snapscreenInsertAlign\": \"none\",\n" +
            "\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" +
            "\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" +
            "\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" +
            "\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" +
            "\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" +
            "\n" +
            "}";
    /**
     * Ueditor的返回状态类型
     */
    public enum UeditorMsg{
        SUCCESS("SUCCESS"),ERROR("上传失败");
        private String v;
        UeditorMsg(String v){
            this.v =v;
        }
        public String get(){
            return this.v;
        }
    }
}

5.添加controller

UeditorController.java

package com.liuliu.com.controller;

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;
    }
}

6.编写页面

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>

<style type="text/css">
div{
    width:100%;
}
</style>
</head>
<body>
<div>
<h1 align="center">简介编辑</h1>
<script id="editor" type="text/plain" style="width:950px;height:400px;">如果要预设内容放在这里就行</script>
</div>
<div>
<input class="btn btn-success radius" type="button" value="提交更改" onclick="introduce_button()">
<input class="btn btn-danger radius" type="button" value="取消" onclick="quxiao_button()">
</div>

<script type="text/javascript">
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
    if (action == ‘uploadimage’ || action == ‘uploadscrawl’ || action == ‘uploadimage’) {
        return ‘/ueditor/imgUpload’;
//’http://localhost:8080/imgUpload’;为方法imgUpload的访问地址
    } else {
        return this._bkGetActionUrl.call(this, action);
    }
}
</script>
<!–_footer 作为公共模版分离出去–>
<script type="text/javascript" src="/hui/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/hui/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/hui/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="/hui/static/h-ui.admin/js/H-ui.admin.js"></script> <!–/_footer 作为公共模版分离出去–>

<!–请在下方写此页面业务相关的脚本–>
<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>

如果觉得文章对你有用，请随意赞赏

UEditor

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

https://www.benzhu.xyz/archives/springboot012

作者

小猪

发布于

2019-06-27

更新于

2024-11-23

许可协议

CC BY 4.0

介绍