django集成markdown

最新推荐文章于 2026-04-17 13:51:26 发布

原创最新推荐文章于 2026-04-17 13:51:26 发布 · 241 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

django

本文详细介绍了如何在前端项目中集成Markdown编辑器，包括下载资源、应用JS和CSS、初始化编辑器及预览功能，提供了从引入到使用的完整步骤。

1.下载

https://www.mdeditor.com/
https://github.com/pandao/editor.md
https://pandao.github.io/editor.md/examples/index.html

前端导入

1. textarea框通过div包裹以便以后查找并转化为编辑器
	<div id='editor'>.... </div>
	
2. 应用js和css
	<link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.min.css' %}">
	<script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>

3. 进行初始化js
	$(function () {
       initEditorMd();
    });
    
        /*
        初始化markdown编辑器（textare转换为编辑器）
         */
        function initEditorMd() {
            editormd('editor', {
                placeholder: "请输入内容",
                height: 500,
                path: "{% static 'plugin/editor-md/lib/' %}"  #必须要引入依赖最后必须加/
            })
        }
4.全屏 style css样式
	.editormd-fullscreen{
            z-index: 1001;
        }

3.实例

1. 内容区域
	<div id="previewMarkdown">
    	<textarea>{{ wiki_object.content }}</textarea>
    </div>
2. 引入css 、 js
	<link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.preview.min.css' %}">
	
	<script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/marked.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/prettify.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/raphael.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/underscore.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/sequence-diagram.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/flowchart.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/jquery.flowchart.min.js' %}"></script>
    
3. 初始化
	 $(function () {
            initPreivewMarkdown();

        });
        function initPreivewMarkdown() {
            editormd.markdownToHTML("previewMarkdown", {
                htmlDecode: "style,script,iframe"   #禁止往里面输入css,js（xss攻击）,嵌套页面
            });
        }