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

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

WBOYオリジナル: 2016-06-16 08:47:501887ブラウズ

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

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

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

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

CKeditor のメインスクリプトファイルを 3f1c4e4b6b16bbbd69b2ee476dc4f83a 内に挿入します。ローカルファイルまたは CDN 上の参照ファイルをインポートできます。
CKEDITOR.replace() を使用して、既存の 4750256ae76b6b9d804861d8f69e79d3 タグを 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" 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 という名前のクラス属性値を 4750256ae76b6b9d804861d8f69e79d3 に追加するだけで、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のgetattr関数とhasattr関数の機能を詳しく解説次の記事：Pythonのgetattr関数とhasattr関数の機能を詳しく解説

続きを見る

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

関連記事

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