0
点赞
收藏
分享

微信扫一扫

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

止止_8fc8 2022-02-23 阅读 64
spring bootjavaspring

1、环境搭建

1）新建SpringBoot工程

2）导jar包

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.2.1</version>
</dependency>

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <scope>runtime</scope>
</dependency>

<!-- Druid -->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>druid</artifactId>
    <version>1.2.8</version>
</dependency>

<!-- log4j-->
<dependency>
    <groupId>log4j</groupId>
    <artifactId>log4j</artifactId>
    <version>1.2.17</version>
</dependency>

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.79</version>
</dependency>

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <optional>true</optional>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-test</artifactId>
    <scope>test</scope>
</dependency>

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

    /**
 * 配置 Druid 监控管理后台的Servlet；
 * 内置 Servlet 容器时没有web.xml文件，所以使用 Spring Boot 的注册 Servlet 方式
 * @Bean
 * @return
 */
@Bean
public ServletRegistrationBean statViewServlet(){
    // 监控页面地址
    ServletRegistrationBean<StatViewServlet> bean = new ServletRegistrationBean<>(new StatViewServlet(),"/druid/*");

    // 初始化参数
    // 这些参数可以在 com.alibaba.druid.support.http.StatViewServlet
    // 的父类 com.alibaba.druid.support.http.ResourceServlet 中找到
    HashMap<String, String> initParams = new HashMap<>();

    // 后台管理界面的登录账号
    initParams.put("loginUsername", "admin");
    // 后台管理界面的登录密码
    initParams.put("loginPassword", "123456");

    //后台允许谁可以访问
    //initParams.put("allow", "localhost")：表示只有本机可以访问
    //initParams.put("allow", "")：为空或者为null时，表示允许所有访问
    initParams.put("allow", "");
    //deny：Druid 后台拒绝谁访问
    //initParams.put("deny", "192.168.1.20");表示禁止此ip访问

    //设置初始化参数
    bean.setInitParameters(initParams);

    return bean;
}

/**
 * 配置 web 监控的 filter
 * WebStatFilter：用于配置Web和Druid数据源之间的管理关联监控统计
 * @return
 */
@Bean
public FilterRegistrationBean webStatFilter(){
    FilterRegistrationBean<Filter> bean = new FilterRegistrationBean<>();
    bean.setFilter(new WebStatFilter());

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

    // "/**" 表示过滤所有请求
    bean.setUrlPatterns(Arrays.asList("/**"));

    return bean;
}

    }

  • article：文章表

    CREATE TABLE article (
    id int(10) NOT NULL AUTO_INCREMENT COMMENT ‘int文章的唯一ID’,
    author varchar(50) NOT NULL COMMENT ‘作者’,
    title varchar(100) NOT NULL COMMENT ‘标题’,
    content longtext NOT NULL COMMENT ‘文章的内容’,
    PRIMARY KEY (id)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8

字段

类型

备注

id

int

文章的唯一ID

author

varchar

title

varchar

标题

content

longtext

文章的内容

  • Article 实体类

    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    public class Article implements Serializable {
    /**
    * 文章的唯一ID
    /
    private int id;
    /    *
    * 作者名
    /
    private String author;
    /    *
    * 标题
    /
    private String title;
    /    *
    * 文章的内容
    */
    private String content;
    }

  • mapper接口

    @Repository
    public interface ArticleMapper {

    /**
 * 查询所有的文章
 * @return
 */
List<Article> queryArticles();

/**
 * 新增一篇文章
 * @param article
 * @return
 */
int addArticle(Article article);

/**
 * 根据id查询文章
 * @param id
 * @return
 */
Article getArticleById(int id);

/**
 * 根据id删除文章
 * @param id
 * @return
 */
int deleteArticleById(int id);

    }

  • mapper.xml配置

    <?xml version="1.0" encoding="UTF-8" ?> select * from mybatis.article 
    <select id="getArticleById" resultType="Article">
    select * from mybatis.article where id = #{id}
</select>

<insert id="addArticle" parameterType="Article">
    insert into mybatis.article (author,title,content) values (#{author},#{title},#{content});
</insert>

<delete id="deleteArticleById" parameterType="int">
    delete from mybatis.article where id = #{id}
</delete>

  • mybatis配置

    mybatis:

    实体类别名

    type-aliases-package: com.tuwer.pojo

    映射文件路径

    mapper-locations: classpath:/mybatis/mapper/*.xml

在这里插入图片描述

2、导入资源

下载 editor.md

  • 下载后解压
  • 在 resourcesstatic 目录下新建 editormd 目录，把解压后的部分文件复制到 editormd 目录中
  • editormd 目录下建js目录，放对应js文件；其中 jquery.min.js 文件在下载包的 examplesjs 目录下

在这里插入图片描述

在这里插入图片描述

3、编辑页面

  • add.html

    添加文章

    标题：

    作者： 

    </div>

在这里插入图片描述

  • Controller

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

    /**
 * 进入添加文章
 *
 * @return
 */
@GetMapping("/toAdd")
public String add() {
    return "article/add";
}

/**
 * 添加文章
 *
 * @param article
 * @return
 */
@PostMapping("/add")
public String add(Article article) {
    articleMapper.addArticle(article);
    return "redirect:/article/list";
}

/**
 * 根据id查看文章
 *
 * @param id
 * @param model
 * @return
 */
@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中添加配置

<script type="text/javascript">
  var testEditor;
    
  $(function() {
    testEditor = editormd("article-content", {
      //...
      //图片上传
      imageUpload : true,
      imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
      imageUploadURL : "/article/file/upload",
      onload : function() {
        console.log('onload', this);
      },
      //...
    });
  });
</script>

2）保存图片

/**
* 上传图片
*
* @param file
* @param request
* @return
* @throws IOException
*/
@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;
}

3）图片回显

@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 拦截请求格式："/" 单斜杠，文件路径可以用 "\" 双斜杠
        registry.addResourceHandler("/upload/**")
                .addResourceLocations("file:" + System.getProperty("user.dir") + "\upload\");
    }
}

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

