在flask實現CKEditor和在網頁上顯示圖片

        在自己製作的網頁上想實現富文本功能，於是上網搜了一下看到了CKEditor，實現比較簡單，可以參照CKEditor ，具體實現的話可以參考David-Guo。

        實現完後，進行上傳圖片，然後post，可是在頁面中沒有顯示圖片。這可就納悶了。接着我查看了一下數據庫發現在body_html這一欄只有<p></p>，爲了保護網站，在models處設置了檢測用戶輸入，如果有html標籤者只保留我設置好的標籤，所以輸入body後經過轉換就成了<p></p>，因此顯示不了圖片。好了知道原因之後就開始找答案。在bleach.clean文檔中提示可以設置一個attrs，如果要加上css的話，可以設置多一個styles。設置好後，重新上傳圖片就可以顯示了。具體實現代碼如下。

    @staticmethod
    def on_changed_body(target, value, oldvalue, initiator):
        allowed_tags = ['a', 'abbr', 'acronym', 'b', 'blockquote', 'code',
                        'em', 'i', 'li', 'ol', 'pre', 'strong', 'ul',
                        'h1', 'h2', 'h3', 'p', 'img']
        attrs = {
            '*': ['class', 'style'],
            'a': ['href', 'rel'],
            'img': ['alt', 'src'],
        }
        styles = ['height', 'width']
        target.body_html = bleach.linkify(bleach.clean(
            markdown(value, output_format='html'),
            tags=allowed_tags, attributes=attrs, styles=styles, strip=True))


db.event.listen(Post.body, 'set', Post.on_changed_body)

實現效果：