django引入富文字編輯器Markdown
阿新 • • 發佈：2018-12-10
一、引入編輯器：
1，編輯器樣式效果截圖：
2，引入檔案：
https://github.com/qiwsir/DjangoPracticeProject/tree/master/mysite2/static
放入本地static目錄下。
3，html程式碼:
3.1引入樣式
{% 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>二、引入編輯器僅作為樣式展示
<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>