md在線編輯器使用

一、下載editor.md

https://pandao.github.io/editor.md/
https://github.com/pandao/editor.md/archive/master.zip

解壓后放入靜態(tài)文件夾

二、編輯頁面引入

（一）模板中引入CSS和JS文件

{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'web/plugin/mdeditor/css/editormd.min.css' %}">
{% endblock %}
{% block js %}
<script src="{% static 'web/plugin/mdeditor/editormd.min.js' %}"></script>
{% endblock %}

（二）初始化editor

<script>
    $(function () {
            initEditor();
        });
    function initEditor() {
            var editor = editormd("editor", {
                placeholder: "請輸入內容",
                // width  : "100%",
                height : 500,
                path   : "{% static 'web/plugin/mdeditor/lib/' %}"
            });
        }
</script>

（三）全屏優(yōu)化

<style>
    .editormd-fullscreen {
            z-index: 1001;
        }
</style>

三、展示頁面引入

（一）模板中引入CSS和JS文件

{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'web/plugin/mdeditor/css/editormd.preview.min.css' %}">
{% endblock %}
{% block js %}
<script src="{% static 'web/plugin/mdeditor/editormd.min.js' %}"></script>
    <script src="{% static 'web/plugin/mdeditor/lib/flowchart.min.js' %}"></script>
    <script src="{% static 'web/plugin/mdeditor/lib/jquery.flowchart.min.js' %}"></script>
    <script src="{% static 'web/plugin/mdeditor/lib/marked.min.js' %}"></script>
    <script src="{% static 'web/plugin/mdeditor/lib/prettify.min.js' %}"></script>
    <script src="{% static 'web/plugin/mdeditor/lib/raphael.min.js' %}"></script>
    <script src="{% static 'web/plugin/mdeditor/lib/sequence-diagram.min.js' %}"></script>
    <script src="{% static 'web/plugin/mdeditor/lib/underscore.min.js' %}"></script>
{% endblock %}

（二）初始化展示

<script>
    $(function () {

                initViewMd();
            });
    function initViewMd() {
                editormd.markdownToHTML("viewMd", {
                    htmlDebode: "style,script,iframe"
                })
            }
</script>