关于个人博客可以记录的问题（二）

本篇主要讲Editor.md的引入和展示！

目录

一、Editor.md的引入

1，emoji无法显示

（1）下载

（2）修改引用地址

2，图片上传

3，预览里的目录

二、Editor.md的文章展示

1，简易展示

2，正常展示

highlight.js

3，关于换行

---

一、Editor.md的引入

        写博客还是喜欢markdown语法，所以想引进md格式的编辑器，最后选了Editor.md

        引入的话不需要引入两个textarea，只要一个就可以，配置如下

<div id="test-editormd"> 
    <!-- 书写与实时显示的textarea -->
	<textarea id="content" name="content" style="display:none;">{{article&&article.content}}</textarea>
</div>

        然后在js里配置：

//文本编辑器
var editor;
$(function () {
    editor = editormd("test-editormd", {//注意1：这里的就是上面的DIV的id属性值
        width: "100%",
        height: 600,
        placeholder: "此处开始编写您要发布的内容...",
        syncScrolling: "single",
        emoji: true,
        tex: true,                   // 开启科学公式TeX语言支持，默认关闭
        flowChart: true,             // 开启流程图支持，默认关闭
        sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
        path: "/admin/lib/editormd/lib/",//注意2：你的路径
        saveHTMLToTextarea: true,//注意3：这个配置，方便post提交表单
        imageUpload: false,//不允许本地上传图片 因为后端那个我不太会配置 
        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],//支持接收的图片上传的格式
        imageUploadURL: "../public/uploads",//你的controller里为上传图片所设计的路径
        onload: function () {
            //加载完成后 配置生成目录
            editor.config({
                tocDropdown: true,
                tocTitle: "目录 Table of Contents",
            });

        }
    });
});

        因为Editor.md其实很久没有更新维护了，所以有很多问题需要我们自己注意一下。

1，emoji无法显示

        我从editormd.js 找进去，发现原本的资源请求地址已经不再支持emoji了，所以没办法获得返回结果，网上有一些其他的网址替代思路，但是我试了还是失败，最后采取的解决方案是将emoji整个资源包下载下来，然后将资源地址指向本地。

（1）下载

        遇到的问题：raw.githubusercontent.com无法访问解决

        一直以为是我没fanqiang才网速太慢下载不了，后来发现了解决方案：在 C:\WINDOWS\system32\drivers\etc\hosts里增加185.199.109.133 raw.githubusercontent.com，然后就能顺利下载emoji.zip

（2）修改引用地址

        我在editormd.js里找到这各部分，然后将path指向了我自己的路径

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

        注意，除了editormd.js里要改，还要找进editormd.min.js里一并修改！

2，图片上传

        虽然我在我的文件表单上传封面里实现了图片上传，但是在编辑器里的上传我找了很多方案都失败，这里没有给出什么解决思路，只是提醒自己还有一个坑要填！

        （还有实在解决不出来就干脆关了这个功能别和自己过不去）

3，预览里的目录

        Editor.md的编辑器分为实时编辑和实时预览，我上面的config里配置了tocDropdown: true可以搞出自动生成目录，但是这个需要使用者在文章顶部手动打出[TOC]才可以生成~

二、Editor.md的文章展示

       起初不加入任何解析的话，文章页渲染出的文章就是带着html标签的文章，所以我们需要引入marked来解析文章。 marked 是一个 JavaScript 编写的全功能 Markdown 解析和编译器。

1，简易展示

        最开始我没发现我少引入了很多js和css，所以在展示模块遇到很多问题，然后寻找到的简单解析方法就是如下配置：

         html里：

<div class="article-content" id="content">
    <textarea style="display:none;">{{@article.content}}</textarea>
</div>

         js里：

var article_content = document.querySelector('.article-content');
article_content.innerHTML=marked.parse(article_content.innerHTML); 

        这种配置的问题是只有简单的层级目录的区分，很多表情、表格等是展现不出来的。

2，正常展示

        为了能够正常展示，我们首先需要引进marked里的css与js，注意，他们的引入顺序是固定的，否则会出问题：

<script src="/admin/lib/editormd/lib/marked.min.js"></script>
<script src="/admin/lib/editormd/docs/scripts/prettify/prettify.js"></script>
<script src="/admin/lib/editormd/lib/raphael.min.js"></script>
<script src="/admin/lib/editormd/lib/underscore.min.js"></script>
<script src="/admin/lib/editormd/lib/sequence-diagram.min.js"></script>
<script src="/admin/lib/editormd/lib/flowchart.min.js"></script>
<script src="/admin/lib/editormd/lib/jquery.flowchart.min.js"></script>
<script src="/admin/lib/editormd/editormd.min.js"></script>

然后就可以配置：

//将markdown格式转为html
hljs.initHighlightingOnLoad();
editormd.markdownToHTML("content", {
    htmlDecode: "style,script,iframe",
    emoji: true,
    taskList: true,
    tocm: true,   // 解析目录
    tex: true,  // 默认不解析
    flowChart: true,  // 默认不解析
    sequenceDiagram: true,  // 默认不解析
    highlight: function (code) {
        return hljs.highlightAuto(code).value;
    },
});

highlight.js

注意到我在上方用到了highlight，这个是用来给代码块加高亮的！引入highlight.min.js后，可以选择一款自己喜欢的高亮样式的css引入：

 <link rel="stylesheet" href="/home/lib/highlight.js/styles/arduino-light.css" />

3，关于换行

        我在做测试的时候输入了大量的11111111111，然后发现我的文章盒子会被111顶出去而不是让111换行，这并不是我的文章盒子样式没写好，而是在单词或者同样字符的情况下，默认不换行。

解决方案是给文章加css样式强制换行：

word-wrap: break-word;

word-break:break-all;  

这个部分主要讲的就是Editor.md的引入与展示的我所遇到的需要注意的问题。

希望对你有帮助~