Django2.0集成Markdown编辑器【editor.md】下


发布时间:2019-04-04 02:45    作者: Uncle Hui   已过去:1 年,8 月   阅读总量:1042 已被赞:0


前端时间我工作真的很忙,也没时间来继续写博客,今天难得有时间,就来完成Django2.0集成Markdown编辑器【editor.md】这篇文章,在上篇,我已经初步实现了编辑器的在django2.0项目里的初步显示,现在我们接着来继续这个内容:

将编辑器的内容,通过ajax提交到后台:

我们为编辑页面新建一个js文件,随便取个名字吧,就叫index.js

 var testEditor;
    $(function () {
        testEditor = editormd("my-editormd", {
            width: "90%",
            height: 640,
            syncScrolling: "single",
            path: "/static/editor.md/lib/",//要和自己实际的项目中路径一致 
            saveHTMLToTextarea: true,

            imageUpload: true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/media/wenzhang_images/",//注意你后端的上传图片服务地址
            onload: function(){
                this.width("100%");
                this.height(480);
            }
        });
    });

 function Tijiaoneirong() {
    var self = this;
}

Tijiaoneirong.prototype.run=function () {
    var self = this;
    self.listenxxyiduEvent();

};

Tijiaoneirong.prototype.listenxxyiduEvent = function () {
    var zhuxiaobtn = $('#tijiao_post');
    zhuxiaobtn.click(function (eve) {
       eve.preventDefault();//通过eve来阻止默认提交行为,应该坚持每个表单都这样写
       var neirong = testEditor.getMarkdown()
        xfzajax.post({
           'url':'/post/',
           'data':{
                'text':neirong
           },'success':function (result) {
                if(result['code']===200){
                    console.log(result['data'])
                }else{
                    var messageObject = result['message'];
                    if(typeof messageObject === 'string' || messageObject.constructor === String){
                        xfzalert.alertSuccessWithTitle({
                        'title':'晖哥哥博客温馨提示',
                        'text':messageObject,
                        'type':'error'
                    });
                    }else{
                        for(var key in messageObject){
                            var messages = messageObject[key];
                            var message = messages[0];
                           xfzalert.alertSuccessWithTitle({
                        'title':'晖哥哥博客温馨提示',
                        'text':message,
                        'type':'error'
                    });
                        }
                    }
                }
            },
            'fail': function (error) {
                console.log(error);
            }


       })
    })
};
$(function () {
    var XX = new Tijiaoneirong();
    XX.run();
})

说明:首先我将初始化编辑器窗口的js代码也放到了这个js里了,然后我写了一个提交代码,最主要的是这句

var neirong = testEditor.getMarkdown()  通过各个方法拿到了全部编辑框里的内容,然后传到后台。

编辑框页面要先加一个提交按钮,如:

<div style="width:0%;margin: 10px auto;">
                <input type="submit" name="submit" value="提交文章" style="padding: 5px;" id="tijiao_post">
            </div>

后台接收处理:

新建一个文章模型,新建路由,新建处理视图等等就不再详说了,自己先建好。

简单看看处理保存代码:

def text(request):
    post_text = request.POST.get('text')
    print(post_text)
    w = Wenzhang()
    w.text = post_text
    w.save()
    return restful.ok(data=post_text)

前端显示数据库里的内容,如果我要显示我刚才保存的内容,要怎么做呢?

建立处理视图,html页面,路由等(过)

显示页面:1.要引入如下css和js

 <link rel="stylesheet" href="{% static 'editor.md/css/editormd.css' %}" />
<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
<script src="{% static 'editor.md/lib/marked.min.js' %}"></script>
<script src="{% static 'editor.md/lib/prettify.min.js' %}"></script>
<script src="{% static 'editor.md/lib/raphael.min.js' %}"></script>
<script src="{% static 'editor.md/lib/underscore.min.js' %}"></script>
<script src="{% static 'editor.md/lib/sequence-diagram.min.js' %}"></script>
<script src="{% static 'editor.md/lib/flowchart.min.js' %}"></script>
<script src="{% static 'editor.md/editormd.min.js' %}"></script>

具体路径结合自己实际修改

需要显示的内容处理视图

def wenzhang_xq(request,wenzhang_pk):
    w = Wenzhang.objects.get(pk = wenzhang_pk)
    print(w)
    return render(request,'xq.html',locals())

内容我放在了W这个变量里了,我们这样显示:

显示html页面:

<div id="doc-content">
    <textarea style="display:none;" placeholder="markdown语言">{{ w.text }}</textarea>
</div>
//{{w.tex}} 就是后台传来的变量
<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd.markdownToHTML("doc-content", {//注意:这里是上面DIV的id
            htmlDecode: "style,script,iframe",
            emoji: true,
            taskList: true,
            tocm: true,
            tex: true, // 默认不解析
            flowChart: true, // 默认不解析
            sequenceDiagram: true, // 默认不解析
            codeFold: true
        });});
</script>

节约时间我就没有单独写js了。

展示:

本练习的全部代码请点这里下载

链接:https://pan.baidu.com/s/1bwT2rhM8BDQqgrSE2eoNgQ 
提取码:yxag 
复制这段内容后打开百度网盘手机App,操作更方便哦

点赞

0




登陆后方可评论