Editor.md生成目录

Editor.md是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建
本文主要介绍editor.md如何生成目录

editor.md是一款markdown编辑器
官网 https://pandao.github.io/editor.md/

1.新增五个按钮

<div class="btns">
    <button id="insert-btn">ToC insert to custom container</button>
    <button id="menu-btn">ToC Dropdown menu</button>
    <button id="menu2-btn">ToC Dropdown menu insert to custom container</button>
    <button id="default-btn">Default</button>
    <button id="tocm-btn">Enable [TOCM]</button>
</div>

2.写入js

$("#insert-btn").click(function() {
    testEditor.config({
        tocContainer : "#custom-toc-container",
        tocDropdown   : false
    });
});

$("#menu-btn").click(function(){
    testEditor.config({
        tocContainer  : "",
        tocDropdown   : true,
        tocTitle      : "目录 Table of Contents dsfsadfsfdsdf",
    });
});

$("#menu2-btn").click(function(){
    testEditor.config({
        tocContainer  : "#custom-toc-container",
        tocDropdown   : true,
        tocTitle      : "目录 Table of Contents dsfsadfsfdsdf",
    });
});

$("#default-btn").click(function() {
    $("#custom-toc-container").html("#custom-toc-container");
    testEditor.config({
        tocContainer : "",
        tocm : false,
        tocDropdown  : false
    });
});

$("#tocm-btn").click(function() {
    $("#custom-toc-container").html("#custom-toc-container");
    testEditor.config({
        tocm : true,
        tocContainer : "",
        tocDropdown   : false
    });
});

3.样式css

#custom-toc-container {
    border: 1px solid #ddd;
    width: 90%;
    margin: 0 auto 15px;
    overflow: visible;
}

#custom-toc-container > .markdown-toc {
    padding: 10px;
}

效果如下