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

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

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

webの話


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

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

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

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

まずあじめに

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

 

http://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

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

関連記事

SEO Meetupに参加してわかったSEOに大切な5つの事
1分で出来る簡単にランダムバナーを設置する方法「jQuery」
l.instagram.com / referral ってなんだろう
たった3分で実装出来るJqueryで簡単スマホ用メニュー実装!
KPI・KSF・KGIをすっごく簡単に解説
情報量が多いページから一瞬で知りたい情報を見つける方法

人気記事

CSSの背景画像でスライドショーを実装【jQuery】
分かりやすい地図をデザインする為に押さえておきたい4つのポイント
夏っぽい色のバナーデザイン
市立吹田サッカースタジアム観戦の感想
TBSラジオクラウドの保存方法
(direct) / (none) が急に増えた!



ブログ

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

webの話




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

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

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

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

まずあじめに

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

 

http://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
コメントを投稿する
投稿名
コメント
内容
画像認証 CAPTCHA Image

[ 認証画像を変える ]


関連記事

「ブログを書こう」って言う業者おおすぎ
作業時間3分!WEBクリップアイコンを実装だ!
自分で出来る!MEO(ローカルSEO)でやっておくべきこと6つ
SEOの時代は終わり?店舗型に向いていると思うweb集客
もしかしてWebの書き出し、まだpng…!?
アドワーズ代行詐欺?怪しい営業があったのでgoogleに聞いてみた!


人気記事

CSSの背景画像でスライドショーを実装【jQuery】
分かりやすい地図をデザインする為に押さえておきたい4つのポイント
夏っぽい色のバナーデザイン
市立吹田サッカースタジアム観戦の感想
TBSラジオクラウドの保存方法
(direct) / (none) が急に増えた!

ブログ