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;'> <button id='confirmButton'>发布文章</button></div><!-- 文章的主体内容 textarea --><div id="article-content"><textarea name="content" id="content" style="display:none;"> </textarea></div></form>
在该页面中添加JS代码：
<script type="text/javascript">var testEditor;$(function () {testEditor = editormd("article-content", {width: "90%",height: 640,syncScrolling: "single",path: "{{ url_for('static',filename='editormd/lib/') }}",imageUpload:true,//是否开启图片上传功能imageFormats:["jpg","jpeg","gif","png","bmp","webp"],//允许上传的图片格式imageUploadURL:"/upload",//图片上传调用的后端功能});});</script>
这样我们就完成了一个简单的editormd编辑器了
现在需要在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') + exprint(filename)file.save(f'static//upload//%s' % filename)res = {'success' : 1,'message' : '上传成功','url' : url_for('image', name = filename)}return jsonify(res)@app.route('/image/<name>')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: "图片地址" //上传成功时才返回}
通过post方式提交后，flask后端获取到MD文档内容后，保存到数据库中，这里在后端文件夹static\md下生成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文件页面展示
首先我们需要引用editormd编辑器相关JS和CSS
<!-- editormd JS相关文件 --><script src="{{ url_for('static', filename='js/jquery.min.js')}}"></script><script src="{{ url_for('static',filename='editormd/lib/marked.min.js') }}"></script><script src="{{ url_for('static',filename='editormd/lib/prettify.min.js') }}"></script><script src="{{ url_for('static',filename='editormd/lib/raphael.min.js') }}"></script><script src="{{ url_for('static',filename='editormd/lib/underscore.min.js') }}"></script><script src="{{ url_for('static',filename='editormd/lib/sequence-diagram.min.js') }}"></script><script src="{{ url_for('static',filename='editormd/lib/flowchart.min.js') }}"></script><script src="{{ url_for('static',filename='editormd/lib/jquery.flowchart.min.js') }}"></script><script src="{{ url_for('static',filename='editormd/editormd.min.js') }}"></script><!-- editormd CSS文件 --><link id="theme-style" rel="stylesheet" href="{{url_for('static', filename='css/prettify.css')}}"><link rel="stylesheet" href="{{ url_for('static',filename='editormd/css/editormd.css') }}"/>
在页面中添加如下DIV
<div id="text_editormd"><textarea style="display:none;" placeholder="markdown语言">{{ content }}</textarea></div>
在页面中添加JS代码
<script type="text/javascript">var textEditor;$(function(){textEditor = editormd.markdownToHTML("text_editormd",{width:"100%",height:700,path: "{{ url_for('static',filename='editormd/lib/') }}",preview: true,watch:true,editor:false,});});</script>
最终显示页面如下：
