成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

xialong / 966人閱讀

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

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

首先在config.py中添加

MAX_CONTENT_LENGTH = 1 * 1024 * 1024

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

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

我們用這個來確保用戶上傳的文件是指定的4種擴展名的格式。再從werkzeug庫中導(dǎo)出
secure_filename來檢驗文件名的安全性，這一步也是十分必要的，具體原因可參考Flask文檔。此時視圖函數(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這個文件，就像是用Bootstrap一樣，我們可以直接在線引用，但會有個討厭的提示，如下圖：

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

然后在static/javascript文件夾中新建一個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其實就是css中的選擇器，會把對應(yīng)的html元素替換成TinyMCE富文本編輯器，plugins和toolbar是設(shè)定編輯器帶有哪些功能和按鈕。此時可以在question.html中引入TinyMCE的js和配置文件的js，如下：

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

替換為

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

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

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

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

{{ question.content | safe }}

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/41312.html

相關(guān)文章

  • django項目admin后臺整合tinymce富文本編輯并自定義添加圖片本地上傳和富文本中的回顯

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

    HackerShell 評論0 收藏0

  • django項目admin后臺整合tinymce富文本編輯并自定義添加圖片本地上傳和富文本中的回顯

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

    Honwhy 評論0 收藏0

  • django項目admin后臺整合tinymce富文本編輯并自定義添加圖片本地上傳和富文本中的回顯

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

    k00baa 評論0 收藏0

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

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

    Channe 評論0 收藏0

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

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

    zgbgx 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<