{{form.title(class='form-control',placeholder="请输入文章标题")}}
保存草稿
{{form.submit(class='btn btn-outline-secondary',style="z-index: 0;")}}
{{form.body(style='display:none;',class='form-control')}}
{{form.summary(class='form-control',placeholder="好的摘要是成功的开端")}}
{% endblock %}
{% block scripts %}
{{super()}}
{% endblock %}
这里是基于
Flask的适配，如果你想自己引用Editor.md，或者在其他平台上引用，都是可以实现的。网络上有很多教程，但是大部分教程只告诉你怎么做，自己即使搭建出来，仍然很迷茫。其实，有一个简单的学习方法：在editor.md文件夹下有一个example文件夹，找到full.html，这是最齐全的案例，仿照其中的代码，把head和script标签的内容引入页面就好了。
有需要了解的小伙伴，可以留言，单独出一期详解！！
引入Editor.md需要注意的地方有以下几点：
-
css文件引入 -
js文件引入，包括jQuery和editormd.js以及下面的script标签 -
在
script标签的path变量的值需要对应修改 -
在
#test-editormd标签中，放置原生的<textarea>标签
下面继续改造
我们写文章的目的，最终还是为了在页面上展示，常规情况下，我们有三种实现的途径选择。
第一种：直接从后端返回markdown，然后在前端解析markdown，然后展示对应的html。
第二种：直接从后端返回解析后的HTML，这样就不用在前端解析了。
第三种：在数据库开辟HTML列，在编辑的时候，直接保存对应的html，避免每次都需要重复解析。
我选择的是第三种方案，这么做的原因是，我们在编辑文档的时候，前端实际上一直都在解析对应的html，所以，顺便上传html到服务器非常简单。
首先，我在上面的代码里，设置了saveHTMLToTextarea: true，这个设置的意思是，在我们编辑markdown的时候，保存markdown对应的html代码。
设置这个开关的效果就是，在编辑页面会生成一个保存html的标签，如下图：
这个标签是隐藏的，在表单提交的时候，我们可以直接从request中得到html代码。
修改/add视图，编辑内容如下：
@bp.route('/add', methods=['GET', 'POST'])
@login_required
def add(): # 增
form = PostForm()
if form.validate_on_submit():
post = Post(author=current_user)
post.title = form.title.data.strip()
post.body = form.body.data
markdown对应的html
post.body_html = request.form['test-editormd-html-code']
post.summary = form.summary.data.strip()
if not post.summary: # 使用bs4抽取摘要
bs = BeautifulSoup(post.body_html, 'html.parser')
post.summary = bs.get_text()[:225]
db.session.add(post)
db.session.commit()
post = Post.query.filter_by(author=current_user, title=post.title).order_by(
Post.created.desc()).first()
return redirect(url_for('blog.detail', id=post.id))
return render_template('blog/edit.html', form=form)
改动的地方有两个，一个是post.body_html对象的获取，另一个是summary的生成。
这里我用了bs4，从html代码中抽出前225个字符，直接抽markdown会有一些标记。
然后，保存草稿功能就先留着，不写，后面再补，现在最要紧的就是文章的展示。
文章展示这里，如果展开讲，会很繁琐，我这里就只讲方法，如果无法复现，可以全盘按我的思路走，复制代码就可以实现。
方法也很简单，在editor.md的examples文件夹下，有一个html-preview-markdown-to-html.html文件，直接照抄它的内容，就行。
具体来说就是：
-
复制对应的
css链接，指向自己的 -
复制对应的
js指向自己的 -
按照自己使用的模板，比如这里是
jinja，设计自己的页面布局就可以了！
好了，下面就是我的实现内容，首先在templates/blog文件夹下创建detail.html文件，编辑内容如下。
{% extends 'base.html' %}
{%block head%}
{{super()}}
.editormd-html-preview { /* width: 90%; */ margin: 0 auto; }{%endblock%}
{% block body_content %}
{{post.title}}
{% endblock %}
{% block scripts%}
{{super()}}
{% endblock %}
这样前端代码就结束了，后面就是对应的/detail视图，也非常简单，返回指定id的Post对象即可。
代码如下
@bp.route('/detail/int:id')
最后
🍅 硬核资料：关注即可领取PPT模板、简历模板、行业经典书籍PDF。
🍅 技术互助：技术群大佬指点迷津，你的问题可能不是问题，求资源在群里喊一声。
🍅 面试题库：由技术群里的小伙伴们共同投稿，热乎的大厂面试真题，持续更新中。
🍅 知识体系：含编程语言、算法、大数据生态圈组件（Mysql、Hive、Spark、Flink）、数据仓库、Python、前端等等。
