快捷導(dǎo)航

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

更新時間：2016年06月13日 16:11:34 作者：digwtx

xhEditor是基于jQuery的Web端文本編輯器,基本的圖片上傳等功能也都帶有,這里我們就來看一下Python的Flask站點中集成xhEditor文本編輯器的教程

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

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

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

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

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

xhEditor主要特點：

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

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

2016613160455992.jpg (568×150)

2016613160518061.jpg (590×237)

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

對于這兩種初始化方式，官網(wǎng)有提供設(shè)置很方便的設(shè)置向?qū)В沟门渲孟鄬Ρ容^簡單。

示例代碼：

<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>

現(xiàn)在，我們就擁有一個xhEditor編輯器了。

2016613160542615.jpg (653×366)

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

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

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

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

其他類型的文件上傳設(shè)置類推。

Flask處理上傳請求
xhEditor支持2種上傳方式：標(biāo)準(zhǔn)HTML4上傳和HTML5上傳。

HTML4上傳使用標(biāo)準(zhǔn)的表單上傳域，上傳文件域的name為：filedata
HTML5上傳的整個POST數(shù)據(jù)流就是上傳的文件完整數(shù)據(jù)，而本地文件名等信息儲

存于HTTP_CONTENT_DISPOSITION這個服務(wù)器變量中

返回內(nèi)容必需是標(biāo)準(zhǔn)的json字符串，結(jié)構(gòu)可以是如下：

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

注：若選擇結(jié)構(gòu)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():
  '''文件上傳函數(shù)

  本函數(shù)未做上傳類型判斷及上傳大小判斷。
  '''
  result = {"err": "", "msg": {"url": "", "localfile": ""}}

  if request.method == 'POST' and 'filedata' in request.files:
    # 傳統(tǒng)上傳模式，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上傳模式，F(xiàn)IREFOX等默認(rèn)使用此模式
    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)

遠(yuǎn)程抓圖
一般情況下，當(dāng)復(fù)制站外的圖片時，我們希望可以把圖片保存到本地，遠(yuǎn)程抓圖就可以完成這個事情。

啟用遠(yuǎn)程抓圖功能，需要設(shè)置2個參數(shù)：

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

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

復(fù)制代碼代碼如下:

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

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

遠(yuǎn)程抓圖處理示例代碼：

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保存遠(yuǎn)程圖片簡單實現(xiàn)
  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

您可能感興趣的文章: