tinymce＆jbimagesの組み合わせで画像が上手く扱えない場合の対処法

世の中には「簡単に自分で自由に色々出来る」みたいな矛盾した要求を持っている人が結構います。簡単と自由、色々出来るというのは矛盾するものなんですが、こういったことをシステムに要求する人が後を絶ちません。

そんな矛盾を理解できない面倒な客に当たった際に、頻繁に入れることになるのが「tinymce」です。

Wordpressみたいな編集機能を持ったjsライブラリで、システムの管理画面的なところに組み込めば、HTMLタグを適当に生成してくれる、ビジュアルエディター的なものを実現出来る優れものです。これで「何でも自由に出来ますよ！」とお茶を濁した経験のある方は少なくないでしょう。

tinymceの画像利用機能は、デフォルトではURL直打ちと中々厳しい仕様なので、画像アップロード機能を使うためにjbimagesを入れるのが定番になっています。が、jbimagesの初期設定が結構微妙なので、そこではまる人も多いと思います。

ということで、今日はtinymceの画像周りの設定について解説します。

まずはjbimagesのconfigを設定する

jbimages > config.phpを開きます。
40行目付近に、画像のアップロード箇所を設定する部分があるので、そこを編集。

upload_pathは環境が変わることも考えて(テスト環境とかローカルとか)、$_SERVER[‘DOCUMENT_ROOT’]を使って絶対パスで指定しておきましょう。
img_pathは相対パスで指定していますが、次に説明することをやらないと大惨事になります。

initでrelative_urlsをfalseに設定

tynymceを利用する際は、jsファイルを読み込んだ後「tinymce.init」を実行する必要があります。
が、これをそのままにしておくと相対パスの扱いが偉いことになります。initのパラメータに「relative_urls : false」を追加してください。

relative_urlsをfalseにしないと、画像アップロード時、その画像のパスが「../images」みたいな感じで記録され、表示時にページの階層によっては出ないという事態が起こります。また、場合によっては編集時にも画像が表示されなくなります。

relative_urlsをfalseにすることで、ちゃんと「/images」の形で保存されるようになります。

• 技術・知識