springboot+layui +ueditor前端及后端完整开发案例

官网下载地址 ：GitHub - fex-team/ueditor: rich text 富文本编辑器

下载最新jsp版本导入项目,项目编辑器版本为1.4.3.3

导入到资源文件中，将demo、网页文件、jsp文件从资源目录中移除

 页面引入相关js

    <script type="text/javascript" charset="utf-8" src="${springMacroRequestContext.contextPath}/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="${springMacroRequestContext.contextPath}/ueditor/ueditor.all.min.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="${springMacroRequestContext.contextPath}/ueditor/lang/zh-cn/zh-cn.js"></script>

实例化编辑器

    <div class="layui-form-item">
        <div class="layui-col-xs12">
            <label class="layui-form-label">内容</label>
            <div class="layui-input-block">
                <textarea id="editor" style="width: 90%;height: 250px"  name="introduce" class="layui-textarea"></textarea>
            </div>
        </div>
    </div>

<script>
    var ue = UE.getEditor('editor');
</script>

 编辑ueditor.config.js根据自己需求对编辑器进行配置。

上传文件后端路径一定要修改为自己的地址

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

        // 服务器统一请求接口路径
        , serverUrl: URL + "article/upload"

pom中引入json包，我这里引入的json版本为20220924

        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20220924</version>
        </dependency>

将ueditor\jsp\lib\ueditor-1.1.2.jar包转到工程文件中

controller中配置文件路径，注意要在控制器中对返回路径进行处理，否则返回的是文件存储绝对路径。

@Controller
@RequestMapping("/person/ueditor")
public class SystemDocUeditorController {


    @RequestMapping("/upload")
    @ResponseBody
    public String upload(HttpServletRequest request, HttpServletResponse response) throws Exception {
        request.setCharacterEncoding( "utf-8" );
        response.setHeader("Content-Type" , "text/html");
        String rootPath  = Thread.currentThread().getContextClassLoader().getResource("").getPath();
        String result= new ActionEnter( request, rootPath+"/static" ).exec();
        String action = request.getParameter("action");
        rootPath=new File(rootPath+"/static/").toString();
        if( action!=null && (action.equals("listfile") || action.equals("listimage") ) ){
            rootPath = PathFormat.format(rootPath);
            result = result.replace(rootPath, "");
        }
            return result;
    }

}

特别注意：路径错误会导致无法读取配置文件

 正确配置效果

如果出现找到上传数据问题：

1、拦截器拦截掉了数据，放行路径

2、使用ServletFileUpload时需要关闭Spring Boot的默认配置 ，禁用MultipartResolverSpring提供的默认值，在配置文件中加入

spring.servlet.multipart.enabled=false

需要修改BinaryUploader类

                /**
                 for(FileItemIterator iterator = upload.getItemIterator(request); iterator.hasNext(); fileStream = null) {
                 fileStream = iterator.next();
                 if (!fileStream.isFormField()) {
                 break;
                 }
                 }
                 **/
                FileItemIterator iterator = upload.getItemIterator(request);
                while (iterator.hasNext()) {
                    fileStream = iterator.next();
                    if (!fileStream.isFormField()) {
                        break;
                    }
                }

在线管理中添加删除文件功能

前端改造

添加删除按钮：

改造ueditor\dialogs\image\image.js

改造ueditor\dialogs\attachment\attachment.js

attachment的js中action=deletefile

item.appendChild(img);
item.appendChild(icon);
 
                    /* 添加删除功能 Start*/
                    item.appendChild($("<span class='delbtn' url='" + list[i].url + "'>X</span>").click(function() {
                        var del = $(this);
                        try{
                            window.event.cancelBubble = true; //停止冒泡
                            window.event.returnValue = false; //阻止事件的默认行为
                            window.event.preventDefault();    //取消事件的默认行为
                            window.event.stopPropagation();   //阻止事件的传播
                        }finally{
                            if(!confirm("确定要删除吗？")) return;
                            $.post(editor.getOpt("serverUrl") + "?action=deleteimage", { "path": del.attr("url") }, function(result) {
                                var json = eval('(' + result + ')');
                                if (json.state == 'SUCCESS') {
                                    del.parent().remove();
                                }
                                else {
                                    alert(json.state);
                                }
                            });
                        }
                    })[0]);
                    /* 添加删除功能 End*/
 
this.list.insertBefore(item, this.clearFloat);

添加删除按钮样式：

ueditor\dialogs\image\image.css中添加样式

ueditor\dialogs\attachment\attachment.css中添加样式

#online li .delbtn {      
    position: absolute;
    top: 0;
    right: 0;
    border: 0;   
    z-index: 3;
    color: #ffffff;
    display: inline;
    font-size: 12px;
    line-height: 10.5px;
    padding:3px 5px;
    text-align: center;
    background-color: #d9534f;
}

后端改造

改造ueditor.ActionEnter，invoke()的switch(actionCode) {}插入代码

                    case 7:
                        conf = this.configManager.getConfig(actionCode);
                        int start = this.getStartIndex();
                        state = (new FileManager(conf)).listFile(start);
                        break;
                    case 8:
                        state = (new DeleteFile(this.request,this.rootPath)).doExec();
                        break;
                    case 9:
                        state = (new DeleteFile(this.request,this.rootPath)).doExec();

改造ueditor.ActionMap

public final class ActionMap {
    public static final Map<String, Integer> mapping = new HashMap<String, Integer>() {
        {
            this.put("config", 0);
            this.put("uploadimage", 1);
            this.put("uploadscrawl", 2);
            this.put("uploadvideo", 3);
            this.put("uploadfile", 4);
            this.put("catchimage", 5);
            this.put("listfile", 6);
            this.put("listimage", 7);
            this.put("deleteimage", 8);
            this.put("deletefile", 9);
        }
    };
    public static final int CONFIG = 0;
    public static final int UPLOAD_IMAGE = 1;
    public static final int UPLOAD_SCRAWL = 2;
    public static final int UPLOAD_VIDEO = 3;
    public static final int UPLOAD_FILE = 4;
    public static final int CATCH_IMAGE = 5;
    public static final int LIST_FILE = 6;
    public static final int LIST_IMAGE = 7;
    public static final int DELETE_IMAGE = 8;
    public static final int DELETE_FILE = 9;

创建类 DeleteFile

public class DeleteFile {
    private HttpServletRequest request = null;
    private String rootPath = null;

    public DeleteFile(HttpServletRequest request, String rootPath) {
        this.request = request;
        this.rootPath = rootPath;
    }

    public final State doExec() {
        State state = null;
        try {
            File file = new File(this.rootPath+this.request.getParameter("path"));
            if(!file.toString().contains(this.rootPath)){
                return new BaseState(false, 4);
            }
            if (file.exists() && file.isFile()) {
                if (file.delete()) {
                    state = new BaseState(true);
                } else {
                    state = new BaseState(false, "删除文件" + file.getName() + "失败！");
                }
            } else {
                state = new BaseState(false, file.getName()+"文件不存在！");
            }
        } catch (Exception var10) {
            return new BaseState(false, 4);
        }

        return state;
    }
}

 最终效果

 

代码下载地址：springboo+ueditor前端及后端开发代码案例-Java文档类资源-CSDN下载