summernoteで画像をアップロード

summernoteで画像をアップロードする方法を調べてみたが情報が古く自分で実装したのでまとめ。
画像をアップロードしたらエディタに画像を反映させるところまで解説します。

環境
summernote v0.8.12
XAMPP
PHP 7.3

読み込むファイル

<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js -->
<link href="summernote-master/dist/summernote.css" rel="stylesheet">
<script src="summernote-master/dist/summernote.min.js"></script>
<script src="summernote-master/dist/lang/summernote-ja-JP.js"></script>

<form method="post" enctype="multipart/form-data" action="">
  <textarea id="summernote" name="editordata"></textarea>
<input type="submit" name="send" value="送信する">

bootstrapはCDNでsummernoteは日本語で読み込んでいます。

画像ファイルのアップロード部

$(document).ready(function() {
    $('#summernote').summernote({
      lang: 'ja-JP',
        height: 200,
        callbacks: {
            onImageUpload: function(files) {
                sendFile(files[0]);
            },
        }
    });
});

function sendFile(file) {
    data = new FormData();
    data.append("file", file);
    $.ajax({
        data: data,
        type: "POST",
        url: "upimg.php",
        cache: false,
        contentType: false,
        processData: false,
    }).done(function(data, textStatus, jqXHR){
        $('#summernote').summernote('insertImage', 'http://localhost/develop.git/img/' + file.name);
    });
}

sendFileに渡すデータはfileだけなのとsummernoteで画像をアップしたらエディタに反映させるのはinsertImageで画像URLを指定しています。
その他は先人の知恵をお借りしました。

upimg.php

    move_uploaded_file($_FILES['file']['tmp_name'], "img/". $_FILES['file']['name']);

画像をアップしているだけなので
ファイル名が重複しないようしたりリサイズなどはこのファイルでするようにしましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください