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

作者: 勿念及时雨 | 来源:发表于2020-04-10 00:12 被阅读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/

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静态资源目录结构

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" />
    <!--Editor.md-->
    <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>

                <!-- 文章的主体内容 textarea -->
                <div id="article-content">
                    <textarea name="content" id="content" style="display:none;"> </textarea>
                </div>

            </form>

        </div>
    </div>
</div>
</body>

<!--editormd-->
<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、上面配置的只是最简单的富文本编辑器功能，我们可以添加更多的配置来增加功能。

<script type="text/javascript">
    var testEditor;

    //window.onload = function(){ }
    $(function() {
        testEditor = editormd("article-content", {
            width : "95%",
            height : 500,
            syncScrolling : "single",
            path : "../editormd/lib/",
            // 自定义的增强配置！
            saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
            emoji: true, // 开启表情的功能！ 图片的本地配置！
            // theme: "light",//工具栏主题
            // previewTheme: "dark",//预览主题
            // editorTheme: "pastel-on-dark",//编辑主题
            // markdown的配置！
            tex : true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart : true,             // 开启流程图支持，默认关闭
            sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
            //图片上传
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/article/file/upload", // 文件上传的处理请求！
            onload : function() {
                console.log('onload', this);
            },
            /*指定需要显示的功能按钮*/
            toolbarIcons : function() {
                return ["undo","redo","|",
                    "bold","del","italic","quote","ucwords","uppercase","lowercase","|",
                    // "h1","h2","h3","h4","h5","h6","|",
                    "list-ul","list-ol","hr","|",
                    "link","reference-link","image","code","preformatted-text",
                    "code-block","table","datetime","emoji","html-entities","pagebreak","|",
                    "goto-line","watch","preview","fullscreen","clear","search","|",
                    //"help","info",
                    "releaseIcon", "index"]
            },
            // 这里的自定义功能就好比，Vue 组件

            /*自定义功能按钮，下面我自定义了2个，一个是发布，一个是返回首页*/
            toolbarIconTexts : {
                releaseIcon : "<span bgcolor=\"gray\">发布</span>",
                index : "<span bgcolor=\"red\">返回首页</span>",
            },

            /*给自定义按钮指定回调函数*/
            toolbarHandlers:{
                releaseIcon : function(cm, icon, cursor, selection) {
                    //表单提交
                    mdEditorForm.method = "post";
                    mdEditorForm.action = "/article/addArticle";//提交至服务器的路径
                    mdEditorForm.submit();
                },
                index : function(){
                    window.location.href = '/';
                },
            }
        });
    });
</script>

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>

<!--固定editormd依赖！ -->
<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";
}

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

主要特性

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读