flask項目中使用富文本編輯器

flask是一個用python編寫的輕量級web框架,基於Werkzeug WSGI(WSGI: python的服務器網關接口)工具箱和Jinja2模板,由於它使用簡單的核心，用extension增長其餘功能。Flask沒有默認使用的數據庫、窗體驗證工具。然而，Flask保留了擴增的彈性，能夠用Flask-extension加入這些功能：ORM、窗體驗證工具、文件上傳、各類開放式身份驗證技術。

flask安裝:　　　　pip install flask

flask的教程網上有不少,我這裏就不細說了

---

 

TinyMCE是一款易用、且功能強大的所見即所得的富文本編輯器。同類程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor等等。

TinyMCE的優點：

• 開源可商用，基於LGPL2.1
• 插件豐富，自帶插件基本涵蓋平常所需功能
• 接口豐富，可擴展性強，有能力能夠無限拓展功能
• 界面好看，符合現代審美
• 提供經典、內聯、沉浸無干擾三種模式
• 對標準支持優秀
• 多語言支持，官網可下載幾十種語言。

 

官網及文檔：www.tiny.cloud（右鍵）

官網下載：www.tiny.cloud/get-tiny/self-hosted/（右鍵）

Github：github.com/tinymce（右鍵）

注：此中文文檔自TinyMCE v5開始編寫，對v4不作介紹。本站所用版本爲v5

以上轉自tinymce中文文檔

---

要如何在flask中插入tinymce呢,首先在官網下載好tinymce插件

將tinymce_setup.js放在static下的js文件裏面,將解壓出來的tinymce文件夾放在js文件夾的同級目錄下

在jinja2模板裏面首先引入

<script type="text/javascript" src="../../static/admin/js/jquery-1.12.4.min.js"></script>
<script src="../../static/admin/tinymce/js/tinymce/tinymce.min.js"></script>
<script src="../../static/admin/js/tinymce_setup.js"></script>

 這三個js文件,再將下面的div放在body裏面

<div class="rich_wrap fl">
    <input class="input_area" id="rich_content" name="content" value="{{ news.content }}"></input>
</div>

這個js是定義富文本編輯器的寬高語言等

<script>
    $(function() {
        tinymce.init({
            //選擇class爲content的標籤做爲編輯器
            selector: '#rich_content',
            //方向從左到右
            directionality: 'ltr',
            //語言選擇中文
            language: 'zh_CN',
            //高度爲400
            height: 400,
            width: '100%',
            //按tab不換行
            nonbreaking_force_tab: true,
            readonly: 1
        });
    })
</script>

修改tinymce_setup.js

imageupload_url: "/upload/"

這個是在文本編輯是插入圖片的接口,同理,也就是說你須要一個接口來保存插入的圖片

@app.route('/upload/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        img = request.files.get('file')
        res = requests.post(url='http://xx.xx.xx.xx/v1/qiniu/upload', files={'file': img})   # 將插入的圖片上傳到七牛雲上
        result = json.loads(res.text)
        imgsrc = result['data']['url']
        print(imgsrc)
        mes = {}
        mes['path'] = imgsrc       # 將圖片的地址封裝在字典裏,鍵爲path,這樣圖片就能在富文本中顯示了
        mes['error'] = False
        return jsonify(mes)

也能夠將圖片下載到本地,具體的代碼就不往上寫了,基本就是將圖片接收到,以二進制的方式寫入圖片到本地就OK

至此,就能夠在你的項目中使用富文本編輯器了

 

 

 

---

以上就是本人對flask中使用富文本編輯器的一些理解和使用小結，不對的地方還請指出。

原創文章，轉載請說明出處