CKeditor リッチテキストエディターを Python の Flask フレームワークに統合するためのチュートリアル-Python チュートリアル-php.cn

ホームページ

バックエンド開発

Python チュートリアル

CKeditor リッチテキストエディターを Python の Flask フレームワークに統合するためのチュートリアル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 16, 2016 am 08:47 AM

ckeditorflaskpythonテキストエディタ

CKeditor は、現在最も見やすく利用可能な Web ページエディターの 1 つであり、JavaScript で書かれています。強力な機能、簡単な設定、クロスブラウザー、複数のプログラミング言語のサポート、オープンソースという特徴があります。非常に普及しており、国内の多くの WEB プロジェクトや大規模な Web サイトで関連する技術文書を簡単に見つけることができます。

CKeditor をダウンロード
CKeditor の公式 Web サイトにアクセスし、ダウンロードページに入り、標準パッケージ (通常は機能が十分である) を選択し、[CKEditor のダウンロード] ボタンをクリックして、インストールファイルを ZIP 形式でダウンロードします。さらに多くの機能を試したい場合は、フルパッケージをダウンロードすることを選択できます。

CKeditor をダウンロードしたら、Flask プロジェクトの static/ckeditor ディレクトリに解凍します。

Flask プロジェクトで CKeditor を使用する
Flask プロジェクトで CKeditor を使用するには、次の 2 つの手順を実行するだけです:

CKeditor のメインスクリプトファイルを <script> 内に挿入します。ローカルファイルまたは CDN 上の参照ファイルをインポートできます。 <br /> CKEDITOR.replace() を使用して、既存の <textarea> タグを CKEditor に置き換えます。 <br /> サンプルコード: </script>

<!DOCTYPE html>
<html>
  <head>
    <title>A Simple Page with CKEditor</title>
    <!-- 请确保CKEditor文件路径正确 -->
    <script src="{{ url_for('static', filename='ckeditor/ckeditor.js') }}"></script>
  </head>
  <body>
    <form>
      <textarea name="editor1" id="editor1" rows="10" cols="80">
        This is my textarea to be replaced with CKEditor.
      </textarea>
      <script>
        // 用CKEditor替换<textarea id="editor1">
        // 使用默认配置
        CKEDITOR.replace('editor1');
      </script>
    </form>
  </body>
</html>

CKeditor は十分に優れているため、2 番目のステップでは、ckeditor という名前のクラス属性値をに追加するだけで、CKeditor が自動的にそれを置き換えます。例:

<!DOCTYPE html>
<html>
  <head>
    <title>A Simple Page with CKEditor</title>
    <!-- 请确保CKEditor文件路径正确 -->
    <script src="{{ url_for('static', filename='ckeditor/ckeditor.js') }}"></script>
  </head>
  <body>
    <form>
      <textarea name="editor1" id="editor1" class="ckeditor" rows="10" cols="80">
        This is my textarea to be replaced with CKEditor.
      </textarea>
    </form>
  </body>
</html>

CKEditor スクリプトファイルは CDN 上のファイルも参照できます。以下にいくつかの参照リンクを示します。

<script src="//cdn.ckeditor.com/4.4.6/basic/ckeditor.js"></script>

基本バージョン（ミニバージョン）

<script src="//cdn.ckeditor.com/4.4.6/standard/ckeditor.js"></script>

通常版

<script src="//cdn.ckeditor.com/4.4.6/full/ckeditor.js"></script>

フルバージョン

アップロード機能を有効にする
デフォルト設定では、CKEditor はアップロード機能を有効にしません。アップロード機能を有効にするには、設定を変更するだけです。いくつかの関連する構成値を見てみましょう:

便宜上、ここでは filebrowserUploadUrl 値のみを設定し、その値は /ckupload/ に設定されます (この URL は後で Flask で定義されます)。

構成値を設定するには主に 2 つの方法があります:

方法 1: CKEditor ルートディレクトリの構成ファイル config.js を使用して設定します:

CKEDITOR.editorConfig = function( config ) {
  // ...
  // file upload url
  config.filebrowserUploadUrl = '/ckupload/';
  // ...
};

方法 2: パラメータとして設定値を CKEDITOR.replace() に入れます:

<script>
CKEDITOR.replace('editor1', {
  filebrowserUploadUrl: '/ckupload/',
});
</script>

Flask はアップロードリクエストを処理します
CKEditor のアップロード機能は統合されたインターフェイスです。つまり、1 つのインターフェイスで画像のアップロード、ファイルのアップロード、Flash のアップロードを処理できます。まずコードを見てみましょう:

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('/ckupload/', methods=['POST'])
def ckupload():
  """CKEditor file upload"""
  error = ''
  url = ''
  callback = request.args.get("CKEditorFuncNum")
  if request.method == 'POST' and 'upload' in request.files:
    fileobj = request.files['upload']
    fname, fext = os.path.splitext(fileobj.filename)
    rnd_name = '%s%s' % (gen_rnd_filename(), fext)
    filepath = os.path.join(app.static_folder, 'upload', rnd_name)
    # 检查路径是否存在，不存在则创建
    dirname = os.path.dirname(filepath)
    if not os.path.exists(dirname):
      try:
        os.makedirs(dirname)
      except:
        error = 'ERROR_CREATE_DIR'
    elif not os.access(dirname, os.W_OK):
      error = 'ERROR_DIR_NOT_WRITEABLE'
    if not error:
      fileobj.save(filepath)
      url = url_for('static', filename='%s/%s' % ('upload', rnd_name))
  else:
    error = 'post error'
  res = """

<script type="text/javascript">
 window.parent.CKEDITOR.tools.callFunction(%s, '%s', '%s');
</script>

""" % (callback, url, error)
  response = make_response(res)
  response.headers["Content-Type"] = "text/html"
  return response

