xhEditor テキストエディタを Python の Flask サイトに統合する-Python チュートリアル-php.cn

xhEditor テキストエディタを Python の Flask サイトに統合する

高洛峰

リリース： 2017-03-03 13:37:06

オリジナル

1357 人が閲覧しました

xhEditor の紹介

xhEditor は、jQuery に基づいて開発された、シンプルで小型で効率的なビジュアル HTML エディターです。ネットワークアクセスに基づいており、IE 6.0 以降、Firefox 3.0 以降、Opera 9.6 以降、Chrome 1.0 以降と互換性があります。、Safari 3.22以降。

xhEditor は私のお気に入りのエディタであり、ドラッグアンドドロップアップロードをサポートした最初のエディタの 1 つでもありました。 xhEditor は当時、十分強力で、優れたユーザーエクスペリエンスを備えた優れたエディターでした。残念ながら、開発は中止されました。 xhEditor の最後の安定バージョンは 1.1.14 ですが、2 年以上更新されていません (開発バージョン 1.2.1 は 2013 年にリリースされました)。作成者は開発とメンテナンスを停止しており、コミュニティフォーラムを開くことはできません。全て。

xhEditor は jQuery に基づいて開発されているため、jQuery の新しいバージョンはあまりサポートされていません。jQuery のバージョン 1.4 のみが最もよくサポートされています。

更新は終了しましたが、リッチテキストエディターが必要な場合には依然として完全な機能を備えています。

この記事では、バージョン 1.1.14 を例として、Flask プロジェクトで xhEditor エディターを使用し、画像アップロードとファイルアップロードのバックエンド機能を実装する方法を説明します。

xhEditor の主な機能:

簡易ミニ: 4 つのファイルの初期ロード: 1 js (50k) + 2 css (10k) + 1 image (5k)、合計 65k。 js ファイルや css ファイルを gzip 圧縮して送信すると、さらに 24k 程度まで圧縮できます。
使いやすい: 簡単な呼び出しメソッドとクラス属性の追加により、テキストエリアを機能豊富なビジュアルエディターに即座に変えることができます。
アクセシビリティ：WAI-ARIAの包括的なサポート、細かい操作のためのフルキーボード、およびフル音声ガイダンスを提供し、完璧なバリアフリーアクセス体験を提供し、障害のある人々が素晴らしい人生を書くことができるようにします。
組み込みの Ajax アップロード: HTML4 および HTML5 アップロードのサポート (複数ファイルのアップロード、実際のアップロードの進行状況、ファイルのドラッグアンドドロップアップロード)、クリップボードのアップロード、リモートキャプチャのアップロードを含む、組み込みの強力な Ajax アップロード。完璧なユーザーアップロードエクスペリエンス。
Word 自動クリーニング: Word コードの自動検出とクリーニングを実現し、効率的で完璧な Word コードフィルタリングソリューションを提供し、詳細を失うことなく最適化および合理化されたコードを生成します。
UBB ビジュアル編集: 完璧な UBB ビジュアル編集ソリューションを提供し、ビジュアル編集の利便性を享受しながら、安全かつ効率的なコードストレージを取得できます。

Flask プロジェクトで xhEditor を使用する
まず、xhEditor の公式 Web サイトにアクセスして、xhEditor エディターの 1.1.14 バージョンをダウンロードする必要があります。ダウンロード後、
Flask の static/xheditor ディレクトリに解凍します。プロジェクト。

xhEditor テキストエディタを Python の Flask サイトに統合する

xhEditor は、クラス初期化と JavaScript 初期化の 2 つの初期化メソッドを提供します。クラスの初期化では、xheditor のクラス属性を textarea に設定するだけで、自動的に xhEditor エディターになり、ページは同時に複数のエディターに存在でき、このクラス属性にパラメーターを追加できます。 (追記: CKEditor にもこの機能があります)

これら 2 つの初期化方法については、公式 Web サイトで非常に便利なセットアップウィザードが提供されており、設定は比較的簡単です。

サンプルコード:

<head>
<script type="text/javascript" charset="utf-8" src="{{ url_for(&#39;static&#39;, filename=&#39;xheditor/jquery/jquery-1.4.4.min.js&#39;) }}"></script>
<script type="text/javascript" charset="utf-8" src="{{ url_for(&#39;static&#39;, filename=&#39;xheditor/xheditor-1.1.14-zh-cn.min.js&#39;) }}"></script>
<style>.xheditor {width: 640px; height:320px;}</style>
</head>

<body>
<textarea id="content" name="content" class="xheditor {tools:&#39;mfull&#39;}"></textarea>
</body>

ログイン後にコピー

これで、xhEditor エディターが完成しました。

xhEditor テキストエディタを Python の Flask サイトに統合する

アップロード機能を有効にする
xhEditorのアップロード機能では、いくつかのパラメータを設定する必要があります(画像のアップロードを例に挙げます):

upImgUrl: 画像ファイルのアップロード受信URL、例: /upload/。組み込み変数 {editorRoot} を使用します
upImgExt: 画像をアップロードする前にローカルファイル拡張子を制限します。デフォルト: jpg、jpeg、gif、png

