Flask轻博客系统实战开发(10) 一 集成Editor.md支持markdown在线编辑

欢迎关注原创视频教程

Python微信订餐小程序课程视频

https://edu.csdn.net/course/detail/36074

Python实战量化交易理财系统

https://edu.csdn.net/course/detail/35475
首先支持在线编辑markdown编辑，作为技术人通常使用markdown写文档还是比较顺手的，因为格式统一，不需要花很多的时间在排版上，我选用了国内editor.md作为本博客的编辑器，下面就对editor.md的集成做下简单介绍

文章编辑界面

{% extends 'admin/common/base.html' %}
{% block css %}
{
  { super() }}
<link rel="stylesheet" href="{
    {url_for('.static',filename='editor_md/editormd.min.css')}}">
<link rel="stylesheet" href="{
    {url_for('.static',filename='css/write.css')}}">
{% endblock %}
{% block js %}
{
  { super() }}
<script src="{
    {url_for('.static',filename='editor_md/editormd.min.js')}}"></script>
<script>

    var imagehosting_for = "thumbnail-img";
    //图床
    function imagehosting(flag) {
     
        imagehosting_for = flag;
        layer.open({
     
            type: 2,
            title: '图片管理',
            shade: 0.8,
            maxmin: true,
            shadeClose: true,
            area: ['80%', '90%'],
            content: '{
     {url_for("admin.image_hosting")}}' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
        });
    }

    function imagehosting_callback(obj) {
     
        //缩略图
        if(imagehosting_for === 'thumbnail-img') {
     
            $('#thumbnail-img').attr('src', obj.img_url);
            $('#thumbnail').val(obj.img_url);
        }
        //编辑器 editor.md
        if(imagehosting_for === 'editor-img') {
     
            console.log(myEditor)
            myEditor.settings.imagehosting_callback(obj)
        }

    }

    var myEditor;
    $(function () {
     
        myEditor = editormd("write-editor", {
     
            // width: '100%',
            height: '450px',
            syncScrolling: "single",
            path: "{
     {url_for('.static',filename='editor_md/lib/')}}",
            emoji: true,//emoji表情，默认关闭
            watch: true, // 关闭实时预览
            taskList: true,
            tocm: true, // Using [TOCM]
            tex: true,// 开启科学公式TeX语言支持，默认关闭
            //flowChart: true,//开启流程图支持，默认关闭
            //sequenceDiagram: true,//开启时序/序列图支持，默认关闭,
            //启动本地图片上传功能
            imageUpload: true,
            // imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            // imageUploadURL: "{
     {url_for('.upload')}}",
            toolbarIcons: function () {
     
                // Or return editormd.toolbarModes[name]; // full, simple, mini
                // Using "||" set icons align right.
                // ["undo", "redo", "|", "bold", "del", "italic", "quote", "|", "h1", "h2", "h3", "h4",
                //     "h5", "h6", "|", "list-ul", "list-ol", "hr", "|", "link", "reference-link", "image",
                //     "code", "code-block", "table", "datetime", "html-entities", "goto-line", "search", "||",
                //     "fullscreen", "watch", "preview", "info", "|", "publish"]
                return ["bold", "del", "italic", "quote", "|", "h2", "h3", "h4",
                    "|", "list-ul", "list-ol", "hr", "|", "link", "reference-link", "image",
                    "code", "code-block", "table", "|", "watch", "fullscreen"]
            },
            imagehosting: function () {
     
                imagehosting('editor-img');
            },
            imagehosting_callback:function(obj) {
     

            }
        });

        function save(state) {
     
            $.ajax({
     
                url: '{
     {url_for("admin.write")}}',
                type: "post"