Flask的简洁轻巧吸引了很多开发者使用
如果我们想用它来做一个博客系统的话，当然少不了一个优雅的富文本编辑器
在这我强烈推荐大家使用TinyMCE
它可以将文本内容转为html代码
大概长这样，工具栏可以自定义
TinyMCE
首先到官网下载
https://www.tinymce.com/download/
下载完将解压
将tinymce文件夹复制到Flask项目的static文件夹下
这里写图片描述
到以下网址下载语言包
选择Chinese(China)
https://www.tinymce.com/download/language-packages/
把语言包复制到tinymce/js/tinymce/langs下
新建一个js来初始化这个编辑器
编辑器的补丁本身已自带一部分
这个js起名为tinymce_setup.js,放在static文件夹下的js文件夹
tinymce.init({
//选择class为content的标签作为编辑器
selector: '#content',
//方向从左到右
directionality:'ltr',
//语言选择中文
language:'zh_CN',
//高度为400
height:400,
//工具栏上面的补丁按钮
plugins: [
'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
'save table contextmenu directionality emoticons template paste textcolor',
'codesample',
],
//工具栏的补丁按钮
toolbar: 'insertfile undo redo | \
styleselect | \
bold italic | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | \
link image | \
print preview media fullpage | \
forecolor backcolor emoticons |\
codesample fontsizeselect fullscreen',
//字体大小
fontsize_formats: '10pt 12pt 14pt 18pt 24pt 36pt',
//按tab不换行
nonbreaking_force_tab: true,
});
然后在timplates文件夹新建一个html页面
放我们tinymce编辑器
我们取名为editor.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
{# 使用jinjia导入两个js#}
<script src="{{ url_for('static', filename='tinymce/js/tinymce/tinymce.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/tinymce_setup.js') }}"></script>
</head>
<body>
<form method="post" action="">
<input class="editor" name="content" id="content">
<button type="submit">提交</button>
</form>
</body>
</html>
接下来就是逻辑的编写
#coidng:utf-8
from flask import Flask
from flask import render_template
from flask import request
app = Flask(__name__)
@app.route('/', methods=['GET', 'POST'])
def editor():
#如果是post方法就返回tinymce生成html代码，否则渲染editor.html
if request.method=='POST':
return request.form['content']
return render_template('editor.html')
if __name__ == '__main__':
app.run()
整体项目结构大致如下
项目结构
效果图
提交前
提交后
