スマホ投稿にも使えるWYSIWYGエディッタsummernote 画像投稿も可[webの話]

スマホ投稿にも使えるWYSIWYGエディッタsummernote 画像投稿も可

webの話

システム担当におむすび17号です。

summernoteとは
bootstrapを使ったWYSIWYGです。

今回はスマホでも簡単にブログ投稿が出来るように
WYSIWYGと画像投稿を併せ持つエディッター

summernoteの導入方法を紹介します。

まずあじめに

ここからJSを入手してください

https://summernote.org/

設定は以下です。

<link href="/js/summernote.css" rel="stylesheet" type="text/css">
<script src="/js/summernote.min.js"></script>
<script src="/public/js/lang/summernote-ja-JP.js"></script>
<script>
$('#summernote').summernote(
    height: 300,
);
</script>

高さを与えてあげないといけませんので

とりあえず300を与えていますが

任意で設定可能です。

使用する際には上記コードを入れておき下記htmlを例とします。

<textarea class="form-control" id="summernote" name="summernote" rows="5">

これで普通に動作をするかと思います。

問題は画像投稿です。

デフォルトで画像投稿機能があります。

しかしこれで投稿するとサーバ側にアップロードするのではなく

Base64で保存されます。

まぁ開くのも重いし、画像はちゃんと

サーバ側に保存出来るようにします。

下記コードを入れます。

        <script>
            $(document).ready(function() {
                $('#summernote').summernote({
                    height: 300,
                    callbacks: {
                        onImageUpload : function(files, editor, welEditable) {
                
                             for(var i = files.length - 1; i >= 0; i--) {
                                     sendFile(files[i], this);
                            }
                        }
                    }
                });
                
                
                function sendFile(file, el) {
                var form_data = new FormData();
                form_data.append('file', file);
                $.ajax({
                    data: form_data,
                    type: "POST",
                    url: 'uploader.php',
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(url) {
                        $(el).summernote('editor.insertImage', url);
                    }
                });
                }
                    
            });
        </script>

解説すると

最初に画像をAjaxで全て抽出しています。

そしてその配列を「uploader.php」に送り込んでいます。

ここででuploader.phpでは何処に保存するのかを指定してあげます。

以下はPHPです。

$dir_name = "fileupload/".date("ymdhis");
move_uploaded_file($_FILES['file']['tmp_name'],$dir_name.$_FILES['file']['name']);
echo $dir_name.$_FILES['file']['name'];

dir_nameは行き先とファイル名が重複しないように数字を付与して分けています。

これでsummernoteで画像がサーバ側に保存出来るようになります。

ちなみに補足として

画像サイズが極端に大きい画像などもありますので

管理画面にも、サイトにもcssでmax-widthを指定してあげましょう。

見た瞬間にはみ出した画像がなくなります。

summernoteでは

スマホで全画面にしてエディッターを使ったり出来るし

ckfinderのように画像一覧などもなくシンプルに投稿のみなので

個人的にはおすすめのエディッターです。

ではでは

大卒後めでたくIT大手起業に就職するも業績不振により半年で解雇。 24歳でIT会社を起業するも失敗。その後おとなしく制作会社で5年働き18号を巻き込んでおむすびを始めました。利用する人が少しでも幸せになるwebサービスを生み出していきます。

更新日：2016-08-15

コメントを投稿する

投稿名
コメント内容
画像認証	[ 認証画像を変える ]

サイト内のどのボタンを押したか計測する方法

作業時間3分！WEBクリップアイコンを実装だ！

もしかしてWebの書き出し、まだpng…!?

アナリティクスデータ無期限保存期間を5月25日まで

３分でwebサイトの各端末表示確認が出来るサービス「Sizzy」

アナリティクスを登録する際に絶対しておきたい３つのこと