如何给自己的博客系统添加一个Markdown编辑器？

最新推荐文章于 2022-04-13 20:34:16 发布

YonminMa

最新推荐文章于 2022-04-13 20:34:16 发布

阅读量2k

点赞数 8

文章标签： java css js 博客系统 Markdown

本文链接：https://blog.csdn.net/weixin_44547562/article/details/107583630

版权

首先到https://github.com/pandao/editor.md下载Markdown编辑器

将下图选中的文件和文件夹拷贝到项目的静态资源目录下
在这里插入图片描述
我这里将它们拷贝到了static/lib/editormd下

创建一个页面，内容如下

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <title>Simple example - Editor.md examples</title>
    <link rel="stylesheet" href="lib/editormd/css/editormd.css" />
</head>
<body>
<div id="layout">
    <div id="editormd">
        <textarea style="display:none;">
内容
        </textarea>
    </div>

</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="lib/editormd/editormd.js"></script>
<script type="text/javascript">
    var testEditor;

    $(function() {
        contextEditor = editormd("editormd", {
            width   : "100%",
            height  : 640,
            syncScrolling : "single",
            path    : "lib/editormd/lib/"
        });

        /*
        // or
        testEditor = editormd({
            id      : "editormd",
            width   : "100%",
            height  : 640,
            path    : "lib/editormd/lib/"
        });
        */
    });
</script>
</body>
</html>

只需要让包括着textarea的div的id和js中的contextEditor = editormd("editormd", {传入的字符串参数相同，则会自动解析textarea中的文本，并以Markdown语法解析后显示。
因为我使用的SpringBoot构建的项目，所以引用静态资源的时候不需要写../static/，否则会报错。若是静态访问，则需要在引用静态资源的路径前添加../static/。

新建一个EditorController，内容为

@Controller
public class EditorController {

    @RequestMapping("/edit")
    public String editPage(){
        System.out.println("打开编辑页");
        return "edit";
    }

}

然后访问/edit地址时会转到Markdown编辑页面。
首次访问时页面如下：
在这里插入图片描述

YonminMa

关注

8
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
如何给自己的博客系统添加一个Markdown编辑器？

首先到https://github.com/pandao/editor.md下载Markdown编辑器将下图选中的文件和文件夹拷贝到项目的静态资源目录下我这里将它们拷贝到了static/lib/editormd下创建一个页面，内容如下<!DOCTYPE html><html lang="zh"><head> <meta charset="utf-8" /> <title>Simple example - Editor
复制链接

扫一扫