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>
浙公網安備 33010602011771號