ホームページ >バックエンド開発 >Python チュートリアル >Python の Flask フレームワークに統合された CKeditor リッチ テキスト エディター
CKeditor は、現在 JavaScript で書かれた最も見やすくアクセスしやすい Web ページ エディターの 1 つです。強力な機能、簡単な設定、クロスブラウザー、複数のプログラミング言語のサポート、オープンソースという特徴があります。非常に普及しており、国内の多くの WEB プロジェクトや大規模な Web サイトで関連する技術文書を簡単に見つけることができます。
CKeditorをダウンロード
CKeditorの公式Webサイトにアクセスし、ダウンロードページに入り、Standard Package(通常は機能が十分である)を選択し、Download CKEditorボタンをクリックしてインストールファイルをZIP形式でダウンロードします。さらに多くの機能を試したい場合は、フル パッケージをダウンロードすることを選択できます。
CKeditor をダウンロードしたら、Flask プロジェクトの static/ckeditor ディレクトリに解凍します。
Flask プロジェクトで CKeditor を使用する
Flask プロジェクトで CKeditor を使用するには、次の 2 つの手順を実行するだけです:
3f1c4e4b6b16bbbd69b2ee476dc4f83a タグに CKeditor メイン スクリプト ファイルを導入します。ローカル ファイルまたは 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: ファイルのアップロード パス。設定すると、リンク、画像、および Flash ダイアログ ウィンドウにアップロード ボタンが表示されます。
filebrowserImageUploadUrl: 画像のアップロード パス。設定されていない場合は、filebrowserUploadUrl 値が使用されます。
filebrowserFlashUploadUrl: Flash アップロード パス。設定されていない場合は、filebrowserUploadUrl 値が使用されます。
便宜上、ここでは 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 つのパラメータは次のとおりです:
CKEditorFuncNum: コールバック関数のシリアル番号。 CKEditor は URL パラメータを通じてサーバーに送信します
URL: アップロードされたファイルの URL
Error: エラー メッセージ。エラーがない場合は、空の文字列が返されます。
ブループリントの使用
ブループリント ビューで CKEditor を統合する手順は、基本的にアプリ ビューでの手順と同じです。本1. ブループリントを作成するときは、ブルーブックの静的ディレクトリの絶対パスを指定する必要があります
demo = Blueprint('demo', static_folder="/path/to/static")e
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)
Python の Flask フレームワークへの CKeditor リッチ テキスト エディターの統合に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。