[WYSIWYG]TinyMCEの画像編集機能(imagetools)代替としてToast UI Image Editorを導入しました #2204
Conversation
| } | ||
|
|
||
| const imageUrl = selectedNode.getAttribute('src'); | ||
| const imageFileName = selectedNode.getAttribute('alt') || 'edited_image.png'; // ファイル名に拡張子を含めると良いでしょう |
There was a problem hiding this comment.
処理解説に資さないAIのサジェストコメントは除去しといてください。
| @@ -0,0 +1,233 @@ | |||
| import { locale_ja_JP } from './locale_ja_JP.js'; | |||
There was a problem hiding this comment.
※指摘行数とは関係ないです。
困り事
そちらで再現しますか？
原因一緒かわからないけど、下記２環境で同操作でエラーになり、いずれもメッセージ違いです。
- https://pre.osws.jp/tmp で適用ボタン押下でエラーになった。
- ローカルでも適用ボタン押下でエラーになった。
再現手順
- 固定記事の編集ボタン押下
- 画像の挿入ボタン押下
- ファイルをブラウズボタン押下＆画像を選択
- 保存ボタン押下
- （差し込まれた画像を選択）画像を編集ボタン押下
- そのまま適用ボタン押下
参考１（https://pre.osws.jp/tmp）
参考２（ローカル）
参考３（ローカルのlaravel-log）キャビネット等ではアップロードできるので書き込み権限ナシは考えづらい気がしている。「8.」って拡張子がちょん切れてるのは正常？
[2025-05-30 10:42:23] production.ERROR: fopen(C:\sites\connect_cms_php_8030_tcrp\htdocs\storage\app\uploads/1/8.): Failed to open stream: Permission denied {"userId":1,"exception":"[object] (ErrorException(code: 0): fopen(C:\\sites\\connect_cms_php_8030_tcrp\\htdocs\\storage\\app\\uploads/1/8.): Failed to open stream: Permission denied at C:\\sites\\connect_cms_php_8030_tcrp\\htdocs\\vendor\\league\\flysystem\\src\\Adapter\\Local.php:157)
参考４（UP対象の画像）
There was a problem hiding this comment.
報告ありがとうございます。それぞれ不具合の原因が違いました。
- https://pre.osws.jp/tmp
- 原因: ディレクトリインストールで画像アップロードのPOST先URLが正しく設定されない
- 対応: アプリのルートからURLを指定する
- masaton0216さんのローカル環境
- 原因: （おそらく）拡張子なしでファイルが保存されるので、.(ドット)で終わるファイル名をWindowsが扱えない
- 対応: 拡張子を含めたファイル名で保存する
There was a problem hiding this comment.
どちらの環境でも問題ないように修正したと思います。
ご確認いただけますか？
| return; | ||
| } | ||
|
|
||
| const imageUrl = selectedNode.getAttribute('src'); |
There was a problem hiding this comment.
対象がない状態で画像編集エディタを開く必要はないと思うので、imageUrlが空や無効の場合のアーリーリターンを入れといてください。
再現例）下記タグで9のファイルをアップロード管理で削除
<p><img src="/file/9"></p>
There was a problem hiding this comment.
画像が取得できない場合にメッセージを表示して画像編集のダイアログを表示しないようにしました。
|
|
||
| // FormDataを作成して画像データを追加 | ||
| const formData = new FormData(); | ||
| const fileName = selectedNode.getAttribute('alt') || `edited_image_${Date.now()}.png`; |
There was a problem hiding this comment.
altが設定されてないと拡張子pngで統一されちゃう？
オリジナルのファイル名や拡張子を継承した処理にできないかしら？
There was a problem hiding this comment.
mimeタイプから拡張子を取得するように修正しました。
おそらく透過画像が作られることから、元画像がJPGであってもPNG形式になるようです。
拡張子が渡らず.(ドット)終わるファイルができあがってOSが扱えないよう
POST先のURL指定誤り
|
@masaton0216 |
概要
WYSIWYGエディタに、オープンソースの画像編集ライブラリであるToast UI Image Editorを導入し、高機能な画像編集機能を追加しました。
変更の目的
TinyMCE6において、従来提供されていた画像編集機能（imagetools）がオープンソースとして公開されなくなりました。
この変更は、Connect-CMSにおいて同等の画像編集機能を提供することを目的としています。
変更内容
オープンソースの「Toast UI Image Editor」をWYSIWYGエディタに組み込みました。
これにより、以下の主要な画像編集機能が利用可能になります。
テスト
以下の項目について、動作確認を実施しました。
レビュー完了希望日
6/7
関連Pull requests/Issues
参考
DB変更の有無
無し
チェックリスト
OW-2572