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

ホームページ

バックエンド開発

Python チュートリアル

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

PHP中文网

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

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を使用した科学コンピューティングでアレイはどのように使用されていますか？Apr 25, 2025 am 12:28 AM

Arraysinpython、特にvianumpy、arecrucialinscientificComputing fortheirefficienty andversitility.1）彼らは、fornumericaloperations、data analysis、andmachinelearning.2）numpy'simplementation incensuresfasteroperationsthanpasteroperations.3）arayableminablecickick

同じシステムで異なるPythonバージョンをどのように処理しますか？Apr 25, 2025 am 12:24 AM

Pyenv、Venv、およびAnacondaを使用して、さまざまなPythonバージョンを管理できます。 1）Pyenvを使用して、複数のPythonバージョンを管理します。Pyenvをインストールし、グローバルバージョンとローカルバージョンを設定します。 2）VENVを使用して仮想環境を作成して、プロジェクトの依存関係を分離します。 3）Anacondaを使用して、データサイエンスプロジェクトでPythonバージョンを管理します。 4）システムレベルのタスク用にシステムPythonを保持します。これらのツールと戦略を通じて、Pythonのさまざまなバージョンを効果的に管理して、プロジェクトのスムーズな実行を確保できます。

標準のPythonアレイでnumpyアレイを使用することの利点は何ですか？Apr 25, 2025 am 12:21 AM

numpyarrayshaveveraladvantages-averstandardpythonarrays：1）thealmuchfasterduetocベースのインプレンテーション、2）アレモレメモリ効率、特にlargedatasets、および3）それらは、拡散化された、構造化された形成術科療法、

アレイの均質な性質はパフォーマンスにどのように影響しますか？Apr 25, 2025 am 12:13 AM

パフォーマンスに対する配列の均一性の影響は二重です。1）均一性により、コンパイラはメモリアクセスを最適化し、パフォーマンスを改善できます。 2）しかし、タイプの多様性を制限し、それが非効率につながる可能性があります。要するに、適切なデータ構造を選択することが重要です。

実行可能なPythonスクリプトを作成するためのベストプラクティスは何ですか？Apr 25, 2025 am 12:11 AM

craftexecutablepythonscripts、次のようになります

numpyアレイは、アレイモジュールを使用して作成された配列とどのように異なりますか？Apr 24, 2025 pm 03:53 PM

numpyarraysarasarebetterfornumeroperations andmulti-dimensionaldata、whilethearraymoduleissuitable forbasic、1）numpyexcelsinperformance and forlargedatasentassandcomplexoperations.2）thearraymuremememory-effictientivearientfa

Numpyアレイの使用は、Pythonで配列モジュール配列の使用と比較してどのように比較されますか？Apr 24, 2025 pm 03:49 PM

NumPyArraySareBetterforHeavyNumericalComputing、whilethearrayarayismoreSuitableformemory-constrainedprojectswithsimpledatatypes.1）numpyarraysofferarays andatiledance andpeperancedatasandatassandcomplexoperations.2）thearraymoduleisuleiseightweightandmemememe-ef

CTypesモジュールは、Pythonの配列にどのように関連していますか？Apr 24, 2025 pm 03:45 PM

ctypesallowsinging andmanipulatingc-stylearraysinpython.1）usectypestointerfacewithclibrariesforperformance.2）createc-stylearraysfornumericalcomputations.3）passarraystocfunctions foreffientientoperations.how、how、becuutiousmorymanagemation、performanceo

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、