给你的博客增加一个markdown编辑器

首先，我们来看看成果。markdown编辑器

身为一个业余CV工程师，闲着总是很无聊，所以，要把折腾进行到底！

之前经常用一个markdown在线编辑器，觉得真是好用，给无数人推荐。

但在昨天，我突然发现，这货竟然是一个开源项目的CV产品，这，不能忍，不能让你一个人CV，我也要！

首先感谢editormd的作者,把这么好的项目开源，让人可以光明正大的copy学习。

这个作者的很多项目目前都是停止维护的状态，博客也不更新。也不知道作者忙什么去了。。。看博客介绍貌似是美图程序员。

话不多说，开整！

我本来是把项目整个下载下来弄的，一顿折腾，后来发现把博客文件夹弄得有点乱，强迫症发作，觉得实在没那个必要，于是就根据项目主页的简单demo进行了简单修改。

        <link rel="stylesheet" href="editormd/css/editormd.css" />
<div id="test-editor">
<textarea style="display:none;">
### 关于 Editor.md

**Editor.md** 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。
</textarea>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="editormd/editormd.min.js"></script>
<script type="text/javascript">
    $(function() {
        var editor = editormd("test-editor", {
            // width  : "100%",
            // height : "100%",
            path   : "editormd/lib/"
        });
    });
</script>

    

上面是项目首页的demo，直接把页面放到任意html网页里面就可以了。

当然，很快你会发现，不起作用。

那是因为上面的引用地址都不是绝对链接，所有我们要把他们都改一下。

你当然可以用项目网站上的js和css的绝对链接直接替换，因为我之前就是这么做的。

不过后来我还是换了，因为觉得太无耻，这不就盗链嘛。

一下子恍如圣人！

其实主要原因是作者的项目网站本身是GitHub page，而最近GitHub总是出问题，加上据说GitHub速度慢，为了长久计，终于作罢。

那么，我们换成啥呢？

不知道你有没有听说过jsdelivr？据其官网介绍，它是一家由Dmitriy Akulov和Prospect One开发的公共、开源CDN（内容分发网站），专注于性能，可靠性和安全性。每个人都可以免费使用，没有带宽限制。

总有一些网站让人感到舒服，这家网站据说在中国大陆有很多节点，所以速度实在给力。

很快就找到了editormd作者在jsdeliver上的项目主页editor.md

我们直接照葫芦画瓢，来一波替换吧。

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/editor.md@1.5.0/css/editormd.min.css" />
<div id="test-editor">
<textarea style="display:none;">
### 关于 Editor.md

**Editor.md** 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。
</textarea>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/editor.md@1.5.0/editormd.min.js"></script>
<script type="text/javascript">
    $(function() {
        var editor = editormd("test-editor", {
            // width  : "100%",
            // height : "100%",
            path   : "https://cdn.jsdelivr.net/npm/editor.md@1.5.0/lib/"
        });
    });
</script>

    

以上，其实已经可以结束了，不过，我们没有那么容易结束。

如果你已经根据上文内容自己CV了一个markdown编辑器，你很快又会发现，你的编辑器里面emoji表情出不来！

就算你打开了，其实也加载不出来。

比如你去项目主页editormd，你会发现，emoji能打开，但是加载不出来。

那么，有没有办法呢？当然是有的。

我之前就因为emoji打开但是不加载又把项目下载下来一顿折腾。

后来F12一顿研究，才发现作者在editor.md.js文件里面引用的emoji页面链接不对。

所以，只要修改一下就??了。

下面是完整的代码，其中包括但不限于打开emoji，修改emoji链接。

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/editor.md@1.5.0/css/editormd.min.css" />
<div id="test-editor">
<textarea style="display:none;">
### 关于 Editor.md

**Editor.md** 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。
</textarea>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/editor.md@1.5.0/editormd.min.js"></script>
<script type="text/javascript">
    $(function () {
        editormd("test-editor", {
            width: "100%",
            height: 740,
            path: "https://cdn.jsdelivr.net/npm/editor.md@1.5.0/lib/",
            codeFold: true,
            saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
            searchReplace: true,
            htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启
            emoji: true,
        });
        editormd.emoji = {
            path: "https://www.webfx.com/tools/emoji-cheat-sheet/graphics/emojis/",
            ext: ".png"
        };
    })

    

我本来还打开了tex科学公式，但没有起作用，初步判断是字体加载问题，不过一时半会也用不上这玩意儿，还是算了吧。

对了，如果你是在hexo博客上搞这个，可以在页面开头加上layout: false,这样就把博客本身的布局关了。

还有，最好在html里面操作，而不是md里面，自行判断。

到此为止。

原文：https://www.cnblogs.com/jiaosenvip/p/12664308.html