ここでは、アップロードされたファイルの受信 URL が /upload であると仮定します。 /、エディタの初期化コードは次のようになります:

<textarea class="xheditor {tools:&#39;mfull&#39;,upImgUrl:&#39;/upload/&#39;}"></textarea>

ログイン後にコピー

他のタイプのファイルアップロード設定など。

Flask はアップロードリクエストを処理します
xhEditor は、標準 HTML4 アップロードと HTML5 アップロードの 2 つのアップロード方法をサポートしています。

HTML4 アップロードでは、標準フォームのアップロードフィールドが使用されます。アップロードファイルフィールドの名前は次のとおりです: 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(&#39;%Y%m%d%H%M%S&#39;)
  return &#39;%s%s&#39; % (filename_prefix, str(random.randrange(1000, 10000)))

@app.route(&#39;/upload/&#39;, methods=[&#39;GET&#39;, &#39;POST&#39;])
def upload():
  &#39;&#39;&#39;文件上传函数

  本函数未做上传类型判断及上传大小判断。
  &#39;&#39;&#39;
  result = {"err": "", "msg": {"url": "", "localfile": ""}}

  if request.method == &#39;POST&#39; and &#39;filedata&#39; in request.files:
    # 传统上传模式，IE浏览器使用这种模式
    fileobj = request.files[&#39;filedata&#39;]
    fname, fext = os.path.splitext(fileobj.filename)
    rnd_name = &#39;%s%s&#39; % (gen_rnd_filename(), fext)
    fileobj.save(os.path.join(app.static_folder, &#39;upload&#39;, rnd_name))
    result["msg"]["localfile"] = fileobj.filename
    result["msg"]["url"] = &#39;!%s&#39; % \
      url_for(&#39;static&#39;, filename=&#39;%s/%s&#39; % (&#39;upload&#39;, rnd_name))

  elif &#39;CONTENT_DISPOSITION&#39; in request.headers:
    # HTML5上传模式，FIREFOX等默认使用此模式
    pattern = re.compile(r"""\s.*?\s?filename\s*=\s*[&#39;|"]?([^\s&#39;"]+).*?""", re.I)
    _d = request.headers.get(&#39;CONTENT_DISPOSITION&#39;).encode(&#39;utf-8&#39;)
    if urllib.quote(_d).count(&#39;%25&#39;) > 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 = &#39;%s%s&#39; % (gen_rnd_filename(), fext)
    with open(os.path.join(app.static_folder, &#39;upload&#39;, rnd_name), &#39;wb&#39;) as fp:
      fp.write(img)

    result["msg"]["url"] = &#39;!%s&#39; % \
      url_for(&#39;static&#39;, filename=&#39;%s/%s&#39; % (&#39;upload&#39;, rnd_name))

  return json.dumps(result)

ログイン後にコピー

远程抓图
一般情况下，当复制站外的图片时，我们希望可以把图片保存到本地，远程抓图就可以完成这个事情。

启用远程抓图功能，需要设置2个参数：

localUrlTest : 非本站域名测试正则表达式
remoteImgSaveUrl : 远程图片抓取接收程序URL

设置这2个参数之后，我们的编辑器初始化代码变成：

复制代码代码如下:

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

远程抓图处理示例代码：

def gen_rnd_filename():
  filename_prefix = datetime.datetime.now().strftime(&#39;%Y%m%d%H%M%S&#39;)
  return &#39;%s%s&#39; % (filename_prefix, str(random.randrange(1000, 10000)))

@app.route(&#39;/uploadremote/&#39;, methods=[&#39;POST&#39;])
def uploadremote():
  """
  xheditor保存远程图片简单实现
  URL用"|"分隔，返回的字符串也是用"|"分隔
  返回格式是字符串，不是JSON格式
  """
  localdomain_re = re.compile(r&#39;https?:\/\/[^\/]*?(localhost:?\d*)\/&#39;, re.I)
  imageTypes = {&#39;gif&#39;: &#39;.gif&#39;, &#39;jpeg&#39;: &#39;.jpg&#39;, &#39;jpg&#39;: &#39;.jpg&#39;, &#39;png&#39;: &#39;.png&#39;}
  urlout = []
  result = &#39;&#39;
  srcUrl = request.form.get(&#39;urls&#39;)
  if srcUrl:
    urls = srcUrl.split(&#39;|&#39;)
    for url in urls:
      if not localdomain_re.search(url.strip()):
        downfile = urllib.urlopen(url)
        fext = imageTypes[downfile.headers.getsubtype().lower()]
        rnd_name = &#39;%s%s&#39; % (gen_rnd_filename(), fext)
        with open(os.path.join(app.static_folder, &#39;upload&#39;, rnd_name), &#39;wb&#39;) as fp:
          fp.write(downfile.read())
        urlreturn = url_for(&#39;static&#39;, filename=&#39;%s/%s&#39; % (&#39;upload&#39;, rnd_name))
        urlout.append(urlreturn)
      else:
        urlout.append(url)
  result = &#39;|&#39;.join(urlout)
  return result

ログイン後にコピー

更多xhEditor テキストエディタを Python の Flask サイトに統合する相关文章请关注PHP中文网！