Spring MVC -- UEditor 编辑器整合入门

野性酷女 2021-09-20 09:24 357阅读 0赞

# 仅作为入门测试。。。。。。 #

[下载UEditor资源][UEditor]

使用maven项目

<dependency>
          <groupId>commons-fileupload</groupId>
          <artifactId>commons-fileupload</artifactId>
          <version>1.3.1</version>
        </dependency>
        <dependency>
          <groupId>commons-io</groupId>
          <artifactId>commons-io</artifactId>
          <version>2.4</version>
        </dependency>
        <dependency>
          <groupId>commons-codec</groupId>
          <artifactId>commons-codec</artifactId>
          <version>1.10</version>
        </dependency>
        
        
        <dependency>
          <groupId>org.json</groupId>
          <artifactId>json</artifactId>
          <version>20160212</version>
        </dependency>

![1125107-20170911141636407-1197265589.png][]

在此我将它们都放在/webapp/static/UEditor-jsp目录下，进行搞事情，毕竟需要弄清楚路径的配置。

新增jsp页面

修改 ueditor.config.js 服务器请求接口路径

![1125107-20170911142020125-1668485702.png][]

默认请求地址为jsp/controller.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	import="com.baidu.ueditor.ActionEnter"
        pageEncoding="UTF-8"%>
    <%@ page trimDirectiveWhitespaces="true" %>
    <%
    
        request.setCharacterEncoding( "utf-8" );
    	response.setHeader("Content-Type" , "text/html");
    	
    	String rootPath = application.getRealPath( "/" );
    	
    	out.write( new ActionEnter( request, rootPath ).exec() );
    	
    %>

请求地址改为springMVC的请求路径，基本完全照搬翻译。

@Controller
    @RequestMapping("/uEditor")
    public class UEditorController {
    
        @RequestMapping(value = "/config")
        public void config(HttpServletRequest request, HttpServletResponse response) {
            response.setContentType("application/json");
       //     String rootPath = request.getSession()
                    .getServletContext().getRealPath("/");  修改如下
            String rootPath = request.getSession()
                    .getServletContext().getRealPath("/static/UEditor-jsp");
            try {
                String exec = new ActionEnter(request, rootPath).exec();
                PrintWriter writer = response.getWriter();
                writer.write(exec);
                writer.flush();
                writer.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

如下是获取config.json 配置的方式

ConfigManager

![1125107-20170911142644032-145015007.png][]

跟踪代码

String exec = new ActionEnter(request, rootPath).exec();
    
    ----->
    
    this.configManager = ConfigManager.getInstance( this.rootPath, this.contextPath, request.getRequestURI() );
    
    ----->
    
    private ConfigManager ( String rootPath, String contextPath, String uri ) throws FileNotFoundException, IOException {
    	
    	rootPath = rootPath.replace( "\\", "/" );
    	
    	this.rootPath = rootPath;
    	this.contextPath = contextPath;
    	
    // 路径会稍有不一样，请各自调试查看
    	if ( contextPath.length() > 0 ) {
    		this.originalPath = this.rootPath + uri.substring( contextPath.length() );
    	} else {
    		this.originalPath = this.rootPath + uri;
    	}
    	
    	this.initEnv();
    	
    }
    
    
    ------>
    
    initEnv()
    
    ------>
    
    private void initEnv () throws FileNotFoundException, IOException {
    	
    	File file = new File( this.originalPath );
    	
    	if ( !file.isAbsolute() ) {
    		file = new File( file.getAbsolutePath() );
    	}
    	
    	this.parentPath = file.getParent();
    	
    	String configContent = this.readFile( this.getConfigPath() );
    // 此处再次进行路径更改获取到的是 parent	
    
    	try{
    		JSONObject jsonConfig = new JSONObject( configContent );
    		this.jsonConfig = jsonConfig;
    	} catch ( Exception e ) {
    		this.jsonConfig = null;
    	}
    	
    }

![1125107-20170911143216922-1194292453.png][]

最后根据返回的路径将config,json 移动到相应的目录，此处根据个人情况特殊进行操作。

在此就可以进行图片的上传了。

![1125107-20170911143536000-1266688387.png][]

不过还需要修改配置中的路径配置，否则会上传成功却不能显示。

![1125107-20170911143946891-177747384.png][]

默认路径：

![1125107-20170911143641078-1341092801.png][]

修改如下，主要修改 imageUrlPrefix   imagePathFormat

![1125107-20170911144029282-550378273.png][]

转载于:https://www.cnblogs.com/skyLogin/p/7504929.html

[UEditor]: http://ueditor.baidu.com/website/download.html
[1125107-20170911141636407-1197265589.png]: /images/20210726/7af614724efc4919ac43f7b28b861b47.png
[1125107-20170911142020125-1668485702.png]: /images/20210726/8cd44d500edc456aa4b32fc62353349a.png
[1125107-20170911142644032-145015007.png]: /images/20210726/6e2e273293594ec9b8d6bc00a8b59c63.png
[1125107-20170911143216922-1194292453.png]: /images/20210726/4c7d00266502463c9c888698427385c6.png
[1125107-20170911143536000-1266688387.png]: /images/20210726/e53d54fcdd434da0b6c7addaed000eb8.png
[1125107-20170911143946891-177747384.png]: /images/20210726/515a8e692ca5419199f12b67e0b00091.png
[1125107-20170911143641078-1341092801.png]: /images/20210726/e4dae83f8d69434a9de19d1e4803f346.png
[1125107-20170911144029282-550378273.png]: /images/20210726/8ac328e2b14c4999a3eccdc284505fcd.png