アップロードされたファイルの取得と保存は比較的簡単で、標準的なファイルアップロードです。ここでは主に、アップロードが成功した後にコールバックする方法について説明します。

CKEditor ファイルがアップロードされると、サーバーは HTML ファイルを返します。HTML ファイルには JAVASCRIPT スクリプトが含まれており、エラーがない場合、コールバック関数は返された URL を CKEditor に転送します。加工用に。

これら 3 つのパラメータは次のとおりです:

を通じてサーバーに送信します。

ブループリントを使用する
ブループリントは大規模なアプリケーションでよく使用されます。ブループリントビューで CKEditor を統合する手順は、基本的にアプリビューでの手順と同じです。

1. ブループリントを作成するときは、ブループリントの静的ディレクトリの絶対パスを指定する必要があります

demo = Blueprint('demo', static_folder="/path/to/static")

2. 対応する URL にブループリントエンドポイントを追加する必要があります

<script src="{{url_for('.static', filename='ckeditor/ckeditor.js')}}"></script>

<script type="text/javascript">
  CKEDITOR.replace(
    "ckeditor_demo", {
      filebrowserUploadUrl: './ckupload/'
    }
  );
</script>

3. エンドポイント値を設定します

response = form.upload(endpoint=demo)

声明

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

Pythonと時間：勉強時間を最大限に活用するApr 14, 2025 am 12:02 AM

限られた時間でPythonの学習効率を最大化するには、PythonのDateTime、時間、およびスケジュールモジュールを使用できます。 1. DateTimeモジュールは、学習時間を記録および計画するために使用されます。 2。時間モジュールは、勉強と休息の時間を設定するのに役立ちます。 3.スケジュールモジュールは、毎週の学習タスクを自動的に配置します。

Python：ゲーム、GUIなどApr 13, 2025 am 12:14 AM

PythonはゲームとGUI開発に優れています。 1）ゲーム開発は、2Dゲームの作成に適した図面、オーディオ、その他の機能を提供し、Pygameを使用します。 2）GUI開発は、TKINTERまたはPYQTを選択できます。 TKINTERはシンプルで使いやすく、PYQTは豊富な機能を備えており、専門能力開発に適しています。

Python vs. C：比較されたアプリケーションとユースケースApr 12, 2025 am 12:01 AM

Pythonは、データサイエンス、Web開発、自動化タスクに適していますが、Cはシステムプログラミング、ゲーム開発、組み込みシステムに適しています。 Pythonは、そのシンプルさと強力なエコシステムで知られていますが、Cは高性能および基礎となる制御機能で知られています。

2時間のPython計画：現実的なアプローチApr 11, 2025 am 12:04 AM

2時間以内にPythonの基本的なプログラミングの概念とスキルを学ぶことができます。 1.変数とデータ型、2。マスターコントロールフロー（条件付きステートメントとループ）、3。機能の定義と使用を理解する4。

Python：主要なアプリケーションの調査Apr 10, 2025 am 09:41 AM

Pythonは、Web開発、データサイエンス、機械学習、自動化、スクリプトの分野で広く使用されています。 1）Web開発では、DjangoおよびFlask Frameworksが開発プロセスを簡素化します。 2）データサイエンスと機械学習の分野では、Numpy、Pandas、Scikit-Learn、Tensorflowライブラリが強力なサポートを提供します。 3）自動化とスクリプトの観点から、Pythonは自動テストやシステム管理などのタスクに適しています。

2時間でどのくらいのPythonを学ぶことができますか？Apr 09, 2025 pm 04:33 PM

2時間以内にPythonの基本を学ぶことができます。 1。変数とデータ型を学習します。2。ステートメントやループの場合などのマスター制御構造、3。関数の定義と使用を理解します。これらは、簡単なPythonプログラムの作成を開始するのに役立ちます。

プロジェクトの基本と問題駆動型の方法で10時間以内にコンピューター初心者プログラミングの基本を教える方法は？Apr 02, 2025 am 07:18 AM

10時間以内にコンピューター初心者プログラミングの基本を教える方法は？コンピューター初心者にプログラミングの知識を教えるのに10時間しかない場合、何を教えることを選びますか...

中間の読書にどこでもfiddlerを使用するときにブラウザによって検出されないようにするにはどうすればよいですか？Apr 02, 2025 am 07:15 AM

fiddlereveryversings for the-middleの測定値を使用するときに検出されないようにする方法

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

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

ホットツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。