editormd编辑器在flask中的使用

1. 说明

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

2. 项目地址

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

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

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

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

   
                       
   
                           标题：  
                               发布文章
                       
                       
                       
   
                            
                       
   
   

4. 在该页面中添加JS代码：

   这样我们就完成了一个简单的editormd编辑器了

6. 现在需要在flask后端编写图片上传功能：

   @app.route('/upload', methods =['POST'])
   def upload():
       file =  request.files.get('editormd-image-file')
       if not file:
           res = {
               'success' : 0,
               'message' : '上传失败'
           }
       else:
           ex = os.path.splitext(file.filename)[1]
           print(ex)
           filename = datetime.now().strftime('%Y%m%d%H%M%S') + ex
           print(filename)
           file.save(f'static//upload//%s' % filename)
           res = {
               'success' : 1,
               'message' : '上传成功',
               'url' : url_for('image', name = filename)
           }
       return jsonify(res)
   
   @app.route('/image/')
   def image(name):
       with open(os.path.join('static//upload', name), 'rb') as f:
           resp = Response(f.read(), mimetype="image/jpeg")
       return resp
   

   在此需要注意的是：editormd期望你后端返回json格式内容：

   {
       success : 0 | 1, //0表示上传失败;1表示上传成功
       message : "提示的信息",
       url     : "图片地址" //上传成功时才返回
   }
   

7. 通过post方式提交后，flask后端获取到MD文档内容后，保存到数据库中，这里在后端文件夹staticmd下生成MD文件，数据库中只记录了文件名，需要显示时再调用获取。

   def forStr(str):
       return "'%s'" % str
   
   @app.route('/save', methods=['POST'])
   def save():
       title = request.form['title']
       credate = datetime.now().strftime('%Y-%m-%d')
       content = request.form['content'].replace('n','')
       print(content)
       filename = time.strftime('%Y-%m-%d-%H-%M-%S', time.localtime(time.time()))
       file_path = f'static//md//{title}{filename}.md'
       with open(file_path, 'w', encoding='utf-8') as f:
           f.write(content)
       DBConn.insert_db(forStr(title),forStr(credate), forStr(f'{title}{filename}.md'))
       return 'Success'
   

   Markdown文件页面展示

8. 首先我们需要引用editormd编辑器相关JS和CSS

9. 在页面中添加如下DIV

    
   
   					{{ content }}
   
   

10. 在页面中添加JS代码

    最终显示页面如下：