jQuery製のWYSIWYGエディタ「trumbowyg」に画像挿入機能を入れてみた

2024.06.04 09:00
2024.06.04 11:08
jQuery製のWYSIWYGエディタ「trumbowyg」に画像挿入機能を入れてみた

前回紹介したjQuery製のWYSIWYGエディタ「trumbowyg」に画像を挿入できる機能を入れてみました。このライブラリはjavascriptなので、当然画像の保存機能はありません。ということで、その部分はlaravelに任せました（今回はアップロード機能の解説は割愛）

では実際にやっていってみます。
まずは前回と同じ状態まで持っていきます。

そしてアップロードの追記をします。完成形はこんな感じです。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
  <link rel="stylesheet" href="./js/ui/trumbowyg.min.css">

  <style>
  </style>
</head>

<body>

  <textarea id="editor" name="body" value="テストです。<img src=''>"></textarea>

<script src="./js/jquery-3.7.1.min.js"></script>
<script src="//rawcdn.githack.com/RickStrahl/jquery-resizable/0.35/dist/jquery-resizable.min.js"></script>
<script src="./js/trumbowyg.min.js"></script>
<script src="./js/plugins/upload/trumbowyg.upload.min.js"></script>


<script type="text/javascript">
$(function(){
    $('#editor').trumbowyg({
      lang: 'ja',
      autogrow: true,
      btnsDef: {
        image: {
          dropdown: ['upload'],
          ico: 'insertImage'
        }
      },      
      btns:[
        [
          'viewHTML',
          'undo',
          'redo',
          'strong',
          'link',
          'image',
        ]
      ],
      plugins: {
        upload: {
            serverPath: '/upload',
            fileFieldName: 'file',
            headers: {
                'X-CSRF-TOKEN': $('input[name="_token"]').val(),
            },
        }
      }
    });
});
</script>
</body>

</html>

デモ画面はこんな感じ（※デモではアップロードはできません）
では追加した部分を見ていきます。

このエディタは、機能ごとにファイル単位で切り出されているため、
使いたい機能があれば都度読み込んで使う形式のようです。
わかりやすくていいですね。
ということで、upload機能を読み込むために以下を追加。

<script src="./js/plugins/upload/trumbowyg.upload.min.js"></script>

次にボタンを増やします。
まず独自ボタンを定義します。

btnsDef: {
  image: {
    dropdown: ['upload'],
    ico: 'insertImage'
  }
},

次に定義したボタンの記述。

'image',

これでボタンが追加されました！
次はアップロード処理を書きましょう。

upload: {
    serverPath: '/upload',
    fileFieldName: 'file',
    headers: {
        'X-CSRF-TOKEN': $('input[name="_token"]').val(),
    },
}

serverPathにlaravelのアップロードパスを書いてあげます。
クロスドメイン対策として、headerにトークンをのせています。
これで、画像追加ボタンを押した時にLaravel経由でアップロードされ、
エラーがなければエディタに画像が表示されます。

今回は以上です！