ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

SpringBoot中使用UEditor基本配置(图文详解)

2019-04-17 15:43:47  阅读:411  来源: 互联网

标签:UEditor SpringBoot controller jsp import config 图文


SpringBoot中使用UEditor基本配置(图文详解)

2018年03月12日 10:52:32  阅读数:4497  

    最近因工作需要,在自己研究百度的富文本编辑器UEditor,这个过程中也遇到很多问题,这里写一下我的心得和总结,希望帮到需要帮助的人。正文如下:

第一步:创建SpringBoot项目

    首先我使用的是IDEA 2017(不得不说IDEA创建Spring项目确实要方便一些),新建一个SpringBoot项目:

    最上角 File -> New -> Project -> Spring Initializr 

    

    直接下一步

    

    这些根据需要自行配置即可(这里我使用的是默认配置)。

    

    这里我选择的是SpringBoot 1.5.10版本,勾选上Web,然后下一步选择项目保存的目录,这样就创建好了。

    创建好的目录结构如下:

    

第二步:下载UEditor

    下载地址:http://ueditor.baidu.com/website/download.html

            

    解压后的文件结构如下:

  

    将除jsp文件夹以外的文件都放入项目src/main/resources/static目录下

    

    在项目根目录下创建一个lib文件夹,用于导入UEditor的jar包

    

    将UEdito解压目录下的jsp/lib文件夹中的jar考入lib目录中,然后将jar包加入项目中

    最上角 File -> Project Structrue -> Libraries 

    

完成之后启动Application,访问localhost:8080,效果如下

到这里UEditor的导入就完成了。

第三步:UEditor的基本配置

    虽然现在有了初步的效果,但是还是不能上传图片,现在进行后端配置

    之前的jsp文件夹下面除了jar包外还有两个文件,一个是controller.jsp和config.json,controller.jsp其实就是为了获取config.js中的配置,所以为了方便管理以及规范,我们新建一个UEditorController将controller.jsp的内容拷贝进去,然后将config.json放到resources/static目录下,然后将Application文件移到controller的同级目录下,不然会扫描不到controller

    

    UEditorController.java内容如下

  1.   package com.example.controller;
  2.   import com.baidu.ueditor.ActionEnter;
  3.   import org.json.JSONException;
  4.   import org.springframework.beans.factory.annotation.Autowired;
  5.   import org.springframework.web.bind.annotation.RequestMapping;
  6.   import org.springframework.web.bind.annotation.RestController;
  7.   import javax.servlet.http.HttpServletRequest;
  8.   import javax.servlet.http.HttpServletResponse;
  9.   import java.io.IOException;
  10.   import java.io.PrintWriter;
  11.    
  12.   @RestController
  13.   public class UEditroController {
  14.   @Autowired
  15.   private HttpServletRequest request;
  16.   @RequestMapping("/ueditorConfig")
  17.   public void getUEditorConfig(HttpServletResponse response){
  18.   String rootPath = "src/main/resources/static";
  19.   try {
  20.   String exec = new ActionEnter(request, rootPath).exec();
  21.   PrintWriter writer = response.getWriter();
  22.   writer.write(exec);
  23.   writer.flush();
  24.   writer.close();
  25.   } catch (IOException | JSONException e) {
  26.   e.printStackTrace();
  27.   }
  28.   }
  29.   }

    因为controller.jsp中的

        String rootPath = application.getRealPath( "/" )

    没能获取到正确的路径,所以这里我手动更改了路径,这个路径就是config.json的位置

    然后修改resource/static目录下的ueditor.config.js文件

    33行左右的serverUrl的路径改为之前UEditorController的访问路径,我这里的路径是"/ueditorConfig",serverUrl就是服务器统一请求接口路径

    

 

    以上都更改完之后运行Application访问http://localhost:8080/ueditorConfig?action=config

    如果出现类似以下内容则表示读取配置成功

    

    该内容即是config.json中的内容

    SpringBoot中使用UEditor的基本配置到这里就完成了,但是还是不能上传图片,之后会讲解一下UEditor上传图片的配置。

标签:UEditor,SpringBoot,controller,jsp,import,config,图文
来源: https://www.cnblogs.com/leigepython/p/10723876.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有