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 の主な機能:
簡易ミニ: 1 js (50k) + 2 css を含む 4 ファイルの初期ロード(10k) + 1 つの画像 (5k)、合計 65k。 js ファイルや css ファイルを gzip 圧縮して送信すると、さらに 24k 程度まで圧縮できます。
使い方は簡単: 呼び出してクラス属性を追加するだけで、テキストエリアがすぐに機能豊富なビジュアルエディターに変わります。
アクセシビリティ: WAI-ARIA の包括的なサポート、細かい操作のためのフルキーボード、およびフル音声ガイダンスを提供し、完璧なバリアフリー アクセス エクスペリエンスを提供し、障害のある人々が素晴らしい文字を書くことができるようにします。人生。
組み込みの Ajax アップロード: HTML4 および HTML5 アップロードのサポート (複数のファイルのアップロード、実際のアップロードの進行状況、およびファイルのドラッグ アンド ドロップによるアップロード)、クリップボードを含む、組み込みの強力な Ajax アップロードアップロードとリモート キャプチャ アップロードを取得し、完璧なユーザー アップロード エクスペリエンスを追求します。
Word の自動クリーニング: Word コードを自動的に検出してクリーニングし、効率的で完璧な Word コード フィルタリング ソリューションを提供し、詳細を失うことなく最適化および合理化されたコードを生成します。
UBB ビジュアル編集: 完璧な UBB ビジュアル編集ソリューションを提供し、ビジュアル編集の利便性を享受しながら、安全かつ効率的なコード ストレージを取得できます。
Flask プロジェクトでの xhEditor の使用
まず、xhEditor エディターのバージョン 1.1.14 を xhEditor 公式 Web サイトからダウンロードする必要があります。ダウンロード後、解凍します。
へ 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 のアップロード機能では、いくつかのパラメーターを設定する必要があります (画像のアップロードを例にします):
アップロードされたファイルの受信 URL が /upload/ であると仮定すると、エディターの初期化コードは次のようになります:
<textarea class="xheditor {tools:'mfull',upImgUrl:'/upload/'}"></textarea>ログイン後にコピー
その他の種類 ファイルアップロード設定など。
Flask はアップロード リクエストを処理します
xhEditor は、標準 HTML4 アップロードと HTML5 アップロードの 2 つのアップロード方法をサポートしています。
返されるコンテンツは標準の JSON 文字列である必要があります。
注: 構造 2 を選択した場合は、url 変数が必要です。
{"err":"","msg":"200906030521128703.gif"} 或者
{"err":"","msg":{"url":"200906030521128703.jpg","localfile":"test.jpg","id":"1"}}ログイン後にコピー
ファイルアップロード処理のサンプルコード:
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?filenames*=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 つのパラメータを設定する必要があります:
设置这2个参数之后，我们的编辑器初始化代码变成：
<textarea class="xheditor {tools:'mfull',upImgUrl:'/upload/',localUrlTest:/^https?://[^/]*?(localhost:?d*)//i,
remoteImgSaveUrl:'/uploadremote/'}"></textarea>ログイン後にコピー
这里表示抓取除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ログイン後にコピー
以上就是Python的Flask站点中集成xhEditor文本编辑器的教程的内容，更多相关内容请关注PHP中文网（www.php.cn）！
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
