python web.py中使用百度富文字編輯器 UEditor
原文連結 http://flask123.sinaapp.com/article/47/
UEditor簡介
UEditor是由百度「FEX前端研發團隊」開發的所見即所得富文字web編輯器,具有輕量,可定製,注重使用者體驗等特點,開源基於MIT協議,允許自由使用和修改程式碼。
由於1.4.2版本之後的版本與之前版本存在較大的差異,本文以1.4.3版本為藍本。
在Flask專案中加入UEditor
下載UEditor:
訪問UEditor首頁,下載1.4.3 PHP UTF-8版本的UEditor,並解壓到Flask應用程式的static
目錄。解壓之後的目錄結構是這樣的:
| static/ | | ueditor/ | | |+dialogs/ | | |+lang/ | | |+php/ | | |+themes/ | | |+third-party/ | | |-config.json | | |-index.html | | |-ueditor.all.js | | |-ueditor.all.min.js | | |-ueditor.config.js | | |-ueditor.parse.js | | |-ueditor.parse.min.js
+
表示目錄。
在專案中加入UEditor:
我們在Flask應用程式的templates
目錄新建一個index.html
檔案(可根據實際情況選擇檔名,或者把程式碼加入需要使用UEditor的檔案):
在head標籤加入下面幾行:
<script type="text/javascript" charset="utf-8" src="{{ url_for('static', filename='ueditor/ueditor.config.js') }}"></script> <script type="text/javascript" charset="utf-8" src="{{ url_for('static', filename='ueditor/ueditor.all.min.js') }}"> </script> <!--建議手動加在語言,避免在ie下有時因為載入語言失敗導致編輯器載入失敗--> <!--這裡載入的語言檔案會覆蓋你在配置專案裡新增的語言型別,比如你在配置專案裡配置的是英文,這裡載入的中文,那最後就是中文--> <script type="text/javascript" charset="utf-8" src="{{ url_for('static', filename='ueditor/lang/zh-cn/zh-cn.js') }}"></script>
在body標籤加入:
<script id="editor"type="text/plain"></script> <script type="text/javascript"> //例項化編輯器 //建議使用工廠方法getEditor建立和引用編輯器例項,如果在某個閉包下引用該編輯器,直接呼叫UE.getEditor('editor')就能拿到相關的例項 var ue = UE.getEditor('editor', { serverUrl: "/upload/" }); </script>
請求路徑配置:
UEditor 1.4.2+ 起,推薦使用統一的請求路徑,在部署好前端程式碼後,需要修改 ueditor.config.js
裡的 serverUrl
引數(或者初始化時指定,見上面的程式碼),改成 '/upload/'
。
UEditor初始化時,會向後端請求配置檔案,後端收到請求後返回JSON格式的配置檔案。具體實現參照後面的程式碼。
詳細配置內容參見文件。
建立Flask應用程式(app.py
):
# -*- coding: utf-8 -*- # filename: app.py from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') @app.route('/upload/', methods=['GET', 'POST']) def upload(): pass if __name__ == '__main__': app.run(debug=True)
應用程式執行之後,我們訪問 http://localhost:5000/
就可以看到UEditor編輯器了,上圖:
UEditor後端請求規範說明
與後臺通訊的功能列表:
- 上傳圖片
- 拖放圖片上傳、貼上板圖片上傳
- word文件圖片轉存
- 截圖工具上傳
- 上傳塗鴉
- 上傳視訊
- 上傳附件
- 線上圖片管理
- 貼上轉存遠端圖片
統一請求格式說明:
- 前端請求通過唯一的後臺檔案
/upload/
處理前端的請求 /upload/
通過GET上的action
引數,判斷是什麼型別的請求- 省去不必要的請求,去除塗鴉新增背景的請求,用前端FileReader讀取本地圖片代替
- 請求返回資料的格式,常規返回json字串,資料包含state屬性(成功時返回'SUCCESS',錯誤時返回錯誤資訊)。
- 請求支援jsonp請求格式,當請求有通過GET方式傳callback的引數時,返回json資料前後加上括號,再在前面加上callback的值,格式類似這樣:
cb({"key": "value"})
Flask實現後端請求
獲取配置資訊
由於介面升級,編輯器初始化時,首先會向後端請求配置資訊,後端收到請求後,返回相應的配置資訊即可。
請求引數:
GET {"action": "config"} POST "upfile": File Data
返回格式:
// 需要支援callback引數,返回jsonp格式 { "imageUrl": "http://localhost/ueditor/php/controller.php?action=uploadimage", "imagePath": "/ueditor/php/", "imageFieldName": "upfile", "imageMaxSize": 2048, "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"] }
主要功能程式碼:
@app.route('/upload/', methods=['GET', 'POST']) def upload(): action = request.args.get('action') # 解析JSON格式的配置檔案 # 這裡使用PHP版本自帶的config.json檔案 with open(os.path.join(app.static_folder, 'ueditor', 'php', 'config.json')) as fp: try: # 刪除 `/**/` 之間的註釋 CONFIG = json.loads(re.sub(r'\/\*.*\*\/', '', fp.read())) except: CONFIG = {} if action == 'config': # 初始化時,返回配置檔案給客戶端 result = CONFIG return json.dumps(result)
檔案、視訊、圖片上傳
圖片上傳包括:本地圖片上傳、拖拽圖片上傳、貼上板圖片上傳。
這些功能實現的方法是一樣的,所以放到一起來講。上傳的檔案可用request.files['upfile']
獲取。
請求引數:
GET {"action": "uploadimage"} POST "upfile": File Data
action說明:
- uploadimage 上傳圖片
- uploadvideo 上傳視訊檔案
- uploadfile 上傳附件(檔案)
返回格式:
{ "state": "SUCCESS", "url": "upload/demo.jpg", "title": "demo.jpg", "original": "demo.jpg" }
主要功能程式碼:
@app.route('/upload/', methods=['GET', 'POST']) def upload(): result = {} action = request.args.get('action') if action in ('uploadimage', 'uploadvideo', 'uploadfile'): upfile = request.files['upfile'] # 這個表單名稱以配置檔案為準 # upfile 為 FileStorage 物件 # 這裡儲存檔案並返回相應的URL upfile.save(filename_to_save) result = { "state": "SUCCESS", "url": "upload/demo.jpg", "title": "demo.jpg", "original": "demo.jpg" } return json.dumps(result)
塗鴉功能
塗鴉功能上傳經過BASE64編碼的圖片(一般為PNG格式),可用request.form['upfile']
獲取,後端收到之後需要先解碼,再儲存。
請求引數:
GET {"action": "uploadscrawl"} POST "content": Base64 Data
返回格式:
{ "state": "SUCCESS", "url": "upload/demo.jpg", "title": "demo.jpg", "original": "demo.jpg" }
主要功能程式碼:
@app.route('/upload/', methods=['GET', 'POST']) def upload(): result = {} action = request.args.get('action') if action in ('uploadscrawl'): base64data = request.form['upfile'] # 這個表單名稱以配置檔案為準 img = base64.b64decode(base64data) # 這裡儲存檔案並返回相應的URL with open(filename_to_save, 'wb') as fp: fp.write(img) result = { "state": "SUCCESS", "url": "upload/demo.jpg", "title": "demo.jpg", "original": "demo.jpg" } return json.dumps(result)
遠端抓圖
遠端抓圖主要是把站外的圖片儲存到本地或者指定的圖片伺服器。
當複製貼上其他網站的網頁的圖片時,會觸發遠端抓圖功能。
遠端圖片列表可通過request.form.getlist('source[]')
獲取。這裡暫時不清楚是什麼原因,為什麼request.form.getlist('source')
為空。
核心思路:遍歷遠端圖片列表,通過urllib把圖片下載並儲存,下載完成之後按照格式返回結果。
請求引數:
GET { "action": "catchimage", "source": [ "http://a.com/1.jpg", "http://a.com/2.jpg" ] }
返回格式:
// 需要支援callback引數,返回jsonp格式 // list項的state屬性和最外面的state格式一致 { "state": "SUCCESS", "list": [{ "url": "upload/1.jpg", "source": "http://b.com/2.jpg", "state": "SUCCESS" }, { "url": "upload/2.jpg", "source": "http://b.com/2.jpg", "state": "SUCCESS" }, ] }
完整DEMO
實現了圖片上傳、附件上傳、視訊上傳、塗鴉、遠端抓圖等功能。
相關推薦
python web.py中使用百度富文字編輯器 UEditor
原文連結 http://flask123.sinaapp.com/article/47/UEditor簡介UEditor是由百度「FEX前端研發團隊」開發的所見即所得富文字web編輯器,具有輕量,可定製,注重使用者體驗等特點,開源基於MIT協議,允許自由使用和修改程式碼。由於
【ASP.NET】6.百度富文字編輯器UEditor之從資料庫中取出來頁面展示
將資料存到資料庫中了,那麼怎麼讓資料原樣顯示到編輯器裡呢?讀取資料庫裡一條資料,獲取到的資料是這樣的:<p style="text-align:center;"> <img src="/LJWY/MGMT/attached/image/2016-1
關於百度富文字編輯器UEditor中ctrl+enter鍵傳送訊息的解決方案
最近一個訊息外掛中遇到一個特殊需求,就是一旦ueditor編輯器獲取焦點以後,除非讓編輯器失去焦點,否則window的鍵盤監聽事件就失去作用了,在這種情況下如何才能使用ctrl+enter傳送已經編輯好的內容呢?上網搜了好多,發現大家都遇到這個問題了,這裡我將我自己的解決方
java中SSM+maven整合百度富文字編輯器Ueditor的一系列方法和可能遇到的問題
一、怎麼顯示圖片? 這是我專案的總體排版 1.解壓UTF-8版本的Ueditor到webapp下 新建一個叫index.jsp的檔案 內容如下 2.修改imageUrlPrefix的值 ,對應自己的專案名 3.因為SSM包含了mvc 過濾靜態資源 所以去
百度富文字編輯器ueditor上傳檔案到bcs中
(不知為何,程式碼的排版總是不能自動對齊。有點糾結,各位將就看著) 近期在做一個個人部落格,用到了百度的富文字編輯器ueditor。部落格是架在了bae中的。在測試的時候發現,上傳的圖片有時候不會或者是間接性地不會顯現出來,特別詭異的是,我用ie核心的瀏覽器(比如360、i
百度富文字編輯器ueditor的使用、非空校驗、引用預定義模板
最近用到百度ueditor編輯器,遇到了很多問題,總結一下ueditor的使用、非空校驗、引用預先寫好的模板。 一、百度ueditor編輯器簡單使用: 1.在百度官網http://ueditor.baidu.com/website/download.html下載壓縮包,解壓之後整體拷
laravel-admin整合百度富文字編輯器ueditor
首先要說的是laravel-admin真的是一個非常適合做管理後臺的package。 官方文件有整合wangEditor、ckeditor、PHP editor的示例,如果這幾個編輯器能滿足你的需求可以參照官方文件操作。 ueditor是百度開源的一款編輯器,其中它
百度富文字編輯器UEditor使用簡單示例
HTML程式碼: <form id="f_edit" method="post"> <input name="id" type="hidden" value="${activit
百度富文字編輯器Ueditor的使用
前言 最近專案需要整合一個編輯器,於是聽從了同事的推薦用的是百度的Ueditor,整合很順利,本地也很順利,然後部署到linux上就各種不能用。。。 期間也百度了很多的帖子,但是多數帖子都是使用的舊
使用百度富文字編輯器UEditor碰到的問題
前面使用的是kindEditor,但是發現這個已經不再維護,並且bug不少,而我又不會改,哈哈,所以我就放棄了。 原來想過要用百度的這個UEditor,但是在配置的時候遇到了很多問題,基本上載入不出來,但是最後還是硬著頭皮把那些bug都解決了,順利跑通。 問題1:按百度Demo的配置我發現連最基本的編
百度富文字編輯器UEditor的使用總結
在你的web工程或網站根目錄下,新建一個名稱叫ueditor資料夾,把下載ueditor解壓後貼上到你新建的這個資料夾中4.在你的jsp頁面中一如富文字編輯器 1.引入相關js和css <script type="text/javascript" src="${basePath}/ad
百度富文字編輯器UEditor的使用和他的圖片上傳
最近在做一個新聞釋出系統的小專案,需要用到富文字編輯器這個東東,於是上網搜了下,白活兩天給白活出來了,接下來談談我對百度富文字編輯器的使用心得: 要想使用這個富文字編輯器,首先呢得從百度官網上下載,文章最後我會貼出來資源的連結,大家可以直接下載哈~ 下載完成之後呢,解壓,目
百度富文字編輯器UEditor的改造
在Java專案中,做內容管理功能時,需要用到富文字編輯器,目前流行的富文字編輯器還是比較多的,因為專案中用的是百度的UEditor,所以對UEditor使用中的一些問題做個總結吧。 因為是Java專案所以使用的是隻能選擇jsp版本的UEditor,使用方
百度富文字編輯器UEditor:PHP + Nginx 後端配置圖片上傳,下載
由於公司專案需求,花了點時間研究UEditor的後端配置,分享一下使用經驗。注意,這裡的圖片上傳配置,僅能保證圖片管理器的上傳下載正常,而單張照片上傳,後端顯示成功,也接收到檔案了,可是前端會報錯,筆者沒有找到解決方案,所以註釋掉了單張照片上傳的功能,以後有時間再研究。1.後
百度富文字編輯器ueditor使用小結
/** * 圖片上傳 * @author CK * @param upfile * @param request * @param response * @return * @throws Exception
【ASP.NET】9.解決百度富文字編輯器UEditor往後臺傳資料寫入資料庫時,出現錯誤:檢測到有潛在危險的Request
解決方法:把傳資料的方式換一下,在函式上面新增[ValidateInput(false)],如果是winform頁面,在aspx頁面裡新增ValidateRequest="false"%@ Page V
百度富文字編輯器UEditor
有文件,有演示.使用者體驗很舒服,介面很乾淨,很好.比之前的富文字編輯器好用. 至於jsp或者asp.net、php配置使用,百度谷歌很多.可以找一找,配置一下. 網上找到一個人整理的富文字編輯器 轉自:http://hi.baidu.com/gezi419439610/
SSH2專案引入百度富文字編輯器Ueditor編輯器
一、整合所需UEditor原始碼 這個可以到http://ueditor.baidu.com/website/download.html#ueditor下載相應版本。 二、導包 把上述包拷貝到WEB-INF的lib下 三、JSP頁面處理 [javascript] view plain copy pr
百度富文字編輯器Ueditor 整合springboot(不修改原始碼)
專案中使用到百度的富文字編輯器ueditor,網上也有相關的部落格做了比較全面的介紹,只是需要較多時間去一一整理,個人認為這其中的難點主要在於載入ueditor的配置檔案config.json,網上的教程大概可以分為兩種載入方式,一是修改原始碼直接去讀取uedi
ssm+maven專案中加入“百度富文字編輯器”,實現圖片上傳
1.在UEditor官方下載編輯器。2.解壓壓縮檔案到資料夾,因為預設的資料夾名字過長,建議重新命名一下資料夾名,我這裡命名為ueditor資料夾中對應的目錄為3.將整個資料夾copy到專案webapp目錄下,(我這裡用的是IDEA,不知道什麼原因直接往IDEA開啟的專案裡拷