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

資訊專欄INFORMATION COLUMN

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

xialong / 961人閱讀

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

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

首先在config.py中添加

MAX_CONTENT_LENGTH = 1 * 1024 * 1024

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

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

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

@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")

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

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

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

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中的選擇器，會把對應的html元素替換成TinyMCE富文本編輯器，plugins和toolbar是設定編輯器帶有哪些功能和按鈕。此時可以在question.html中引入TinyMCE的js和配置文件的js，如下：

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

替換為

此時再點擊發布問答進入頁面，已經可以使用TinyMCE了，如下：

隨便插入張圖片，點擊提交試試，發現后端獲取到的數據是帶html標記的文本，數據庫數據如下：

而detail.html中的內容也是這樣的字符串：

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

{{ question.content | safe }}

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/41312.html

相關文章

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

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

    HackerShell 評論0 收藏0

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

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

    Honwhy 評論0 收藏0

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

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

    k00baa 評論0 收藏0

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

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

    Channe 評論0 收藏0

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

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

    zgbgx 評論0 收藏0

發表評論

0條評論

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