Editor markdown在flask上使用
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获取图片代码段
-
# 获取图片地址
-
-
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
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13