给博客系统添加MARKDOWN编辑器时解决的问题

引子

采用django实现的博客里面使用了markdown，到达下图的效果，还是遇到不少坑。这个博客给大家介绍一下。

集成markdown方法

1、下载的mdeditor

我用的是这个：

• Editor.md
• @author Pandao
• {@link https://github.com/pandao/editor.md}
• @updateTime 2015-06-09
  需要把下载的文件夹放到django项目static下面，这是网页里面使用的css和js文件。

2、给项目还有下载django-mdeditor

 采用pip install django-mdeditor。

3、在网页里面增加代码

下面是在网页里面采用mdeditor控件的代码。

 <form  class="form-horizontal" method="post">
                                    {% csrf_token %}
                                    <div class="row"   >
                                        <div class="col-md">
                                        <p  class="text-primary">文章摘要：</p>
                                        <textarea  rows="1" cols="100" id="id_summary"  style="resize: none"      >{{ article.summary }}</textarea>

                                        </div>
                                        <div class="col-md">
                                        <p  class="text-primary">首页图片：</p>
                                         <textarea  rows="1"  cols="100"   id="id_img_link"  style="resize: none"   >{{ article.img_link }}</textarea>

                                        </div>
                                    </div>
                                        <div class="container" id="editormd"   >
                                            <textarea style="display:none;" id="id_body"  onresize="both"  >{{ article.body }}</textarea>
                                        </div>

                                <input type="button" value="发布博客" class="btn btn-primary btn-lg" onclick="post_update()" >

                        </form>

下面是网页里面设置该控件的代码：

 // new
    $(function(){
        var editor = editormd('editormd', {
            syncScrolling: 'single',
            watch: true,   // 关闭实时预览
            lineNumbers: false,
            lineWrapping: false,
            width: "100%",
            height:"640",
            placeholder: '',
               onfullscreen : function() {
                this.editor.css("border-radius", 0).css("z-index", 9999);
            },
            onfullscreenExit : function() {
                this.editor.css({
                    zIndex : 10,
                    border : "1px solid rgb(221,221,221)"
                })
            },
            syncScrolling: "single",
            path: "/static/editor/lib/",
            // theme
            theme : "default",
            previewTheme : "default",
            editorTheme : "default",
            htmlDecode: "style,script,iframe,sub,sup|on*",
            saveHTMLToTextarea: true, // editor.md 有问题没有测试成功
            toolbarAutoFixed: true,
            searchReplace: true,
            emoji: true,
            tex: true,
            taskList: false,
            flowChart: true,
            sequenceDiagram: true,
            // image upload
            imageUpload: true,
            imageFormats: ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'webp'],
            imageUploadURL: "/mdeditor/uploads/",
            toolbarIcons: function () {
                return ['undo', 'redo', '|', 'bold', 'del', 'italic', 'quote', 'ucwords', 'uppercase', 'lowercase', '|', 'h1', 'h2', 'h3', 'h5', 'h6', '|', 'list-ul', 'list-ol', 'hr', '|', 'link', 'reference-link', 'image', 'code', 'preformatted-text', 'code-block', 'table', 'datetime', 'emoji', 'html-entities', 'pagebreak', 'goto-line', '|', 'help', 'info', '||', 'preview', 'watch', 'fullscreen']
            },
            onload: function () {
                console.log('onload', this);
                //this.fullscreen();
                //this.unwatch();
                //this.watch().fullscreen();

                //this.setMarkdown("#PHP");
                //this.width("100%");
                //this.height(480);
                //this.resize("100%", 640);
            }
        });
    })
</script>

4、修改django里面的urls文件

增加以下内容：

    path('mdeditor/',include('mdeditor.urls')),
]
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

5、增加katex支持

katex是用于算术公式显示，特殊字符显示等。mdediror控件里面使用的是国外CDN网站的katex代码，很慢！因此首先要下载katex文件，放置在static/editor文件夹里面，修改下面代码改动路径。

editormd.katexURL  = {
css : "/static/editor/katex/katex",
js  : "/static/editor/katex/katex"

6、增加emoji支持

请看我前面的博客。

还存在的问题：图片大小变化； 谁解决了给我说说。