5、表情包

1）下载表情包

  • 下载地址：https://download.csdn.net/download/tu_wer/78306771
  • 下载后把图片文件夹 emoji 放至 editormd/plugins/emoji-dialog/ 目录下

2）修改editormd.js

// Emoji graphics files url path
editormd.emoji     = {
    //path  : "https://www.webpagefx.com/tools/emoji-cheat-sheet/graphics/emojis/",
    path  : "../editormd/plugins/emoji-dialog/emoji/",
    ext   : ".png"
};

// Twitter Emoji (Twemoji)  graphics files url path    
// editormd.twemoji = {
//     path : "http://twemoji.maxcdn.com/36x36/",
//     ext  : ".png"
// };

在这里插入图片描述

在这里插入图片描述

3）定制表情窗口卡片分组

在这里插入图片描述

  • 修改 emoji-dialog.js

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

6、文章展示

  • 添加

在这里插入图片描述

  • article.html

    作者：

  • Controller 方法

    /**

    • 根据id查看文章
    • @param id
    • @param model
    • @return
      */
      @GetMapping("/{id}")
      public String getArticle(@PathVariable(“id”) int id, Model model) {
      Article article = articleMapper.getArticleById(id);
      model.addAttribute(“article”, article);
      return “article/article”;
      }

在这里插入图片描述

举报

相关推荐

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

spring bootjavamysql

vue-quill-editor富文本编辑器

vuequillEditor富文本编辑器npmelementuiJavaScript前端开发私藏项目实操分享

富文本编辑器

javascripthtml富文本编辑器JavaScript前端开发

Tui-editor富文本编辑器的使用

富文本编辑器cssmarkdown编辑系统/运维

富文本编辑器quill,(vue-quill-editor)

vue.js前端javascripthtmlcssLinux系统/运维

uniapp 正常显示editor富文本编辑器的内容

spring cloud分布式搜索引擎

富文本编辑器 python

富文本编辑器应用程序自定义Python后端开发

富文本编辑器CKeditor

富文本编辑器CKeditorhtmlcss系统/运维

富文本编辑器 kindeditor

富文本编辑器kindeditor.net官网phpOpenStack云计算

定制富文本编辑器

富文本编辑器自定义工具栏编程语言
0 条评论