editormd编辑器在flask中的使用

最新推荐文章于 2022-06-21 11:57:56 发布

hesmer1987

最新推荐文章于 2022-06-21 11:57:56 发布

阅读量690

点赞数 1

分类专栏： flask 文章标签： flask html python

本文链接：https://blog.csdn.net/weixin_46099734/article/details/120636226

版权

本文档详细介绍了如何在Flask应用中集成开源Markdown编辑器Editormd，包括编辑器的配置、前端页面的引入、后端图片上传功能的实现以及Markdown内容的保存和展示。通过实例代码展示了编辑器的使用方法和后端处理流程，帮助开发者快速搭建Markdown编辑环境。

摘要由CSDN通过智能技术生成

editormd简介

说明

Editormd是一款开源的可嵌入的markdown在线编辑器

项目地址

https://pandao.github.io/editor.md/

在flask项目中使用editormd

官网下载v1.5.0版本，editor.md-master.zip,解压后，将文件夹名称修改为editormd,放在项目static目录下，如下图：

在自己的页面中引入相关的CSS和JS，代码如下：

 <!-- editormd CSS文件 -->
<link rel="stylesheet" href="{
      { url_for('static',filename='editormd/css/editormd.css') }}"/>
 <!-- editormd JS相关文件 -->
<script src="{
      { url_for('static',filename='js/jquery.min.js') }}"></script>
<script src="{
      { url_for('static',filename='editormd/editormd.min.js') }}"></script>

在自己的页面中添加form表单，表单中添加div，id为article-content，div中包含textarea。

<form name="mdEditorForm" action='/save' method='post'>
                    <div style='height: 40px;padding: 5px; text-align: center;'>
                        标题： <input type="text" name="title" style='height:30px;width:390px;'> 
                        &nbsp;&nbsp;&nbsp;&nbsp;<button id='confirmButton'>发布文章</button>
                    </div>
                    <!-- 文章的主体内容 textarea -->