【SpringBoot】21、整合 富文本编辑器 Editor.md

【SpringBoot】21、整合 富文本编辑器 Editor.md

源码 + 资源 下载 >>

1、环境搭建 1）新建SpringBoot工程 2）导jar包

    org.springframework.boot
    spring-boot-starter-web


    org.mybatis.spring.boot
    mybatis-spring-boot-starter
    2.2.1



    mysql
    mysql-connector-java
    runtime




    com.alibaba
    druid
    1.2.8




    log4j
    log4j
    1.2.17



    org.springframework.boot
    spring-boot-starter-thymeleaf



    com.alibaba
    fastjson
    1.2.79



    org.projectlombok
    lombok
    true


    org.springframework.boot
    spring-boot-starter-test
    test

3）数据库等

application.yml

spring:
  datasource:
    username: root
    password: 123456
    url: jdbc:mysql://localhost:3306/mybatis?useSSL=true&useUnicode=true&characterEncoding=utf8&serverTimezone=GMT
    driver-class-name: com.mysql.cj.jdbc.Driver
    # 自定义数据源
    type: com.alibaba.druid.pool.DruidDataSource

    #Spring Boot 默认是不注入这些属性值的，需要自己绑定
    #druid 数据源专有配置
    initialSize: 5 # 初始连接数
    minIdle: 5 # 最小连接数
    maxActive: 20  # 最大连接数
    maxWait: 60000 # 没有可用连接时，最大等待时间
    timeBetweenEvictionRunsMillis: 60000 # 运行时间间隔
    minEvictableIdleTimeMillis: 300000 # 连接保持空闲
    validationQuery: SELECt 1 FROM DUAL # 检测连接是否有效的SQL
    testWhileIdle: true # 申请连接的时候检测，如果空闲时间大于timeBetweenEvictionRunsMillis，执行validationQuery检测连接是否有效。
    testOnBorrow: false # 申请连接时执行validationQuery检测连接是否有效，true 配置会降低性能
    testOnReturn: false # 归还连接时执行validationQuery检测连接是否有效，true 配置会降低性能。
    poolPreparedStatements: false # 不缓存preparedStatement，也就是PSCache。PSCache对支持游标的数据库性能提升巨大，比如说oracle。在mysql下建议关闭。

    #配置监控统计拦截的filters，stat:监控统计、log4j：日志记录、wall：防御sql注入
    #如果允许时报错  java.lang.ClassNotFoundException: org.apache.log4j.Priority
    #则导入 log4j 依赖即可，Maven 地址：https://mvnrepository.com/artifact/log4j/log4j
    filters: stat,wall,log4j
    maxPoolPreparedStatementPerConnectionSize: 20
    useGlobalDataSourceStat: true
    connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=500

DruidConfig 配置类

@Configuration
public class DruidConfig {
    @Bean
    @ConfigurationProperties(prefix = "spring.datasource")
    public DataSource druidDataSource(){
        return new DruidDataSource();
    }

    
    @Bean
    public ServletRegistrationBean statViewServlet(){
        // 监控页面地址
        ServletRegistrationBean bean = new ServletRegistrationBean<>(new StatViewServlet(),"/druid
    @Bean
    public FilterRegistrationBean webStatFilter(){
        FilterRegistrationBean bean = new FilterRegistrationBean<>();
        bean.setFilter(new WebStatFilter());

        // exclusions：设置哪些请求进行过滤排除掉，从而不进行统计
        Map initParams = new HashMap<>();
        initParams.put("exclusions", "*.js,*.css,/druid
    private int id;
    
    private String author;
    
    private String title;
    
    private String content;
}

mapper接口

@Repository
public interface ArticleMapper {

    
    List queryArticles();

    
    int addArticle(Article article);

    
    Article getArticleById(int id);

    
    int deleteArticleById(int id);
}

mapper.xml配置

resources/mybatis/mapper 目录下

    
        select * from mybatis.article
    

    
        select * from mybatis.article where id = #{id}
    

    
        insert into mybatis.article (author,title,content) values (#{author},#{title},#{content});
    

    
        delete from mybatis.article where id = #{id}
    

mybatis配置

mybatis:
  # 实体类别名
  type-aliases-package: com.tuwer.pojo
  # 映射文件路径
  mapper-locations: classpath:/mybatis/mapper
      toolbarIcons : function() {
        //return editormd.toolbarModes.full;
        //return editormd.toolbarModes.simple;
        //return editormd.toolbarModes.mini;
        return editormd.toolbarModes.me;
      }
    });
  });

Controller

@Controller
@RequestMapping("/article")
public class ArticleController {
    @Autowired
    ArticleMapper articleMapper;

    
    @GetMapping("/toAdd")
    public String add() {
        return "article/add";
    }

    
    @PostMapping("/add")
    public String add(Article article) {
        articleMapper.addArticle(article);
        return "redirect:/article/list";
    }

    
    @GetMapping("/{id}")
    public String getArticle(@PathVariable("id") int id, Model model) {
        Article article = articleMapper.getArticleById(id);
        model.addAttribute("article", article);
        return "article/article";
    }
}

4、图片上传 1）前端js中添加配置

2）保存图片

Controller 类中添加

@RequestMapping("/file/upload")
@ResponseBody
public JSonObject fileUpload(@RequestParam(value = "editormd-image-file", required = true) MultipartFile file, HttpServletRequest request) throws IOException {
    // =====上传路径保存设置======
    // 获得SpringBoot当前项目的路径：System.getProperty("user.dir")
    String path = System.getProperty("user.dir") + "\upload\";

    // 按照年份、月份进行分类：
    LocalDate date = LocalDate.now();
    // 路径中不要加中文，否则在路径转码的情况下，回显会有问题
    // String ym = date.getYear() + "\" + date.getMonthValue() + "月";
    String ym = date.getYear() + "\" + date.getMonthValue();
    path = path + ym;
    File realPath = new File(path);
    if (!realPath.exists()) {
        // 这里有个坑；使用mkdirs，不是mkdir；因为mkdir只能创建一级目录，mkdirs可以创建多级目录
        realPath.mkdirs();
    }

    // 上传文件地址
    System.out.println("上传文件保存地址：" + realPath);

    // 文件名
    String filename = file.getOriginalFilename();
    // 文件类型
    String fileType = filename.substring(filename.lastIndexOf(".")).toLowerCase();

    // 随机文件名：使用uuid;
    filename = "img-" + UUID.randomUUID().toString().replaceAll("-", "") + fileType;

    // 通过CommonsMultipartFile的方法直接写文件
    file.transferTo(new File(realPath + "\" + filename));

    // 给editormd进行回调
    JSonObject res = new JSONObject();
    res.put("url", "\upload\" + ym + "\" + filename);
    res.put("success", 1);
    res.put("message", "upload success!");

    return res;
}

注意：

文件路径中不要加中文，否则在路径转码的情况下，回显会有问题创建路径时使用 mkdirs，不是mkdir；因为mkdir只能创建一级目录，mkdirs可以创建多级目录

3）图片回显

左侧编辑，右侧预览，实时显示图片，即回显

设置虚拟目录映射！在拓展的MvcConfig中进行配置即可！

访问的时候使用虚路径/upload，比如文件名为1.png，就直接/upload/1.png就ok了

@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 拦截请求格式："/" 单斜杠，文件路径可以用 "\" 双斜杠
        registry.addResourceHandler("/upload
@GetMapping("/{id}")
public String getArticle(@PathVariable("id") int id, Model model) {
    Article article = articleMapper.getArticleById(id);
    model.addAttribute("article", article);
    return "article/article";
}