富文本编辑器Editormd的配置使用

落日映苍穹つ 2021-06-10 20:38 790阅读 0赞

我们经常可以看到各个博客网站中用于编辑文章的富文本编辑器，在富文本编辑器中，我们可以对我们的编辑内容样式进行设置。富文本编辑器一般是通过插件来实现的，我们只需要在页面中配置一下插件提供的一些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/][https_pandao.github.io_editor.md]  
![Editormd官网][Editormd]

> 创建文章表

在使用富文本编辑器之前，先来创建一个文章表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静态资源，静态资源的目录结构如下图所示。  
![Editormd静态资源目录结构][Editormd 1]  
3、编写文章编辑页面editor.html，引入Editormd的CSS和js文本，添加Editormd配置。

<!DOCTYPE html>
    <html class="x-admin-sm" lang="zh" xmlns:th="http://www.thymeleaf.org">
    
    <head>
        <meta charset="UTF-8">
        <title>及时雨的Blog</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        
        <link rel="stylesheet" th:href="@{/editormd/css/editormd.css}"/>
        <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
    </head>
    
    <body>
    
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                
                <form name="mdEditorForm">
    
                    <div>
                        标题： <input type="text" name="title">
                    </div>
    
                    <div>
                       作者： <input type="text" name="author">
                    </div>
    
                    
                    <div id="article-content">
                        <textarea name="content" id="content" style="display:none;"> </textarea>
                    </div>
    
                </form>
    
            </div>
        </div>
    </div>
    </body>
    
    
    <script th:src="@{/editormd/jquery.min.js}"></script>
    <script th:src="@{/editormd/editormd.js}"></script>
    
    <script type="text/javascript">
        var testEditor;
        $(function() {
             //这是一个最简单的Editormd配置，往后我们要修改Editormd的
            //功能或者样式，就改这里的配置就可以了
            testEditor = editormd("article-content", {
    			width   : "90%",
    			height  : 640,
    			syncScrolling : "single",
    			path    : "../editormd/lib/"
            });
    </script>
    </html>

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

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

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

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

@Configuration
    public 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")
    @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/";
    
        //按照月份进行分类：
        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文本。

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title th:text="${article.title}"></title>
    </head>
    
    
    <body>
    <div>
        
        <h2 style="margin: auto 0" th:text="${article.title}"></h2>
        作者：<span style="float: left" th:text="${article.author}"></span>
        
        <div id="doc-content">
            <textarea style="display:none;" placeholder="markdown" th:text="${article.content}"></textarea>
        </div>
    
    </div>
    
    
    <link rel="stylesheet" th:href="@{/editormd/css/editormd.preview.css}"/>
    <script th:src="@{/editormd/jquery.min.js}"></script>
    <script th:src="@{/editormd/lib/marked.min.js}"></script>
    <script th:src="@{/editormd/lib/prettify.min.js}"></script>
    <script th:src="@{/editormd/lib/raphael.min.js}"></script>
    <script th:src="@{/editormd/lib/underscore.min.js}"></script>
    <script th:src="@{/editormd/lib/sequence-diagram.min.js}"></script>
    <script th:src="@{/editormd/lib/flowchart.min.js}"></script>
    <script th:src="@{/editormd/lib/jquery.flowchart.min.js}"></script>
    <script th:src="@{/editormd/editormd.js}"></script>
    
    <script type="text/javascript">
        var testEditor;
        $(function () {
            // 绑定我们要渲染页面的 div
            testEditor = editormd.markdownToHTML("doc-content", {//注意：这里是上面DIV的id
                htmlDecode: "style,script,iframe",
                emoji: true,
                taskList: true,
                tocm: true,
                tex: true, // 默认不解析
                flowChart: true, // 默认不解析
                sequenceDiagram: true, // 默认不解析
                codeFold: true
            });
        });
    </script>
    </body>
    </html>

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";
    }

[https_pandao.github.io_editor.md]: https://pandao.github.io/editor.md/
[Editormd]: /images/20210607/4170b4ee19d0455db0304e0b50dedf59.png
[Editormd 1]: /images/20210607/bfd39cc736884ec5a794bcb94baa6bd2.png