MarkDown编辑器的应用

1 使用markdown编辑文档

1）下载Markdown编辑器文件

http://editor.md.ipandao.com/#download

2）引用css和js文件

<link rel="stylesheet" href="{% static "app01/plugins/editor-md/css/editormd.min.css" %}">


<div id="editor">
    {{ field }}
</div>


<script src="{% static "app01/plugins/editor-md/editormd.amd.min.js" %}"></script>

<script>
    $(function () {
        initEditMd();
    });
    
    /*
    初始化markdown（textarea转换成编辑器）
    */
    function initEditMd() {
        editormd('editor', {
            placeholder: "请输入内容",
            height: 500,
            path: "{% static "app01/plugins/editor-md/lib/" %}",
            imageUpload: true,  // 本地上传
            imageFormats: ['jpg', 'jpeg', 'png', 'gif'],  // 上传图片支持的格式
            imageUploadURL: '/app01/project_manage/
                            {{ request.sass.project.id}}/wiki_upload/'  // 图片的上传路径
        })
    }
</script>

2.文档以markdown格式显示

<link rel="stylesheet" href="{% static "/app01/plugins/editor-md/css/editormd.preview.min.css" %}">

<div id="previewMarkdown">
    <textarea>{{ wiki_obj.content }}</textarea>
</div>

<script src="{% static "app01/plugins/editor-md/editormd.amd.min.js" %}"></script>
<script src="{% static "app01/plugins/editor-md/lib/marked.min.js" %}"></script>
<script src="{% static "app01/plugins/editor-md/lib/prettify.min.js" %}"></script>
<script src="{% static "app01/plugins/editor-md/lib/raphael.min.js" %}"></script>
<script src="{% static "app01/plugins/editor-md/lib/underscore.min.js" %}"></script>
<script src="{% static "app01/plugins/editor-md/lib/sequence-diagram.min.js" %}"></script>
<script src="{% static "app01/plugins/editor-md/lib/flowchart.min.js" %}"></script>
<script src="{% static "app01/plugins/editor-md/lib/jquery.flowchart.min.js" %}"></script>

function initPreviewMarkdown() {
    editormd.markdownToHTML("previewMarkdown", {
        htmlDebode: "style, script, iframe"
    });
}