django引入富文本编辑器Markdown
一、引入编辑器:
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>