md在线编辑器使用

Posted on 2022-11-27 21:34  呱呱呱呱叽里呱啦  阅读(1220)  评论(0)    收藏  举报

md在线编辑器使用

目录

一、下载editor.md

https://pandao.github.io/editor.md/
https://github.com/pandao/editor.md/archive/master.zip

解压后放入静态文件夹

二、编辑页面引入

（一）模板中引入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>

（三）全屏优化

<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>