ホームページ >バックエンド開発 >Python チュートリアル >xhEditor テキスト エディタを Python の Flask サイトに統合する
xhEditor テキスト エディタを Python の Flask サイトに統合する
- 高洛峰オリジナル
- 2017-03-03 13:37:061444ブラウズ
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 の主な機能:
簡易ミニ: 4 つのファイルの初期ロード: 1 js (50k) + 2 css (10k) + 1 image (5k)、合計 65k。 js ファイルや css ファイルを gzip 圧縮して送信すると、さらに 24k 程度まで圧縮できます。
使いやすい: 簡単な呼び出しメソッドとクラス属性の追加により、テキストエリアを機能豊富なビジュアルエディターに即座に変えることができます。
アクセシビリティ：WAI-ARIAの包括的なサポート、細かい操作のためのフルキーボード、およびフル音声ガイダンスを提供し、完璧なバリアフリーアクセス体験を提供し、障害のある人々が素晴らしい人生を書くことができるようにします。
組み込みの Ajax アップロード: HTML4 および HTML5 アップロードのサポート (複数ファイルのアップロード、実際のアップロードの進行状況、ファイルのドラッグ アンド ドロップ アップロード)、クリップボードのアップロード、リモート キャプチャのアップロードを含む、組み込みの強力な Ajax アップロード。完璧なユーザーアップロードエクスペリエンス。
Word 自動クリーニング: Word コードの自動検出とクリーニングを実現し、効率的で完璧な Word コード フィルタリング ソリューションを提供し、詳細を失うことなく最適化および合理化されたコードを生成します。
UBB ビジュアル編集: 完璧な UBB ビジュアル編集ソリューションを提供し、ビジュアル編集の利便性を享受しながら、安全かつ効率的なコード ストレージを取得できます。
Flask プロジェクトで xhEditor を使用する
まず、xhEditor の公式 Web サイトにアクセスして、xhEditor エディターの 1.1.14 バージョンをダウンロードする必要があります。ダウンロード後、
Flask の static/xheditor ディレクトリに解凍します。プロジェクト。
xhEditor は、クラス初期化と JavaScript 初期化の 2 つの初期化メソッドを提供します。クラスの初期化では、xheditor のクラス属性を textarea に設定するだけで、自動的に xhEditor エディターになり、ページは同時に複数のエディターに存在でき、このクラス属性にパラメーターを追加できます。 (追記: CKEditor にもこの機能があります)
これら 2 つの初期化方法については、公式 Web サイトで非常に便利なセットアップ ウィザードが提供されており、設定は比較的簡単です。
サンプルコード:
<head>
<script type="text/javascript" charset="utf-8" src="{{ url_for('static', filename='xheditor/jquery/jquery-1.4.4.min.js') }}"></script>
<script type="text/javascript" charset="utf-8" src="{{ url_for('static', filename='xheditor/xheditor-1.1.14-zh-cn.min.js') }}"></script>
<style>.xheditor {width: 640px; height:320px;}</style>
</head>
<body>
<textarea id="content" name="content" class="xheditor {tools:'mfull'}"></textarea>
</body>
これで、xhEditor エディターが完成しました。
アップロード機能を有効にする
xhEditorのアップロード機能では、いくつかのパラメータを設定する必要があります(画像のアップロードを例に挙げます):
upImgUrl: 画像ファイルのアップロード受信URL、例: /upload/。組み込み変数 {editorRoot} を使用します
upImgExt: 画像をアップロードする前にローカル ファイル拡張子を制限します。 デフォルト: jpg、jpeg、gif、png
ここでは、アップロードされたファイルの受信 URL が /upload であると仮定します。 /、エディタの初期化コードは次のようになります:
<textarea class="xheditor {tools:'mfull',upImgUrl:'/upload/'}"></textarea>
他のタイプのファイルアップロード設定など。
Flask はアップロードリクエストを処理します
xhEditor は、標準 HTML4 アップロードと HTML5 アップロードの 2 つのアップロード方法をサポートしています。
HTML4 アップロードでは、標準フォームのアップロード フィールドが使用されます。アップロード ファイル フィールドの名前は次のとおりです: filedata
HTML5 によってアップロードされた POST データ ストリーム全体は、アップロードされたファイルの完全なデータであり、ローカル ファイル名と他の情報が保存されます
サーバー変数 HTTP_CONTENT_DISPOSITION に保存されます
返されるコンテンツは標準の JSON 文字列である必要があり、構造は次のとおりです:
{"err":"","msg":"200906030521128703.gif"} 或者
{"err":"","msg":{"url":"200906030521128703.jpg","localfile":"test.jpg","id":"1"}}
注: 構造 2 が選択されている場合、 URL 変数は必須です。
文件上传处理示例代码：
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('/upload/', methods=['GET', 'POST'])
def upload():
'''文件上传函数
本函数未做上传类型判断及上传大小判断。
'''
result = {"err": "", "msg": {"url": "", "localfile": ""}}
if request.method == 'POST' and 'filedata' in request.files:
# 传统上传模式，IE浏览器使用这种模式
fileobj = request.files['filedata']
fname, fext = os.path.splitext(fileobj.filename)
rnd_name = '%s%s' % (gen_rnd_filename(), fext)
fileobj.save(os.path.join(app.static_folder, 'upload', rnd_name))
result["msg"]["localfile"] = fileobj.filename
result["msg"]["url"] = '!%s' % \
url_for('static', filename='%s/%s' % ('upload', rnd_name))
elif 'CONTENT_DISPOSITION' in request.headers:
# HTML5上传模式，FIREFOX等默认使用此模式
pattern = re.compile(r"""\s.*?\s?filename\s*=\s*['|"]?([^\s'"]+).*?""", re.I)
_d = request.headers.get('CONTENT_DISPOSITION').encode('utf-8')
if urllib.quote(_d).count('%25') > 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 = '%s%s' % (gen_rnd_filename(), fext)
with open(os.path.join(app.static_folder, 'upload', rnd_name), 'wb') as fp:
fp.write(img)
result["msg"]["url"] = '!%s' % \
url_for('static', filename='%s/%s' % ('upload', rnd_name))
return json.dumps(result)
远程抓图
一般情况下，当复制站外的图片时，我们希望可以把图片保存到本地，远程抓图就可以完成这个事情。
启用远程抓图功能，需要设置2个参数：
localUrlTest : 非本站域名测试正则表达式
remoteImgSaveUrl : 远程图片抓取接收程序URL
设置这2个参数之后，我们的编辑器初始化代码变成：
复制代码 代码如下:
这里表示抓取除localhost之外其它域名的图片。
远程抓图处理示例代码：
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('/uploadremote/', methods=['POST'])
def uploadremote():
"""
xheditor保存远程图片简单实现
URL用"|"分隔，返回的字符串也是用"|"分隔
返回格式是字符串，不是JSON格式
"""
localdomain_re = re.compile(r'https?:\/\/[^\/]*?(localhost:?\d*)\/', re.I)
imageTypes = {'gif': '.gif', 'jpeg': '.jpg', 'jpg': '.jpg', 'png': '.png'}
urlout = []
result = ''
srcUrl = request.form.get('urls')
if srcUrl:
urls = srcUrl.split('|')
for url in urls:
if not localdomain_re.search(url.strip()):
downfile = urllib.urlopen(url)
fext = imageTypes[downfile.headers.getsubtype().lower()]
rnd_name = '%s%s' % (gen_rnd_filename(), fext)
with open(os.path.join(app.static_folder, 'upload', rnd_name), 'wb') as fp:
fp.write(downfile.read())
urlreturn = url_for('static', filename='%s/%s' % ('upload', rnd_name))
urlout.append(urlreturn)
else:
urlout.append(url)
result = '|'.join(urlout)
return result更多xhEditor テキスト エディタを Python の Flask サイトに統合する相关文章请关注PHP中文网！