Python的Flask站點中集成xhEditor文本編輯器的教程

2019-11-25 16:44:21

字體：大中小

來源：轉載

供稿：網友

xhEditor簡介
xhEditor是一個基于jQuery開發的簡單迷你并且高效的可視化HTML編輯器，基于網絡訪問并且兼容IE 6.0+, Firefox 3.0+, Opera 9.6+, Chrome 1.0+, Safari 3.22+。

xhEditor曾經是我比較喜歡的編輯器，也是率先支持拖拽上傳的編輯器之一。xhEditor在當年是優秀的編輯器，功能足夠強大，使用體驗也相當好，拖拽上傳是我最喜歡的功能，只可惜已經停止開發了。xhEditor最后的穩定版本是1.1.14，至今已超過2年未更新（2013年發布了開發版本1.2.1），作者已經停止開發和維護了，社區論壇完全不能打開。

由于xhEditor基于jQuery開發，而對于新版本的jQuery，它并不能很好的支持，只有1.4版本的jQuery是支持得最好的。

雖然已經不再更新了，但在一些需要富文本編輯器的場合，她還是可以完全勝任的。

本文以1.1.14版本為例，講述如何在Flask項目中使用xhEditor編輯器，并實現圖片上傳、文件上傳的后端功能。

xhEditor主要特點：

精簡迷你：初始加載4個文件，包括：1個js(50k)+2個css(10k)+1個圖片(5k)，總共65k。若js和css文件進行gzip壓縮傳輸，可以進一步縮減為24k左右。
使用簡單：簡單的調用方式，加一個class屬性就能將您的textarea立馬變成一個功能豐富的可視化編輯器。
無障礙訪問：提供WAI-ARIA全面支持，全鍵盤精細操作，全程語音向導，提供完美無障礙訪問體驗，讓殘疾人也能夠譜寫精彩人生。
內置Ajax上傳：內置強大的Ajax上傳，包括HTML4和HTML5上傳支持(多文件上傳、真實上傳進度及文件拖放上傳)，剪切板上傳及遠程抓取上傳，追求完美的用戶上傳體驗。
Word自動清理：實現Word代碼自動檢測并清理，提供高效完美的Word代碼過濾方案，生成代碼最優化精簡，但是卻不丟失任何細節效果。
UBB可視化編輯：提供完美的UBB可視化編輯解決方案，在您獲得安全高效代碼存儲的同時，又能享受可視化編輯的便捷。

在Flask項目中使用xhEditor
首先我們需要到xhEditor官網下載1.1.14版本的xhEditor編輯器，下載之后解壓到
Flask項目的static/xheditor目錄。

2016613160455992.jpg (568×150)

2016613160518061.jpg (590×237)

xhEditor提供2種初始化方式：Class初始化和JavaScript初始化。Class初始化只需要給textarea設置值為xheditor的class屬性，它就會自動變成xhEditor編輯器，一個頁面可以同時同在多個編輯器，而且這個類屬性可以添加參數。（PS：CKEditor也有這個功能）

對于這兩種初始化方式，官網有提供設置很方便的設置向導，使得配置相對比較簡單。

示例代碼：

<head><script type="text/javascript" charset="utf-8" src="{{ url_for('static', filename='xheditor/jquery/jquery-1.4.4.min.js') }}"></script><script type="text/javascript" charset="utf-8" src="{{ url_for('static', filename='xheditor/xheditor-1.1.14-zh-cn.min.js') }}"></script><style>.xheditor {width: 640px; height:320px;}</style></head><body><textarea id="content" name="content" class="xheditor {tools:'mfull'}"></textarea></body>

現在，我們就擁有一個xhEditor編輯器了。

2016613160542615.jpg (653×366)

開啟上傳功能
xhEditor的上傳功能需要設置幾個參數（以圖片上傳為例）：

upImgUrl : 圖片文件上傳接收URL，例：/upload/，可使用內置變量{editorRoot}
upImgExt : 圖片上傳前限制本地文件擴展名，默認：jpg,jpeg,gif,png

這里假設上傳文件接收URL為/upload/，我們的編輯器初始化代碼就變成：

<textarea class="xheditor {tools:'mfull',upImgUrl:'/upload/'}"></textarea>

其他類型的文件上傳設置類推。

Flask處理上傳請求
xhEditor支持2種上傳方式：標準HTML4上傳和HTML5上傳。

HTML4上傳使用標準的表單上傳域，上傳文件域的name為：filedata
HTML5上傳的整個POST數據流就是上傳的文件完整數據，而本地文件名等信息儲

