WYSIWYGエディターに「画像の削除」機能を付ける

    <!-- エディター本体と、ボタンなどの日本語表示 -->
    <link rel="stylesheet" href="Editor/skeditor/skeditor.css">
    <script src="Editor/skeditor/editor.min.js"></script>
    <script src="Editor/skeditor/language.js"></script>

<div id="container">
<form name="form1" method="post" action="wysiwyg_post.php" target="_blank">
  <div id="MyEditor">
    <textarea id="comment" name="comment"></textarea>
  </div>
  <p style="padding: 20px 0 0">
    <input type="submit" class="btn btn-default" value="POST送信テスト">
  </p>
</form>
<script>
  jQuery.event.add(window, "load", function(){
      jQuery('#MyEditor').myEditor({
           'siteUrl'      : '<?= h(url('wysiwyg-add-delete/')) ?>'   // このページがあるフォルダの URL（画像の URL を作るのに使う）
          ,'manager'      : 'Editor/imagemanager/'      // アップロード・一覧を担当する PHP の場所
          ,'img_icon'     : 'Editor/skeditor/icon.png'
          ,'img_loder'    : 'Editor/skeditor/loader.gif'
          ,'ifHeight'     : '400px'
          ,'txHeight'     : '400px'
          ,'uploadFileMax': 1000000                      // 1MB（PHP 側の上限 upmax と合わせる）
      });
  });
</script>

$ext         = strtolower(pathinfo($ufile_oname, PATHINFO_EXTENSION));
if ($ext === 'jpeg') { $ext = 'jpg'; }
$size        = getimagesize("$ufile_tmp");
$error       = 'er';


// 安全対策: 画像以外（.php など）をアップロードされるとサーバー上で実行されてしまうため、画像のみ許可
if(!in_array($ext, ['jpg','png','gif'], true) || $size === false){
  $Message = '画像ファイル(JPG/PNG/GIF)のみアップロードできます';
}elseif($ufile_size > upmax ){
  $Message = 'ファイルサイズが大きすぎます';
}else{
    $hash     = hash('SHA256',$ufile_mine.$ufile_tmp.time().$ufile_oname); //色々くっつけてハッシュに
    $hash     = mb_strimwidth($hash, 0, 8, "", "UTF-8"); //8文字で切り取る
    $FileName = $hash.'.'.$ext; //拡張子を付けてファイル名に
    $new_upload_file  = $upload_Dir.$FileName; //アップロードファイル＋ディレクトリ　

                        b(a)
                            .find("item")
                            .each(function () {
                                var a;
                                a = "" + ("<h4>" + b(this).find("time").text() + "<button id ='" + b(this).find("file").text() + "'>" + editorLanguage.img_Delete + " </button></h4>");
                                a += '<img src="' + b(this)
                                    .find("file")
                                    .text() + '" data-filename="' + b(this)
                                    .find("file")
                                    .text() + '" title="' + editorLanguage.imgList_insert + '" alt=""/>';
                                a += "";
                                b("<li id=" + remove( b(this).find("file").text()) + "></li>")
                                    .html(a)
                                    .appendTo("#edt_img_list ul")
                            })

                    }).always(function(){
                        var ds;
                        /* 画像一覧の「削除」ボタンだけに付ける（ページ内の他のボタンに反応しないように修正） */
                        b("#edt_img_list h4 button").off("click.imgdel").on("click.imgdel", function(){        
                            ds = $(this).attr("id");
                        b.ajax({
                          url: 'wysiwyg_delet.php',
                          type: 'post',
                          data: {'data': ds},
                          timeout: 10000,
                          dataType: 'text'
                        }).done(function(data) {
                        }).fail(function() { 
                        }).always(function() {
                            b('#edt_img_list ul li#'+ remove(ds)).hide(); 
                        })


                       });
                    })

<?php
/*
 * エディターの画像一覧から画像を削除する
 *
 * PHP8.3対応 + 安全対策:
 *  旧版は POST された data をそのまま unlink() していたため、サーバー上の任意のファイルを
 *  外部から削除できてしまう状態でした。wysiwygUpload フォルダ内の画像だけ削除できるように制限しています。
 */
$file = (string)($_POST['data'] ?? '');

$base = realpath(__DIR__ . '/wysiwygUpload');
$path = realpath(__DIR__ . '/' . $file);

if ($base === false || $path === false || !is_file($path)
    || strpos($path, $base . DIRECTORY_SEPARATOR) !== 0
    || !preg_match('/\.(jpe?g|png|gif)$/i', $path)) {
    http_response_code(400);
    exit('invalid file');
}

unlink($path);

<?php if ($comment === ''): ?>
<p class="alert alert-warning">データが送信されていません。<a href="./">エディター</a>で文章を書いて「POST送信テスト」を押してください。</p>
<?php else: ?>
<p>エディターで書いた内容は、<code>$_POST['comment']</code> に <strong>HTML の文字列</strong>として届きます。</p>
<p>安全のため、ここでは HTML として表示せず、<code>htmlspecialchars()</code> で<strong>ソースのまま</strong>表示しています。</p>
<pre><?= h($comment) ?></pre>
<?php endif; ?>