国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

18.上傳文件限制和使用富文本編輯器【完結(jié)篇】

xialong / 951人閱讀

摘要：本文首先完善一下前文上傳頭像的部分，增加上傳文件的大小和格式限制，其次把發(fā)布問答部分中，問題的詳細(xì)描述部分從普通的修改為富文本編輯器，這樣可以在問題描述中添加各種格式的信息，如代碼表格列表圖片等。

本文是后端開發(fā)——Flask初體驗(yàn)專欄的最后一篇文章，整個(gè)Q&A demo的簡(jiǎn)單框架其實(shí)已經(jīng)建立起來了，現(xiàn)在就是再優(yōu)化、完善一些細(xì)節(jié)。
本文首先完善一下前文上傳頭像的部分，增加上傳文件的大小和格式限制，其次把發(fā)布問答部分中，問題的詳細(xì)描述部分從普通的textarea修改為富文本編輯器TinyMCE，這樣可以在問題描述中添加各種格式的信息，如代碼、表格、列表、圖片等。
最后，整個(gè)demo已經(jīng)上傳到GitHub:QADemoByFlask，歡迎大家訪問、關(guān)注和交流。

首先在config.py中添加

MAX_CONTENT_LENGTH = 1 * 1024 * 1024

表示最大上傳文件的限制是1MB，添加完成即可，F(xiàn)lask會(huì)自動(dòng)處理，如果上傳的文件超出，會(huì)拋出異常，顯示無法連接，但程序不會(huì)中斷；其次在exts.py中添加函數(shù)：

def allowed_file(filename):
    return "." in filename and 
           filename.rsplit(".", 1)[1] in ["jpg", "jpeg", "png", "gif"]

我們用這個(gè)來確保用戶上傳的文件是指定的4種擴(kuò)展名的格式。再從werkzeug庫中導(dǎo)出
secure_filename來檢驗(yàn)文件名的安全性，這一步也是十分必要的，具體原因可參考Flask文檔。此時(shí)視圖函數(shù)修改如下：

@app.route("/user/avatar/", methods=["GET", "POST"])
def avatar():
    if request.method == "POST":
        file = request.files["avatar_upload"]
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            base_path = path.abspath(path.dirname(__file__))
            filename = str(g.user.id) + "." + filename.rsplit(".", 1)[1]
            file_path = path.join(base_path, "static", "images", "uploads", filename)
            file.save(file_path)
            g.user.avatar_path = "images/uploads/" + filename
            db.session.commit()
    return render_template("avatar.html")

現(xiàn)在網(wǎng)上有許多富文本編輯器可供我們使用，這里選擇TinyMCE，詳情和文檔可以瀏覽其官網(wǎng)。首先需要引用tinymce.min.js這個(gè)文件，就像是用Bootstrap一樣，我們可以直接在線引用，但會(huì)有個(gè)討厭的提示，如下圖：

因此我直接將其下載（開發(fā)版下載）到本地，解壓至項(xiàng)目的static文件夾，同時(shí)下載漢化文件zh_CN.js，放入langs文件夾，文件夾結(jié)構(gòu)如下：

然后在static/javascript文件夾中新建一個(gè)tinymce_setup.js文件，用于配置TinyMCE，其內(nèi)容如下：

tinymce.init({
    selector: "#tinymce-content",
    language:"zh_CN",
    height:200,
    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",
     nonbreaking_force_tab: true,
});

代碼中selector其實(shí)就是css中的選擇器，會(huì)把對(duì)應(yīng)的html元素替換成TinyMCE富文本編輯器，plugins和toolbar是設(shè)定編輯器帶有哪些功能和按鈕。此時(shí)可以在question.html中引入TinyMCE的js和配置文件的js，如下：

其實(shí)還需要引入jQuery，但我們之前在引入Bootstrap的時(shí)候，在base.html中已經(jīng)引入了，而question.html又繼承自base.html。將question.html中的

替換為

此時(shí)再點(diǎn)擊發(fā)布問答進(jìn)入頁面，已經(jīng)可以使用TinyMCE了，如下：

