Summernoteに画像ファイルをアップロードしてURLを取得する方法

ウェブ

Summernoteは、オンラインでWYSIWYGエディターを作成するのに役立つJavaScriptライブラリです。

Summernote - Super Simple WYSIWYG editor
Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.

デモもままでも画像ファイルをアップする事はできますが、以下のようにIMGタグの要素に直接バイナリデータが記載される形になり、HTMLソースの視認性を悪くし更にデータの容量が肥大してしまいます。

<img src="data:image/jpeg;base64,/9j/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBBAQEBAQEBAQEBAQEBAQEBAQEB・・・・">

この記事では画像ファイルをアップした時にサーバへ保存し、更に以下のように保存した画像ファイルのURLをIMGタグのパスに設定する方法を説明します。

<img src="https://www.example.com/images/sample.png" />

準備

HTMLファイルを以下のようにします。

<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>example</title>
<link href="http://www.example.com/assets/bootstrap-3.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />	
<link href="http://www.example.com/assets/summernote/summernote.min.css" rel="stylesheet" type="text/css" />
</head>

<body>

<textarea name="content" cols="40" rows="10"  id="summernote"></textarea>

<script src="https://www.example.com/assets/jquery-1.12.4/jquery.min.js" type="text/javascript"></script>	
<script src="https://www.example.com/assets/bootstrap-3.4.1/js/bootstrap.min.js" type="text/javascript"></script>  
<script src="https://www.example.com/js/script.js" type="text/javascript"></script>	
<script src="https://www.example.com/assets/summernote/summernote.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#summernote').summernote({
    callbacks: {
      onImageUpload: function(files) {
        data = new FormData();
        data.append("file", files[0]);
        $.ajax({
          data: data,
          type: "POST",
          url: "https://www.example.com/upload.php",
          cache: false,
          contentType: false,
          processData: false,
          success: function(url) {
              //アップロードが成功した後の画像を書き込む処理
              $('#summernote').summernote('insertImage', url);
          }
        });
      }
    }
  });
});
</script>

</body>

</html>
注意

summernoteは,jQueryライブラリやBootstrapのバージョンの依存性が高いライブラリです。

ライブラリ違いによりsummernoteのツールアイコンのボタンは表示されるが文字(記号)が表示されない事はよくある症状ですので、注意しましょう。

次にサーバ側のスクリプトを用意します。

<?php

$files = $_FILES['file'];

// ファイルの保存処理を記述

echo 'https://www.example.com/images/sample.png';

exit;
?>

画像ファイルの保存処理は割愛させていただきましたが、簡単にできます。



スポンサーリンク
ウェブ
takehoをフォローする
スポンサーリンク
たけほのへなちょこ台帳

コメント

タイトルとURLをコピーしました