HTML 等の知識が無くても Web ページ上でコンテンツを作成・編集できる、JavaScript 製の WysiWyg エディタって便利なものがあります。TinyMCE あたりがデファクトスタンダードかと思いますが、最近これを使って画像をサーバにアップロードしながら貼り付けたいっていう要望がありまして、「でも大変だよ、ぶつぶつ」等と二の足を踏んでいたら奨められたのがこれ、JustBoil.me TinyMCE Images Plugin、略して jbimages。
なんだか便利そうですが、どうも提供元サイトにライブデモの類が見当たらないのでちょこちょこっと試してみたです。こんな感じ↓
▼ツールバーの最後に画像アップロードボタンが追加されてます
▼ボタンをクリックするとアップロード用のモーダルダイアログが
▼ダイアログから画像をアップロードするだけで貼り付け完了
▼WysiWyg エディタなのでリサイズもらくらく
うむ。いー感じです。画像アップロードは HTML5 とかじゃなくて iframe でフォームを埋め込んで実現してるので、モダンブラウザじゃなくても広く使えそう。
セットアップ手順は提供元サイトにも明記されてますが、念の為邦訳を。
- ここからダウンロード・解凍して出来た jbimages を、TinyMCE エディタのプラグイン格納場所( tinymce/js/tinymce/plugins/ あたりがデフォ)にコピー。
- jbimages/config.php 中の画像格納場所を適宜、自分の環境に合わせて書き換える。尚、この格納場所は httpd が書き込みできるようにパーミッションの設定をお忘れなく。
- Javascript コード中の TinyMCE 設定で jbimages プラグインを明記(これも提供元サイトにサンプルコード有)。
サーバ側のアップロード処理は、どうやら CodeIgniter アプリケーションとして実装されている模様。なので、カスタマイズもし易い…かもしれませんw
さて、これを当方のシステムに採用できるかというと、ウチのコは画像をサーバのローカルディスクに保存するだけという単純なものじゃないので、うーん、ちょっと、というか大量に手を入れることになりそうだなぁ…
