django markdown-优快云博客

本文介绍了一种使用Markdown编辑器进行文章编辑并利用Ajax提交的方法，同时展示了如何将Markdown转换为HTML以进行预览。涉及编辑器配置、Ajax提交处理及Markdown到HTML的转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 编辑器

css

1     <link rel="stylesheet" href="{% static 'plugin/editor.md/css/editormd.css' %}">

div

1                 <div id="editormd" class="col-md-10 text-left">
2                     <textarea name="" style="display: none" id="id_body"></textarea>
3 
4                 </div>

提交使用ajax。初次测试使用post内容提交有误

                    <input type="button" class="btn btn-primary btn-lg" value="保存"
                    onclick="publish_article()">

js代码

{% block javasript %}
    <script src="{% static 'plugin/editor.md/editormd.min.js' %}"></script>
    <script>
        $(function () {
            var editor=editormd("editormd",{
                width:"100%",
                height:"640",
                syncScrolling:"single",
                path:"{% static 'plugin/editor.md/lib/' %}"
            });
        })
    </script>



    <script>
    function publish_article() {
        var title=$("#id_title").val();
        var columnid = $("#which_column").val();
        var body = $("#id_body").val();
        $.ajax({
            url:"{% url 'article:article_post' %}",
            type:"POST",
            data:{"title":title,"columnid":columnid,"body":body},
            success:function (args) {
                if(args=="1"){
                    alert("保存完成");
                    location.href="{% url 'article:article_list' %}";
                }else if(args==2){
                    console.log("todo2")
                }else{
                    alert("内容有误，重新填写")
                }
            }
        });
    }
    </script>
{% endblock %}

2.查看

{% block head %}
    <link rel="stylesheet" href="{% static 'plugin/editor.md/css/editormd.preview.css' %}">
{% endblock %}


<div id="editormd-view" >
    <textarea name="" id="append-test" style="display: none">
{{ article.body }}
    </textarea>

</div>



{% block javasript %}
    <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>
    <script src="{% static 'plugin/editor.md/editormd.min.js' %}"></script>

    <script>
        $(function () {
            editormd.markdownToHTML("editormd-view",{
                htmlDecode:"style,script,iframe",
                emoji:true,
                taskList:true,
                tex:true,
                flowChart:true,
                sequenceDiagram:true,
            });

        });
    </script>
{% endblock %}