← すべてのドキュメント

画像エディター

文書内の画像を、エディターから離れずに切り抜き、回転、反転、描画、注釈の追加、フィルターの適用で編集できます。Save を押すと、編集済み画像をアップロードハンドラーに渡し、画像の URL を更新します。ハンドラーがなければ PNG のデータ URL として埋め込みます。

エディターの上に開いた Image editor ダイアログ。風景画像に 16:9 の切り抜き枠があり、Custom、Square、3:2、4:3、5:4、7:5、16:9 のプリセットと、下部のツールバーが表示されています
選択した画像を画像エディターで開き、切り抜きツールと 16:9 のプリセットを選んだ状態です。

有効にする

この機能は imageeditor.js プラグインで提供されます（plugins/all_plugins.js にも含まれます）。編集ツール自体は plugins/tui.image-editor/ にあり、ダイアログを開くときにのみ、url_base + "/plugins/tui.image-editor/" から読み込みます。デプロイ時は、このフォルダーをプラグインの隣に配置してください。

ボタンは imageeditor（「Image Editor」）です。画像をクリックすると表示される既定の画像ツールバー（controltoolbar_IMG）に含まれるため、メインツールバーへの追加は不要です。コードから使う場合は、先に画像を選択して editor.execCommand("imageeditor") を実行します。

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>

<div id="editor"><p><img src="landscape.png" width="320" alt="Hills under a sun"></p></div>
<script>
// Called on Save with the edited picture: (file, callback(url, error)).
function uploadToServer(file, callback) {
  fetch("/upload", { method: "POST", headers: { "x-file-name": file.name }, body: file })
    .then(function (r) { return r.ok ? r.json() : Promise.reject(new Error("HTTP " + r.status)); })
    .then(function (data) { callback(data.url); })
    .catch(function (err) { callback(null, err.message); });
}
var editor = new RichTextEditor("#editor", { file_upload_handler: uploadToServer });
</script>

これは、画像の挿入やドロップにエディターが使うものと同じハンドラーです。サーバー側の完全な例は、ファイルのアップロードを参照してください。

オプション

このプラグイン独自のオプションはありません。次の設定を読み取ります。

オプション既定値この機能での動作
file_upload_handlerなしSave 時に編集済み画像を受け取ります。未設定の場合は window.rte_file_upload_handler を使います。
url_base"/richtexteditor"plugins/tui.image-editor/ の読み込み元です。
controltoolbar_IMGimageeditor を含みますボタンを隠すには、この設定から imageeditor を取り除きます。
text_ie_title, text_ie_save, text_ie_saving, text_ie_uploadfailed, text_ie_nourl英語ダイアログのタイトル、Save ボタン、アップロード時のメッセージです。言語パックで設定します。

使い方

ダイアログはウィンドウの 90% を占めます。下部のツールは Undo、Redo、Reset、Delete、Delete all、Crop（Custom、Square、3:2、4:3、5:4、7:5、16:9）、Flip、Rotate、Draw、Shape、Icon、Text、Mask、Filter です。Save は右上にあり、その隣のボックスにアップロードエラーを表示します。

Save の動作は、アップロードハンドラーの有無によって変わります。

  • ハンドラーがある場合。画像は、名前が image-<timestamp>.png、型が image/png の File として渡されます。コールバックを呼び出すまでは「Saving...」と表示します。callback(url) は画像の src を指定 URL に変え、ダイアログを閉じます。callback(null, "File too large") は編集内容とダイアログを維持して「Upload failed: File too large」と表示し、再試行できるようにします。ハンドラーが例外を投げた場合も、同じ方法でエラーメッセージを表示します。
  • ハンドラーがない場合。画像の src を data:image/png;base64,... の URL に変え、ダイアログを閉じます。

変わるのは src だけです。画像の width、alt などの属性はそのままなので、16:9 に切り抜いた画像も元の幅属性を維持し、高さは新しい形状に応じて決まります。上記の実行で保存された HTML は次のとおりです（id は、このプラグインではなく、エディターがすべての画像に追加します）。

<p><img src="/uploads/image-1793772809490.png" width="320" alt="Hills under a sun" id="rte-fig-cl2s5j0"></p>

注意点

  • 結果は常に PNG です。JPEG 写真も PNG として返され、通常はサイズが大きくなります。テストでは、640×400 の JPEG が 78 KB の PNG になりました。サーバーで拡張子を制限している場合は、.png を許可してください。
  • ハンドラーがない場合は、allowBase64Images が false でも画像を埋め込みます。2.6.12 の画像エディターは、この設定を確認しません。base64 を無効にした場合（画像の保存を参照）は、アップロードハンドラーも設定するか、controltoolbar_IMG から imageeditor を取り除いてください。
  • ほかのサイトの画像には CORS が必要です。画像は canvas 上に描画するため、別オリジンの画像は Access-Control-Allow-Origin ヘッダー付きで配信する必要があります。ヘッダーがないと画像はダイアログに表示されず、2.6.12 では Save で空の 300×150 の PNG に置き換わります。自分のドメイン、または CORS ヘッダーを送信する CDN の画像だけを編集してください。
  • フィルター。2.6.12 では、フィルターにチェックを入れてもダイアログの画像は再描画されず、保存画像にフィルターが適用されます。テストでは Grayscale と Invert は正しく出力されましたが、Sepia は誤った紫色になりました。保存後の結果を確認してください。
  • キーボード。ツールパレットはキーボードだけでは完全に操作できません。アクセシビリティステートメントに、既知の不足点として記載しています。
  • 外部へのリクエストはありません。エディターを開いて保存する際に読み込んだのは、ページと同じホストの plugins/tui.image-editor/ 内のファイルだけです。プラグインはライブラリの利用統計を無効にしています。

関連情報：画像編集のデモ、ファイルのアップロード、画像の保存、画像ギャラリー。