python之内嵌编辑器

最新推荐文章于 2023-01-24 17:11:04 发布

遨游的菜鸡

最新推荐文章于 2023-01-24 17:11:04 发布

阅读量496

点赞数

分类专栏： python

本文链接：https://blog.csdn.net/qq_34405401/article/details/102627986

版权

python 专栏收录该内容

26 篇文章 2 订阅

订阅专栏

文章目录

注：上一篇的markdown使用是将markdown语言转为html，这一篇文章是如何写markdown语言并实时预览
1.editor.md介绍
2.开始
总结：即用此编辑器写markdown语言并实时预览，然后用python的markdown显示
新加：可以用jupyter notebook作为编写后台；编写后保存为markdown文件，再在前端读取显示！

注：上一篇的markdown使用是将markdown语言转为html，这一篇文章是如何写markdown语言并实时预览

1.editor.md介绍

editor是网站内嵌编辑器，它可以达到实施预览效果

2.开始

2.1从GitHub上下载editor，把需要的文件放入自己的项目中（还有fonts、lib、plugins等文件夹）

github网址：https://github.com/pandao/editor.md
官方网址：https://pandao.github.io/editor.md/
搭建参考网址：http://www.cnblogs.com/Leo_wl/p/5763491.html

2.2 编辑器页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>editArticle</title>
    <link rel="stylesheet" href="/static/css/style.css"/>  所需css文件
    <link rel="stylesheet" href="/static/css/editormd.css"/>  所需css文件
</head>
<body>
<div id="layout">
    <header>
        <h1>编写文章</h1>
        <p>Write your article</p>
    </header>
    <form method="post" action="/admin/editArticle/">
        <div id="test-editormd">
            <textarea style="display:none;" name="markdownText"></textarea>
            <textarea style="display:none;" id="htmlText" name="htmlText"></textarea>
            下面js中saveHTMLToTextarea: true这句话是自动将markdown语句存入textarea，这里每个textarea都存了；因此这里写的第二个textarea用来通过下方的input.click()转为html语句存入！！！！
        </div>
        <div style="width:90%;margin: 10px auto;">
            <input type="submit" name="submit" value="提交表单 Submit" style="padding: 5px;"/>
        </div>
    </form>
</div>
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script src="/static/js/editormd.min.js"></script>
<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd("test-editormd", {
            width: "90%",
            height: 640,
            syncScrolling: "single",
            path: "/static/lib/",
            //imageUpload : true, 本地上传按钮
            //imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],本地上传格式
            //imageUploadURL : "/static/img", 本地上传路径
            saveHTMLToTextarea: true,
            //previewTheme : "dark"//使用黑色主题
        });
        //testEditor.getMarkdown();       // 获取 Markdown 源码
        //testEditor.getHTML();           // 获取 Textarea 保存的 HTML 源码
        //testEditor.getPreviewedHTML();  // 获取预览窗口里的 HTML，在开启 watch 且没有开启 saveHTMLToTextarea 时使用
    });
    $("input").click(function () {
        $("#htmlText").val(testEditor.getHTML());
    })
</script>
</body>
</html>

至此文章编辑页面ok！如下：
在这里插入图片描述

2.3展示

2.3.1 此编辑器当然带有将markdown的语句转为html并显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>下方link的样式里除了第一个剩下都和editor相关
    <link rel="stylesheet" href="/static/css/monokai.css">
    <link rel="stylesheet" href="/static/css/style.css"/>
    <link rel="stylesheet" href="/static/css/editormd.css"/>
    <link rel="stylesheet" href="/static/css/editormd.preview.css">
    <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/katex.min.css">
    <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/katex.min.css">
</head>
<body>
    {{ html|safe }}  传进来的值保存在名叫html的字典里
</body>
</html>