隨便插入張圖片，點(diǎn)擊提交試試，發(fā)現(xiàn)后端獲取到的數(shù)據(jù)是帶html標(biāo)記的文本，數(shù)據(jù)庫數(shù)據(jù)如下：

而detail.html中的內(nèi)容也是這樣的字符串：

如何把這樣的內(nèi)容渲染成html呢？其實(shí)很簡(jiǎn)單，給html中的參數(shù)加個(gè)safe過濾器就可以了：

{{ question.content | safe }}

此時(shí)detail.html中的圖片就正常顯示了：

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/41312.html

相關(guān)文章

  • django項(xiàng)目admin后臺(tái)整合tinymce富文本編輯并自定義添加圖片本地上傳和富文本中的回顯

    摘要：選擇該頁面綁定的標(biāo)簽指定圖片上傳處理目錄注其中為了顯示為中文，標(biāo)明了中文，同時(shí)需要下載語言包放到對(duì)應(yīng)的文件夾下。 前言 我們常因?yàn)閐jango的自帶admin后臺(tái)功能而選擇該框架，但也因?yàn)槠渥詣?dòng)生成的特殊性而在做出特別的更改的時(shí)候束手束腳，鑒于項(xiàng)目已經(jīng)采用了django，而后臺(tái)要求能夠直接上傳富文本內(nèi)容直接用于網(wǎng)頁顯示，定制性高，后來翻了目前較為知名的幾款富文本編輯框，覺得還是tiny...

    HackerShell 評(píng)論0 收藏0

  • django項(xiàng)目admin后臺(tái)整合tinymce富文本編輯并自定義添加圖片本地上傳和富文本中的回顯

    摘要：選擇該頁面綁定的標(biāo)簽指定圖片上傳處理目錄注其中為了顯示為中文，標(biāo)明了中文，同時(shí)需要下載語言包放到對(duì)應(yīng)的文件夾下。 前言 我們常因?yàn)閐jango的自帶admin后臺(tái)功能而選擇該框架，但也因?yàn)槠渥詣?dòng)生成的特殊性而在做出特別的更改的時(shí)候束手束腳，鑒于項(xiàng)目已經(jīng)采用了django，而后臺(tái)要求能夠直接上傳富文本內(nèi)容直接用于網(wǎng)頁顯示，定制性高，后來翻了目前較為知名的幾款富文本編輯框，覺得還是tiny...

    Honwhy 評(píng)論0 收藏0

  • django項(xiàng)目admin后臺(tái)整合tinymce富文本編輯并自定義添加圖片本地上傳和富文本中的回顯

    摘要：選擇該頁面綁定的標(biāo)簽指定圖片上傳處理目錄注其中為了顯示為中文，標(biāo)明了中文，同時(shí)需要下載語言包放到對(duì)應(yīng)的文件夾下。 前言 我們常因?yàn)閐jango的自帶admin后臺(tái)功能而選擇該框架，但也因?yàn)槠渥詣?dòng)生成的特殊性而在做出特別的更改的時(shí)候束手束腳，鑒于項(xiàng)目已經(jīng)采用了django，而后臺(tái)要求能夠直接上傳富文本內(nèi)容直接用于網(wǎng)頁顯示，定制性高，后來翻了目前較為知名的幾款富文本編輯框，覺得還是tiny...

    k00baa 評(píng)論0 收藏0

  • 手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇)

    摘要：社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開源項(xiàng)目了，體現(xiàn)出了社區(qū)對(duì)其的認(rèn)可。監(jiān)聽事件手動(dòng)維護(hù)列表這樣我們就簡(jiǎn)單的完成了拖拽排序。 完整項(xiàng)目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺(tái) 系列...

    Channe 評(píng)論0 收藏0

  • 手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇)

    摘要：社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開源項(xiàng)目了，體現(xiàn)出了社區(qū)對(duì)其的認(rèn)可。監(jiān)聽事件手動(dòng)維護(hù)列表這樣我們就簡(jiǎn)單的完成了拖拽排序。 完整項(xiàng)目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺(tái) 系列...

    zgbgx 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<