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

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

Jun 16, 2016 am 08:47 AM

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 テキスト エディターを統合するチュートリアル

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

    localUrlTest: 非サイト ドメイン名テストの正規表現
  • 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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

PythonインタープリターはLinuxシステムで削除できますか? PythonインタープリターはLinuxシステムで削除できますか? Apr 02, 2025 am 07:00 AM

Linux Systemsに付属するPythonインタープリターを削除する問題に関して、多くのLinuxディストリビューションは、インストール時にPythonインタープリターをプリインストールし、パッケージマネージャーを使用しません...

Pythonでのカスタムデコレータのパイランスタイプ検出の問題を解決する方法は? Pythonでのカスタムデコレータのパイランスタイプ検出の問題を解決する方法は? Apr 02, 2025 am 06:42 AM

Pythonプログラミングでカスタムデコレーターを使用する場合、Pylance Type検出問題解決策デコレーターは、行を追加するために使用できる強力なツールです...

Python 3.6のロードピクルスファイルエラーmodulenotfounderror:ピクルスファイル「__builtin__」をロードした場合はどうすればよいですか? Python 3.6のロードピクルスファイルエラーmodulenotfounderror:ピクルスファイル「__builtin__」をロードした場合はどうすればよいですか? Apr 02, 2025 am 06:27 AM

Python 3.6のピクルスファイルの読み込みエラー:modulenotfounderror:nomodulenamed ...

FastapiとAIOHTTPは同じグローバルイベントループを共有していますか? FastapiとAIOHTTPは同じグローバルイベントループを共有していますか? Apr 02, 2025 am 06:12 AM

Pythonの非同期ライブラリ間の互換性の問題Python、非同期プログラミングは、高い並行性とI/Oのプロセスになりました...

Python 3.6にピクルスファイルをロードするときに「__Builtin__」モジュールが見つからない場合はどうすればよいですか? Python 3.6にピクルスファイルをロードするときに「__Builtin__」モジュールが見つからない場合はどうすればよいですか? Apr 02, 2025 am 07:12 AM

Python 3.6のピクルスファイルのロードレポートエラー:modulenotFounderror:nomodulenamed ...

Pythonの信号を介して親プロセスを殺した後に子プロセスも終了することを確認する方法は? Pythonの信号を介して親プロセスを殺した後に子プロセスも終了することを確認する方法は? Apr 02, 2025 am 06:39 AM

子どものプロセスを使用して親プロセスを殺すときに実行され続ける子プロセスの問題と解決策。 Pythonプログラミングでは、信号を通じて親のプロセスを殺した後、子のプロセスはまだ...

See all articles