Python の Flask フレームワークに統合された CKeditor リッチ テキスト エディター
- 高洛峰オリジナル
- 2017-03-03 13:39:151825ブラウズ
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 サイトに注目してください。