存于HTTP_CONTENT_DISPOSITION這個服務器變量中

返回內容必需是標準的json字符串，結構可以是如下：

{"err":"","msg":"200906030521128703.gif"} 或者{"err":"","msg":{"url":"200906030521128703.jpg","localfile":"test.jpg","id":"1"}}

注：若選擇結構2，則url變量是必有。

文件上傳處理示例代碼：

def gen_rnd_filename():  filename_prefix = datetime.datetime.now().strftime('%Y%m%d%H%M%S')  return '%s%s' % (filename_prefix, str(random.randrange(1000, 10000)))@app.route('/upload/', methods=['GET', 'POST'])def upload():  '''文件上傳函數  本函數未做上傳類型判斷及上傳大小判斷。  '''  result = {"err": "", "msg": {"url": "", "localfile": ""}}  if request.method == 'POST' and 'filedata' in request.files:    # 傳統上傳模式，IE瀏覽器使用這種模式    fileobj = request.files['filedata']    fname, fext = os.path.splitext(fileobj.filename)    rnd_name = '%s%s' % (gen_rnd_filename(), fext)    fileobj.save(os.path.join(app.static_folder, 'upload', rnd_name))    result["msg"]["localfile"] = fileobj.filename    result["msg"]["url"] = '!%s' % /      url_for('static', filename='%s/%s' % ('upload', rnd_name))  elif 'CONTENT_DISPOSITION' in request.headers:    # HTML5上傳模式，FIREFOX等默認使用此模式    pattern = re.compile(r"""/s.*?/s?filename/s*=/s*['|"]?([^/s'"]+).*?""", re.I)    _d = request.headers.get('CONTENT_DISPOSITION').encode('utf-8')    if urllib.quote(_d).count('%25') > 0:      _d = urllib.unquote(_d)    filenames = pattern.findall(_d)    if len(filenames) == 1:      result["msg"]["localfile"] = urllib.unquote(filenames[0])      fname, fext = os.path.splitext(filenames[0])    img = request.data    rnd_name = '%s%s' % (gen_rnd_filename(), fext)    with open(os.path.join(app.static_folder, 'upload', rnd_name), 'wb') as fp:      fp.write(img)    result["msg"]["url"] = '!%s' % /      url_for('static', filename='%s/%s' % ('upload', rnd_name))  return json.dumps(result)

遠程抓圖
一般情況下，當復制站外的圖片時，我們希望可以把圖片保存到本地，遠程抓圖就可以完成這個事情。

啟用遠程抓圖功能，需要設置2個參數：

localUrlTest : 非本站域名測試正則表達式
remoteImgSaveUrl : 遠程圖片抓取接收程序URL

設置這2個參數之后，我們的編輯器初始化代碼變成：

復制代碼代碼如下:

<textarea class="xheditor {tools:'mfull',upImgUrl:'/upload/',localUrlTest:/^https?:////[^//]*?(localhost:?/d*)///i,remoteImgSaveUrl:'/uploadremote/'}"></textarea>

這里表示抓取除localhost之外其它域名的圖片。

遠程抓圖處理示例代碼：

def gen_rnd_filename():  filename_prefix = datetime.datetime.now().strftime('%Y%m%d%H%M%S')  return '%s%s' % (filename_prefix, str(random.randrange(1000, 10000)))@app.route('/uploadremote/', methods=['POST'])def uploadremote():  """  xheditor保存遠程圖片簡單實現  URL用"|"分隔，返回的字符串也是用"|"分隔  返回格式是字符串，不是JSON格式  """  localdomain_re = re.compile(r'https?:////[^//]*?(localhost:?/d*)//', re.I)  imageTypes = {'gif': '.gif', 'jpeg': '.jpg', 'jpg': '.jpg', 'png': '.png'}  urlout = []  result = ''  srcUrl = request.form.get('urls')  if srcUrl:    urls = srcUrl.split('|')    for url in urls:      if not localdomain_re.search(url.strip()):        downfile = urllib.urlopen(url)        fext = imageTypes[downfile.headers.getsubtype().lower()]        rnd_name = '%s%s' % (gen_rnd_filename(), fext)        with open(os.path.join(app.static_folder, 'upload', rnd_name), 'wb') as fp:          fp.write(downfile.read())        urlreturn = url_for('static', filename='%s/%s' % ('upload', rnd_name))        urlout.append(urlreturn)      else:        urlout.append(url)  result = '|'.join(urlout)  return result

上一篇：詳解Python的Flask框架中的signals信號機制

下一篇：Flask的圖形化管理界面搭建框架Flask-Admin的使用教程