ホームページ > 記事 > バックエンド開発 > Python の Flask サイトに xhEditor テキストエディターを統合するチュートリアル

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

PHP中文网オリジナル: 2016-06-16 08:47:491377ブラウズ

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 の主な機能:

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

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

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

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 エディターが完成しました。

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

アップロード機能を有効にする
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 文字列である必要があります。

注: 構造 2 を選択した場合は、url 変数が必要です。

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

ファイルアップロード処理のサンプルコード:

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?filenames*=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 つのパラメータを設定する必要があります:

remoteImgSaveUrl : 远程图片抓取接收程序URL

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

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

这里表示抓取除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

以上就是Python的Flask站点中集成xhEditor文本编辑器的教程的内容，更多相关内容请关注PHP中文网（www.php.cn）！

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：PythonのDescriptor記述子クラスの詳しい説明次の記事：PythonのDescriptor記述子クラスの詳しい説明

続きを見る

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

関連記事

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