Flask博客開發——Tinymce編輯器

 以前Flask博客的文本編輯器比較簡陋，這裏爲博客添加個優雅易用的Tinymce文本編輯器。

github見：https://github.com/ikheu/my_flasky

1 項目中添加Tinymce

下載好Tinymce包以及語言包，並添加到項目中。添加到項目的方法，參考了這篇文章：Pyhton日記——給Flask加上優雅的TinyMCE編輯器。tinymce_setup.js是配置文件，設置了文本編輯器的語言、按鈕等。

2 編輯器表單

爲了和其它表單的風格保持一致，這裏仍使用了Flask-wtf表單。配置文件tinymce_setup.js中標識了id爲content的標籤做爲Tinymce編輯器顯示，這裏爲editor字段添加了相應的指示。測試發現，表單的editor顯示爲Tinymce後，使用驗證函數沒法對輸入進行判斷，這裏將輸入的判斷放入視圖函數中。

class EditorForm(FlaskForm):
    title = StringField('標題', validators=[DataRequired(),  Length(1, 64)])
    editor = TextAreaField('正文', id = 'content')
    submit = SubmitField('發表')

3 視圖函數

使用request.method判斷請求爲POST後，判斷輸入是否爲空，若無輸入則給予flask消息提醒。若已登陸的用戶具備寫博客的權限，則輸入的內容做爲Post的body_html屬性建立新的博客。Tinymce將輸入的文本內容轉爲html代碼，所以這裏使用body_html，而不使用body。

@main.route('/editor', methods=['GET', 'POST'])
@login_required
def editor():
    ''' 編輯器界面 '''
    form = EditorForm()
    if request.method == 'POST':
        if not form.editor.data:
            flash('Write something.')
            return render_template('editor.html', form=form)
        if current_user.can(Permission.WRITE_ARTICLES):
            print(request.form)
            post = Post(title=request.form['title'],
                        body_html=request.form['editor'],
                        author=current_user._get_current_object())
            db.session.add(post)
            db.session.commit()
            return redirect(url_for('.post', id=post.id))
    return render_template('editor.html', form = form)

4 編輯器頁面

在editor.html中加入tinymce.min.js、tinymce_setup.js這兩個文件。使用wtf.quick_form渲染編輯器表單。

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}Editor{% endblock %}
{% block head %}
{{ super() }}
    <script src="{{ url_for('static', filename='tinymce/js/tinymce/tinymce.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/tinymce_setup.js') }}"></script>
{% endblock %}

{% block page_content %}
{{ wtf.quick_form(form) }}
{% endblock %}

 

編輯器界面顯示以下：

5 代碼高亮

 在編輯界面上，代碼是能夠高亮的：

 

提交後，因爲沒有關聯到任何渲染樣式，代碼天然沒法高亮：

爲了保證提交先後的顯示是同樣的，仍想使用與tinyMCE編輯窗口中的樣式來渲染提交後的頁面。查了tinyMCE官網發現，須要手動配置js和css文件。下載渲染程序並添加到文章頁的html文件中：

{% block head %}
    {{ super() }}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='prism.css') }}">
    <script src="{{ url_for('static', filename='js/prism.js') }}"></script>
{% endblock %}

刷新文章頁，顯示以下：

大功告成。