Editor markdown在flask上使用

武飞扬头像

lengyer

2024-04-16 帮助1人

html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/editor/css/editormd.css">
</head>
<body>
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
<script src="/editor/editormd.js"></script>
<script src="/editor/editormd.min.js"></script>
<div class="container" style="margin-top: 20px;">
<div class="row">
<div class="col-12" style="padding: 1px 0px">文章标题
<input type="text" class="form-control" id="headline">
</div>
<div class="col-12" id="test-editor">
<textarea style="display:none;" id="content"></textarea>
</div>
<button onclick="doPost()">发布文章</button>
</div>
</div>
</body>
</html>

学新通

JS代码段

<script type="text/javascript">
$(function () {
var editor = editormd("test-editor", {
width: "100%",
height: "500px",
path: "/editor/lib/", //依赖lib文件夹路径
saveHTMLToTextarea: true, // 获取用户编辑的内容放到textarea中
emoji: true, //emoji 表情，默认关闭
// htmlDecode: "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
syncScrolling: "single",
breaks: true, //允许换行
/*上传图片文件*/
imageUpload: true, // 开启上传文件功能
imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], // 上传图片的格式
imageUploadURL: "/image/upload" //后端上传图片的地址
});
});
function doPost() {
var headline = $("#headline").val();
var content = $("#content").val();
console.log(headline);
$.post('/editor/post', {
'headline': headline,
'content': content
},function (data) {
if (data.success)
window.alert('发布成功');
else {
window.alert('发布失败');
}
},'json')
}
</script>

学新通

后端保存image图片

@app.route('/image/upload', methods=['POST'])
def imageUpload():
# 获取文件
file = request.files.get('editormd-image-file')
# 如果没有文件返回上传失败
if not file:
res = {
'success': 0,
'message': '上传失败'
}
else:
# 分割文件获取后缀
ex = os.path.splitext(file.filename)[1]
# 分割文件获取文件名
fname = os.path.splitext(file.filename)[0]
# 重命名文件时间后缀名
filename = datetime.now().strftime('%Y%m%d%H%M%S') ex
# 保存文件
file.save(fr'static/upload/{filename}')
# 返回上传成功
res = {
'success': 1,
'message': '上传成功',
'url': url_for('image', name=filename)
}
return jsonify(res)

学新通

后端保存文章代码段

# 保存文章
@app.route('/editor/post', methods=['POST'])
def editorPost():
headline = request.form['headline']
credate = datetime.now().strftime('%Y-%m-%d')
content = request.form['content']
filename = time.strftime('%Y%m%d%H%M%S', time.localtime(time.time()))
file_path = f'static//md//{headline}-{filename}.md'
with open(file_path, 'w', encoding='utf-8') as f:
f.write(content)
return 'Success'

url获取图片代码段

# 获取图片地址
@app.route('/image/<name>', methods=['GET', 'POST'])
def image(name):
with open(os.path.join('static//upload', name), 'rb') as f:
resp = Response(f.read(), mimetype="image/jpeg")
return resp

这篇好文章是转载于：学新通技术网

版权申明：本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
本站站名：学新通技术网
本文地址： /boutique/detail/tanhgbgkhf

系列文章

同类精品

继续加载