部落格markdown編輯器內建步驟

markdown編輯器內建

• markdown編輯器下載下傳網址https://pandao.github.io/editor.md/

下載下傳後将以下檔案夾複制到項目中

導入分四個步驟：

第一步将editormd.min.css檔案引入html檔案中

第二步将js檔案導入到html檔案中

第三步将文本編輯器的部分換成markdown編輯器，代碼如下

<div class="field">
                    <div id="md-content" style="z-index: 1 !important;">
                        <textarea placeholder="部落格内容" name="content"  style="display: none">
              [TOC]

#### Disabled options

- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;
                    </textarea>
                    </div>
                </div>
           

第四步初始化markdown編輯器

<script>

    //初始化Markdown編輯器
    var contentEditor;
    $(function() {
        contentEditor = editormd("md-content", {
            width   : "100%",
            height  : 640,
            syncScrolling : "single",
            path    : "../static/lib/editormd/lib/"
        });
    });
</script>
           

至此完成，結果如下