Flask搭建博客内置第三方Markdown

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

君莫舞丶无念

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

阅读量1k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： flask 文章标签： flask 搭建博客 markdown

本文链接：https://blog.youkuaiyun.com/qq_30985175/article/details/98938658

本文介绍了如何在Flask应用中集成Markdown编辑器editor.md，详细阐述了从思路整理到实现过程，包括显示编辑器、设计数据库和路由、解决图片插入问题的步骤，展示了在博客文章创建中如何处理文本格式和图片上传。

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

一直有在赶自己的博客网站，然后发现文章编辑如果只是使用文本编辑的话会产生很多问题，因此就决定查找资料并且内置一个第三方开源的Markdown编辑器。
最终我选择的是editor.md。

展示一下最终的效果。

废话不多说，开始今天的学习之旅吧。

一、整理思路

仔细思考后，发现有几点技术方面的问题：

将源代码内置到flask中并且能在页面上显示
输入文章后，需要将文章文本格式转化成一种格式保存在数据库中
查看博客文章时，从数据库读取相应文本，并且转换成与编辑器右边相同的浏览格式。
解决文章中不能插入图片的问题。

以下我将以文章“新增”时作为介绍，并非“编辑”。

二、显示编辑器

首先编写此页面的form：

class PostForm(FlaskForm):
    title = StringField('标题', [DataRequired(), length(max=255)])
    body = TextAreaField('内容', [DataRequired()])
    #categories = SelectMultipleField('Categories', coerce=int)
    categories=SelectField('文章种类', choices=[],coerce=int )
    body_html = HiddenField()
    submit=SubmitField(render_kw={'value': "提交",'class': 'btn btn-success pull-right'})
    file = FileField(label="文章封面",validators=[FileRequired(),FileAllowed(['png', 'jpg'], '只接收.png和.jpg的图片')])
    #保证数据与数据库同步
    def __init__(self):
	    super(PostForm, self).__init__()
	    self.categories.choices = [(c.id, c.name) for c in Category.query.order_by('id')]

其中categories要保证是灵活可变的并且能够和数据库中的“文章种类”表相同步，因此这里用了__init__函数。

接着在html上：

<form class="am-form am-form-horizontal" method="post" action="" enctype="multipart/form-data">
		            {
  
  { form.hidden_tag() }}
		            <div class="am-form-group am-form-file am-form-group-lg am-form-group-sm am-form-group-md">
		            	<div class="am-u-sm-4 am-u-md-4 am-u-lg-4">
		            		<button type="button" class="am-btn am-btn-dark am-btn-sm am-radius">
						    <i class="am-icon-cloud-upload"></i> 选择文章封面</button>
		            	
		            	{
  
  { form.file(class_='form-control',id='doc-form-file') }}
		            	
						<div id="file-list"></div>
						<script>
						  $(functio