?之前Flask博客的文本編輯器比較簡陋，這里為博客添加個優(yōu)雅易用的Tinymce文本編輯器。

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

1 項目中添加Tinymce

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

2 編輯器表單

為了和其它表單的風(fēng)格保持一致，這里仍使用了Flask-wtf表單。配置文件tinymce_setup.js中標(biāo)識了id為content的標(biāo)簽作為Tinymce編輯器顯示，這里為editor字段添加了相應(yīng)的指示。測試發(fā)現(xiàn)，表單的editor顯示為Tinymce后，使用驗證函數(shù)無法對輸入進(jìn)行判斷，這里將輸入的判斷放入視圖函數(shù)中。

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

3 視圖函數(shù)

使用request.method判斷請求為POST后，判斷輸入是否為空，若無輸入則給予flask消息提醒。若已登錄的用戶具有寫博客的權(quán)限，則輸入的內(nèi)容作為Post的body_html屬性創(chuàng)建新的博客。Tinymce將輸入的文本內(nèi)容轉(zhuǎn)為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 代碼高亮

?在編輯界面上，代碼是可以高亮的：

?

提交后，由于沒有關(guān)聯(lián)到任何渲染樣式，代碼自然無法高亮：

為了保證提交前后的顯示是一樣的，仍想使用與tinyMCE編輯窗口中的樣式來渲染提交后的頁面。查了tinyMCE官網(wǎng)發(fā)現(xiàn)，需要手動配置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 %}

刷新文章頁，顯示如下：

大功告成。

?

轉(zhuǎn)載于:https://www.cnblogs.com/ik-heu/p/8846556.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的Flask博客开发——Tinymce编辑器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。