kind富文本编辑器_简单几步学会使用富文本编辑器Editormd

我们经常可以看到各个博客网站中用于编辑文章的富文本编辑器，在富文本编辑器中，我们可以对我们的编辑内容样式进行设置。富文本编辑器一般是通过插件来实现的，我们只需要在页面中配置一下插件提供的一些API即可。

本例中使用Editormd来演示如何配置使用富文本编辑器。

Editormd简介

Editormd是国内开源的一款在线Markdown编辑器，可嵌入的 Markdown 在线编辑器(组件)，基于 CodeMirror、jQuery 和 Marked 构建。

主要特性

支持“标准”Markdown / CommonMark和Github风格的语法，也可变身为代码编辑器。

• 支持实时预览、图片(跨域)上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能。
• 支持ToC(Table of Contents)、Emoji表情、Task lists、@链接等Markdown扩展语法。
• 支持TeX科学公式(基于KaTeX)、流程图 Flowchart 和 时序图 Sequence Diagram。
• 支持识别和解析HTML标签，并且支持自定义过滤标签解析，具有可靠的安全性和几乎无限的扩展性。
• 支持 AMD / CMD 模块化加载(支持 Require.js & Sea.js)，并且支持自定义扩展插件。
• 兼容主流的浏览器(IE8+)和Zepto.js，且支持iPad等平板设备。
• 支持自定义主题样式。

官网地址：https://pandao.github.io/editor.md/

创建文章表

在使用富文本编辑器之前，先来创建一个文章表article，这里只添加了最基本的几个字段， 以后想要扩展的话还可以添加标签、时间、浏览量、点赞、评论等字段。建表SQL如下：

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

建完表，我们就可以开始编写代码来使用富文本编辑器了。

配置使用

1、创建一个SpringBoot项目，配置数据库连接，我们这里连接的是MyBatis(注意MySQL8需要在url中配置时区)。

spring:  datasource:    username: root    password: 123456    #?serverTimezone=UTC解决时区的报错    url: jdbc:mysql://localhost:3306/springboot?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8    driver-class-name: com.mysql.cj.jdbc.Driver  thymeleaf:    cache: false​mybatis:  mapper-locations: classpath:com/wunian/mapper/*.xml  type-aliases-package: com.wunian.pojo

2、导入Editormd静态资源，静态资源的目录结构如下图所示。

3、编写文章编辑页面editor.html，引入Editormd的CSS和js文本，添加Editormd配置。

​        及时雨的Blog                        ​

 

     

                    ​              

                  标题：              

​              

                  作者：              

​                             ​      

 

​​

4、上面配置的只是最简单的富文本编辑器功能，我们可以添加更多的配置来增加功能。

5、由于表情包的加载地址在国外，因此有时候可能加载不出来，我们可以把表情包下载到本地，放到/static/editormd/plugins/emoji-dialog/emoji目录下，并修改editormd.js中的表情加载路径为我们的表情包存放的目录路径。

editormd.emoji     = {        path  : "../editormd/plugins/emoji-dialog/emoji/",        ext   : ".png"};

6、上传图片功能需要进行配置，我们可以在当前项目目录下建立upload文件夹来上传文件(注意这里应该手动建立目录，不要使用代码创建)，然后配置一下虚拟路径(需要自定义WebMVC配置类)。

@Configurationpublic class MyMvcConfig implements WebMvcConfigurer {​​    // 文件保存在真实目录/upload/下，    // 访问的时候使用虚路径/upload，比如文件名为1.png，就直接/upload/1.png就ok了。    @Override    public void addResourceHandlers(ResourceHandlerRegistry registry) {        registry.addResourceHandler("/upload/**")                .addResourceLocations("file:"+System.getProperty("user.dir")+"/upload/");    }}

7、在Controller中编写文件上传的请求方法。

// MarkDown博客图片上传问题@RequestMapping("/file/upload")@ResponseBodypublic 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/";​    //按照月份进行分类：    Calendar instance = Calendar.getInstance();    String month = (instance.get(Calendar.MONTH) + 1)+"月";    path = path+month;​    File realPath = new File(path);    if (!realPath.exists()){        realPath.mkdirs();    }​    //上传文件地址    System.out.println("上传文件保存地址："+realPath);​    //解决文件名字问题：我们使用uuid;    String filename = "ks-"+UUID.randomUUID().toString().replaceAll("-", "")+".jpg";    //通过CommonsMultipartFile的方法直接写文件(注意这个时候)    file.transferTo(new File(realPath +"/"+ filename));​    //给editormd进行回调    JSONObject res = new JSONObject();    res.put("url","/upload/"+month+"/"+ filename);    res.put("success", 1);    res.put("message", "upload success!");​    return res;}

8、编写文章显示页面article.html，同样需要配置Editormd来正常显示一些MarkDown文本。

            ​

   

  作者：    

​​

9、最后别忘了编写保存文章和显示文章的Controller请求方法。

//获取文章进行显示@GetMapping("/{id}")public String show(@PathVariable("id") int id,Model model){  Article article = articleMapper.getArticleById(id);  model.addAttribute("article",article);  return "article";}​// 保存文章到数据库！@PostMapping("/addArticle")public String addArticle(Article article){  articleMapper.addArticle(article);  return "editor";}