django引入富文本编辑器Markdown

时间 2020-06-05 标签 django 引入文本编辑器 markdown

1、引入编辑器：javascript

1，编辑器样式效果截图：css

2，引入文件：html

https://github.com/qiwsir/DjangoPracticeProject/tree/master/mysite2/staticjava

放入本地static目录下。jquery

3，html代码:git

3.1引入样式github

{% load staticfiles %}

<head>
    <link rel="stylesheet" href="{% static 'editor/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'editor/css/editormd.css' %}">
</head>

3.2编写内容
<div class="col-md-2 text-right"><span>内容：</span></div>
<div id="editormd" class="col-md-10 text-left">
    <textarea style="display:none;" id="id_body"></textarea>
</div>

3.3加载启动
<script type="text/javascript" src="{% static "editor/editormd.min.js" %}"></script>

<script type="text/javascript">
{#        markdown#}
    $(function(){
        var editor = editormd("editormd",{
            width : "100%",
            height : 640,
            syncScrolling : 'single',
            path : "{% static 'editor/lib/' %}"
        });
    });

</script>

2、引入编辑器仅做为样式展现markdown

<link rel="stylesheet" href="{% static 'editor/css/editormd.preview.css' %}" />
    <div id='editormd-view'>
        <textarea id="append-test" style="display:none;">
{{ article.body }}
            </textarea> 
    </div>

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

<script type="text/javascript">
$(function(){
        editormd.markdownToHTML("editormd-view", {
        htmlDecode      : "style,script,iframe",  // you can filter tags decode
        emoji           : true,
        taskList        : true,
        tex             : true,  // 默认不解析
        flowChart       : true,  // 默认不解析
        sequenceDiagram : true,  // 默认不解析
    });
});
</script>