Ajax + モーダル(Bootstrap4)でHTMLコードプレビュー機能 #PHP

なぜかというと

HTMLタグも含めて投稿・表示できるコンテンツを作成しようとしていて、
「公開前に（HTMLの）プレビューが出来る機能が欲しい」という要望をいただきまして、めんどくさい。
PHPにstrip_tags()という便利な関数がありますが、
下書き機能は、仕様がややこしくなるのでイヤだ、社内システムなので。
ページ遷移して戻ってくるとか子ウィンドウ出現は、今時流行らないですね。

なので、Ajax + モーダル(Bootstrap)です。
試してみました。

Ajaxって以前から少しづつ使って来ましたが、
どうにも自分の感覚的にイマイチなので、積極的にはやって来ませんでした。
（「データ操作は全てサーバーサイドでやるべき」というWeb開発大昔の刷り込み）
という事もあり、先々の備忘の為に書き記しておきます。

参考サイト

HTML

余分なタグやクラスなどは全て省いています。

<!-- フォーム -->
<textarea id="doc">
<div class="text-danger">Bootstrapのクラスも使える</div>
<a href="#">リンク</a><br>
<p>段落</p>
<ul>
  <li>リスト</li>
  <li>リスト</li>
</ul>
<ol>
  <li>リスト</li>
  <li>リスト</li>
</ol>
<table border="1">
  <tr><th>項目</th></tr>
  <tr><td>値</td></tr>
</table>
<h1>例えばh1タグはストリップされる</h1>
</textarea>

<!-- ボタン -->
<button type="button" id="modalButton" >HTMLプレビュー</button>

<!-- モーダル -->
<div class="modal fade" id="modal01" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body text-left" id="modalHtml"><!-- text-leftしないとなぜか右寄りへ？ -->
      </div>
    </div>
  </div>
</div>

JavaScript


$(function(){
    $("#modalButton").on("click", function(){//ボタンが押された時
        var doc = $("#doc").val();//フォームのtextareaからデータ取得
        $.ajax({
            type: "POST",//メソッドはPOST
            url: "htmlpreview.php",//データを渡すPHPファイル名
            data: { "doc" : doc },//送信データ定義
            dataType : "json"//データタイプはJSON
        }).done(function(data){
            $("#modalHtml").html(data.doc),//PHPからデータを受取り⇒モーダルへ渡す
            $("#modal01").modal("show")//モーダル出現
        }).fail(function(XMLHttpRequest, textStatus, error){//エラー処理
            alert(error);
        });
    });
});

PHP（htmlpreview.php）

allowable_tags（ストリップしないタグ）は、div a p br ul ol li table tr th td のみとしています。

//POSTデータをstrip_tags()
//allowable_tagsは<div><a><p><br><ul><ol><li><table><tr><th><td>のみ
$doc = strip_tags($_POST['doc'], "<div><a><p><br><ul><ol><li><table><tr><th><td>");

//配列へ収納
$list = array("doc" => $doc);

//出力
header("Content-type: application/json; charset=UTF-8");
echo json_encode($list);

exit;

せっかくサーバーへデータを送ったので、除染やらチェックやらもやるべきですね。