基于Flask的Markdown编辑器实践

#Markdown编辑器——Editor.MD于Flask：

能预览的Markdown编辑器中, 读狗书时用的Flask-Pagedown比较不错, 在逛知乎的时候学习greyli大神的flask富文本编辑器实现，实践中遇到 Editor.md很合胃口, 类似简书或者 Remarkable的左右分栏预览方式非常喜欢，见坑就跳吧。

最终效果大概是这样的：

---

Editor.md是个国人维护的开源项目, 四年没更新不过还是很好用的。相关Issues比较多，基本上小问题翻翻即可解决,

首先进入Editor.md官网下载zip，或者点击Github download下载

解压重命名为editormd，并置入static文件夹

#####表单类里使用Flask-WTF设置<textarea>标签存放文章内容, 定义TextAreaField字段, 对Body字段进行修改:

_forms.py:

from wtforms import TextAreaField
#...

class PostForm(FlaskForm):
	#...
	body = TextAreaField('Body', [DataRequired()])
	#...

此时编辑模板的js脚本, 用于拾取id=editormd的 textarea 渲染的

这真的是一个坑大的决定，相关探究并无太多参考，Editor.MD已经荒废四年，相关文档都未必打得开，基本都是Java做后端，Flask上几乎没人用。相关讨论比较杂乱，甚至有的错漏百出。基本只能靠踩坑和阅读源码来运作。目前还在艰苦奋斗阶段，有能力后会编写相关拓展。

为便于支持更多的MarkDown格式甚至emoji代码高亮表格解析等问题。而不是一点点自定义，这次我们利用更强大的Editor.MD编辑自带的Markdown2HTML渲染方式。

new_post.html:

<link rel="stylesheet" href="{
  { url_for('static',filename='editormd/css/editormd.css') }}"/>

这里我将Editor.MD置于static静态文件目录并重命名为editormd，个人根据目录自行更改即可。

---

使用saveHTMLToTextarea : true字段开启自动转换HTML为后台直接提取html文档提供接口。其中js代码处注意宽度设置与Bootstrap4的body相冲突，这里我们注释掉width字段，否则将无法直接提取html。如果是继承模板，引入js较多时，可以在js的顺序上优先保证editor.MD，上下文在最后继承

new_post.html:

<script src="{
  { url_for('static',filename='editormd/examples/js/jquery.min.js') }}"></script>
<script src="{
  { url_for('static',filename='editormd/editormd.min.js') }}"></script>
<script type="text/javascript">
    $(function () {
        editormd("fancy-editormd", {
            // width: "100%", 请不要添加