django中markdown插件显示以及预览

最新推荐文章于 2024-04-10 09:47:51 发布

Yy._.

最新推荐文章于 2024-04-10 09:47:51 发布

阅读量202

点赞数

文章标签： django python 后端

本文链接：https://blog.csdn.net/weixin_62686862/article/details/130545317

版权

文章介绍了如何在Django项目中使用开源的Markdown编辑器editor.md，包括下载、解压缩、静态文件配置，以及在HTML模板中的使用方法，同时提供了编辑和预览Markdown内容的示例代码。

摘要由CSDN通过智能技术生成

markdown插件下载：

GitHub - pandao/editor.md: The open source embeddable online markdown editor (component).The open source embeddable online markdown editor (component). - GitHub - pandao/editor.md: The open source embeddable online markdown editor (component).https://github.com/pandao/editor.md在插件下载之后解压缩到django项目的static/plugins目录文件下

markdown在django中的使用：

{% load static %}
<head>
    <link rel="stylesheet" href="{% static 'plugins/editor.md-master/css/editormd.min.css' %}">
</head>
<body>
<div id="editor">
    {{ field }}
</div>
</body>
<script src="{% static 'plugins/editor.md-master/editormd.js' %}"></script>
<script>
    $(function () {
        initEditor();
    })

    function initEditor() {
        editormd('editor', {
            placeholder: '请输入内容',
            height: 500,
            path: "{% static 'plugins/editor.md-master/lib/' %}"
        })
    }
</script>

markdown在django中的预览：

{% load static %}
<head>
    <link rel="stylesheet" href="{% static 'plugins/editor.md-master/css/editormd.preview.min.css' %}">
</head>
<body>
<div id="preview_md">
    <textarea>{{ wiki_object.content }}</textarea>
</div>
</body>

<script src="{% static 'plugins/editor.md-master/editormd.min.js' %}"></script>
<script src="{% static 'plugins/editor.md-master/lib/flowchart.min.js' %}"></script>
<script src="{% static 'plugins/editor.md-master/lib/jquery.flowchart.min.js' %}"></script>
<script src="{% static 'plugins/editor.md-master/lib/marked.min.js' %}"></script>
<script src="{% static 'plugins/editor.md-master/lib/prettify.min.js' %}"></script>
<script src="{% static 'plugins/editor.md-master/lib/raphael.min.js' %}"></script>
<script src="{% static 'plugins/editor.md-master/lib/sequence-diagram.min.js' %}"></script>
<script src="{% static 'plugins/editor.md-master/lib/underscore.min.js' %}"></script>
<script>
    var WIKI_DETAIL_URL = '{% url 'wiki' project_id=request.tracer.project.id %}'
    $(function () {
        {#markdown预览    #}
        initPreviewMd();
    })

    function initPreviewMd() {
        editormd.markdownToHTML('preview_md', {
            htmlDecode: "style,script,iframe"
        })
    }
</script>