Pyhton日记——给Flask加上优雅的TinyMCE编辑器

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()

整体项目结构大致如下

项目结构

效果图

提交前

提交后