flask 添加markdown支持
flask blog 演示项目
Documentation = https://flask.palletsprojects.com/tutorial/
源码 https://github.com/pallets/flask/tree/main/examples/tutorial
利用 editor.md 开源库
https://github.com/pandao/editor.md
下载
重命名为 editormd
放在 static 目录下
D:\workspace\Python\blog\flaskr\templates\base.html
<!doctype html>
<title>{% block title %}{% endblock %} - wmx web</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='editormd/css/editormd.css') }}"/>
<link rel="stylesheet" href="{{ url_for('static',filename='editormd/css/editormd.preview.css') }}"/>
<nav>
<ul>
<li><a href="{{ url_for('index') }}">Home</a></h1>
{% if g.user %}
<li><span>{{ g.user['username'] }}</span>
<li><a href="{{ url_for('auth.logout') }}">Log Out</a>
{% else %}
<li><a href="{{ url_for('auth.register') }}">Register</a>
<li><a href="{{ url_for('auth.login') }}">Log In</a>
{% endif %}
</ul>
</nav>
<section class="content">
<header>
{% block header %}{% endblock %}
</header>
{% for message in get_flashed_messages() %}
<div class="flash">{{ message }}</div>
{% endfor %}
{% block content %}{% endblock %}
</section>
D:\workspace\Python\blog\flaskr\templates\blog\index.html
{% extends 'base.html' %}
{% block header %}
<h2>{% block title %}blogs{% endblock %}</h2>
{% if g.user %}
<a class="action" href="{{ url_for('blog.create') }}">New</a>
{% endif %}
{% endblock %}
{% block content %}
{% for post in posts %}
<article class="post">
<header>
<div>
<h1>{{ post['title'] }}</h1>
<div class="about">by {{ post['username'] }} on {{ post['created'].strftime('%Y-%m-%d') }}</div>
</div>
{% if g.user['id'] == post['author_id'] %}
<a class="action" href="{{ url_for('blog.update', id=post['id']) }}">Edit</a>
{% endif %}
</header>
<button onclick="showBody('{{ loop.index }}')">显示内容</button>
<div id="{{ loop.index }}" style="height:0px;">
<textarea class="body" style="display:none;" >
{{ post.body }}
</textarea>
</div>
</article>
{% if not loop.last %}
<hr>
{% endif %}
<!---------------------------------------------- scripts ---------------------------------------------->
<script src="{{ url_for('static',filename='editormd/examples/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.js') }}"></script>
<script type="text/javascript">
$(function () {
var objId = "{{ loop.index }}";
testEditormdView = editormd.markdownToHTML(objId, {
htmlDecode: "style,script,iframe", // you can filter tags decode
emoji: true,
taskList: true,
tex: true, // 默认不解析
flowChart: true, // 默认不解析
sequenceDiagram: true, // 默认不解析
});
});
</script>
{% endfor %}
<script>
function showBody(index) {
var body = document.getElementById(index);
if (body.style.height === '0px') {
body.style.height = 'auto';
} else {
body.style.height = '0px';
}
}
</script>
{% endblock %}
D:\workspace\Python\blog\flaskr\templates\blog\create.html
{% extends 'base.html' %}
{% block header %}
<h2>{% block title %}New Post{% endblock %}</h2>
{% endblock %}
{% block content %}
<form method="post">
<label for="title">Title</label>
<input name="title" id="title" value="{{ request.form['title'] }}" required>
<label for="body">Body</label>
<div id="create-editormd">
<textarea name="body" id="body">{{ request.form['body'] }}</textarea>
</div>
<input type="submit" value="Save">
</form>
<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">
var testEditor;
$(function () {
testEditor = editormd("create-editormd", {
width: "90%",
height: 640,
syncScrolling: "single",
path: "{{ url_for('static',filename='editormd/lib/') }}",
// 上传图片
imageUpload : true,
imageFormats : [ "jpg", "jpeg", "gif", "png", "bmp", "webp" ],
});
});
</script>
{% endblock %}
D:\workspace\Python\blog\flaskr\templates\blog\update.html
{% extends 'base.html' %}
{% block header %}
<h2>{% block title %}Edit "{{ post['title'] }}"{% endblock %}</h2>
{% endblock %}
{% block content %}
<form method="post">
<label for="title">Title</label>
<input name="title" id="title" value="{{ request.form['title'] or post['title'] }}" required>
<label for="body">Body</label>
<div id="update-editormd">
<textarea name="body" id="body">{{ request.form['body'] or post['body'] }}</textarea>
</div>
<input type="submit" value="Save">
</form>
<hr>
<form action="{{ url_for('blog.delete', id=post['id']) }}" method="post">
<input class="danger" type="submit" value="Delete" onclick="return confirm('Are you sure?');">
</form>
<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">
var testEditor;
$(function () {
testEditor = editormd("update-editormd", {
width: "90%",
height: 640,
syncScrolling: "single",
path: "{{ url_for('static',filename='editormd/lib/') }}",
// 上传图片
imageUpload : true,
imageFormats : [ "jpg", "jpeg", "gif", "png", "bmp", "webp" ],
});
});
</script>
{% endblock %}
