Editor markdown在flask上使用

最新推荐文章于 2025-04-01 09:20:16 发布

lengyer

最新推荐文章于 2025-04-01 09:20:16 发布

阅读量1.4k

点赞数

分类专栏： flask 文章标签： flask webview

本文链接：https://blog.csdn.net/lengyer/article/details/122046565

版权

flask 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Flask应用中使用Markdown编辑器，包括HTML、JS代码配置，后端处理图片和文章代码段的保存，以及URL获取图片的实现。

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

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/editor/css/editormd.css">
</head>
<body>
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
<script src="/editor/editormd.js"></script>
<script src="/editor/editormd.min.js"></script>
<div class="container" style="margin-top: 20px;">
    <div class="row">
        <div class="col-12" style="padding: 1px 0px">文章标题
            <input type="text" class="form-control" id="headline">
        </div>
        <div class="col-12" id="test-editor">
            <textarea style="display:none;" id="content"></textarea>
        </div>
        <button onclick="doPost()">发布文章</button>
    </div>
</div>
</body>
</html>

JS代码段

<script type="text/javascript">
    $(function () {
        var editor = editormd("test-editor", {
            width: "100%",
            height: "500px",
            path: "/editor/lib/",                       //依赖lib文件夹路径
            saveHTMLToTextarea: true,                   // 获取用户编辑的内容放到textarea中
            emoji: true,                                //emoji 表情，默认关闭
            // htmlDecode: "style,script,iframe|on*",   // 开启 HTML 标签解析，为了安全性，默认不开启
            syncScrolling: "single",
            breaks: true,                               //允许换行
            /*上传图片文件*/
            imageUpload: true,                          // 开启上传文件功能
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], // 上传图片的格式
            imageUploadURL: "/image/upload"             //后端上传图片的地址
        });
    });
    function doPost() {
         var headline = $("#headline").val();
         var content = $("#content").val();
         console.log(headline);
         $.post('/editor/post', {
            'headline': headline,
             'content': content
         },function (data) {
             if (data.success)
                 window.alert('发布成功');
             else {
                 window.alert('发布失败');
             }
         },'json')
    }
    </script>

后端保存image图片

@app.route('/image/upload', methods=['POST'])
def imageUpload():
    # 获取文件
    file = request.files.get('editormd-image-file')
    # 如果没有文件返回上传失败
    if not file:
        res = {
            'success': 0,
            'message': '上传失败'
        }
    else:
        # 分割文件获取后缀
        ex = os.path.splitext(file.filename)[1]
        # 分割文件获取文件名
        fname = os.path.splitext(file.filename)[0]
        # 重命名文件时间+后缀名
        filename = datetime.now().strftime('%Y%m%d%H%M%S') + ex
        # 保存文件
        file.save(fr'static/upload/{filename}')
        # 返回上传成功
        res = {
            'success': 1,
            'message': '上传成功',
            'url': url_for('image', name=filename)
        }
    return jsonify(res)

后端保存文章代码段

# 保存文章
@app.route('/editor/post', methods=['POST'])
def editorPost():
    headline = request.form['headline']
    credate = datetime.now().strftime('%Y-%m-%d')
    content = request.form['content']
    filename = time.strftime('%Y%m%d%H%M%S', time.localtime(time.time()))
    file_path = f'static//md//{headline}-{filename}.md'
    with open(file_path, 'w', encoding='utf-8') as f:
        f.write(content)
    return 'Success'

url获取图片代码段

# 获取图片地址
@app.route('/image/<name>', methods=['GET', 'POST'])
def image(name):
    with open(os.path.join('static//upload', name), 'rb') as f:
        resp = Response(f.read(), mimetype="image/jpeg")
    return resp