更好的 Markdown for emlog 解决方案

上一篇博文说到了让 emlog 支持 Markdown，但是在实际应用中我发现效果并不是非常理想，如在文章中输入\r会换行，以及不支持页面的 Markdown Parse。于是想去改进一下，读了 Editor.md 的文档，我决定基于 Editor.md 实现 Markdown 的 Parser。

1.安装并配置 Editor.md

安装 Editor.md 十分简单，我就不多说了，大家都会的。 重点在于配置 Editor.md，如何配置呢？这取决于你需要怎样的功能，这里推荐你去看看它的 Examples。 我的需求是 HTML in Markdown、TOC、以及输出 HTML，流程图和时序图以后恐怕也会用到。我的配置如下:

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

            $(function() {
                testEditor = editormd("test-editormd", {
                    width   : "10
                    height  : 640,
                    syncScrolling : "single",
                    htmlDecode : true,
                    sequenceDiagram : true,
                    flowChart : true,
                    saveHTMLToTextarea : true,
                    tocm : true,
                    tocContainer : "",
                    tocDropdown   : false,
                    path    : "https://static.imvictor.tech/static-old/js/editor.md/lib/"
                });
            });
        </script>

2.添加 Parser

首先，我们在 emlog 的admin/views中上一个博文提到的四个 php 文件中 form 里的合适位置处插入一个 <textarea>，并命名其 name 和 id 为 content。通过审查元素我们发现: Editor.md 的 Markdown Preview Div 的 ClassName 为 markdown-body editormd-preview-container，且整个编辑界面 HTML DOM 树中拥有此 ClassName 的有且只有这一个。所以我们可以通过令这个 <textarea> 的 innerText 属性等于 Preview Div 的 innerHTML 属性来实现 Parse。于是代码如下:

var applyer = document.getElementById('content');
var source = document.getElementsByClassName('markdown-body editormd-preview-container')[0];
applyer.innerText = source.innerHTML;

3.获取 Markdown 原文

由于 emlog 本身不支持 Markdown，所以我通过 github 转存 Markdown 文件，而 Parse 后无法获取源文件，不够方便，于是可以判断如果文章发表时间在第一篇 Markdown 文章之后则去 github 获取 Markdown 原文并进行 HTML 转义。代码如下:

<textarea class="editormd-markdown-textarea" style="display:none;"><?php $logDay = gmdate('Y-n-j', $date);$logSec = strtotime($logDay);if ($logSec > 1476439200) echo htmlspecialchars(file_get_contents("https://chickking-website.github.io/Blog-MD/" . 'post-' . $_GET['gid'] . '.md')); else echo $content; ?></textarea>

而且这样还实现了我修改文章无需复制修改后的原文去管理后台，只要 push 到 GitHub 后打开管理后台之后保存即可。 这样就近乎完美实现了 emlog 支持 Markdown 这一目标。