29. 3月 2012 · TinyMCEでMCImageManagerを使わずに画像をアップロードして使う方法 はコメントを受け付けていません。 · Categories: WEB制作 · Tags: ,

Yellow post it notes on the corkboard

結論としては、下記のccSimpleUploaderを使います。これは無料です。

Very Simple File Upload Plugin for TinyMCE 3.x Development | Creative Code Design

ccSimpleUploader – Very Simple File Upload Plugin for TinyMCE 3.x | Creative Code Design

作者の言葉を意訳すると「とにかくシンプルなものが欲しかったんだよ!」に尽きると思います。
本当に最低限の機能しかなく、「対象ファイルを選んでアップロードしてURLを貼り付けるだけ」です。

設定の仕方は簡単で2つ目のURLにあるとおりなのですが、ざっくり意訳。advancedテーマを利用していることが前提でしょう。

1.TinyMCEのプラグイン設定箇所にccSimpleUploaderを追加。

plugins: “ccSimpleUploader,safari,pagebrea..”

2.ボタンを表示させたい箇所にccSimpleUploaderを追加。

theme_advanced_buttons3: “ccSimpleUploader,ablecontrols,|,hr,…”

3.ファイルのアップロードフォルダ(たとえばuploads)をパーミッション777で確保。

4.TinyMCEの設定に下記を含める。これが今回一番ややこしいポイントかも。

relative_urls : false,
file_browser_callback: “ccSimpleUploader”,
plugin_ccSimpleUploader_upload_path: ‘../../../../uploads’,
plugin_ccSimpleUploader_upload_substitute_path: ‘/uploads/’,

plugin_ccSimpleUploader_upload_path は、ccSimpleUploaderディレクトリを基点としたuploadsまでの相対パス

plugin_ccSimpleUploader_upload_substitute_pathは、ブラウザでアクセスできる絶対パス。アップロードした写真のsrcが src=”/uploads/uploaded_file.jpg” という風にテキストエリア内に入るためのもの。

これで、めでたくアップロード機能は利用できます。

ボタンも表示された!ポップアップウインドウが出た!よし、ファイルを選択・・・って、あれー?

Parse error: parse error, unexpected ‘{’ in …

なんてPHPエラーが表示されている方は、環境がPHP4だからです。私もです。

tiny_mcepluginsccSimpleUploaderuploader.php を確認すると、該当箇所にtry~catch文が書かれています。これはPHP5からの機能です。

ここでカッコ良く代替方法でも書ければ良いのですが、今回はコメントアウトで対応。OKWaveの2006年の回答で set-error-handler が参考になるかもとありましたよ。

http://okwave.jp/qa/q2487018.html
http://www.php.net/manual/ja/function.set-error-handler.php

これでひととおりのアップロードは可能です。英語がやっかいなら稼動中のエンコードにあわせて日本語入れちゃってもいいんじゃないでしょうか。

アップロードすると、URL(アップロードファイルの絶対パス)だけがピヨッと投稿欄に挿入されます。

ただ、本来の目的は写真をアップロードして使いたい。けれどMCImageManagerほどの機能はいらない。ならばカスタマイズするしかないでしょう!

てことで、

こんなんなりました。投稿欄に挿入するのはイメージタグで、アップロード済みの写真一覧を表示し、そこからも追加できるようにしました。ページング処理とかしていないので、最新の100件だけ。

そしてセキュリティは考えてないので、開発元と同じく「自己責任で使ってください」。
シンプルなスクリプトなので、ちょっと手を加えればセキュリティもページングも、画像以外のもの(PDFとか)にも対応できると思います。

22. 2月 2012 · 2 comments · Categories: WEB制作 · Tags: ,

jQueryの1.4以上から遅延処理を行なうdelayが登場していることを知って、遅延処理ならさくっと終わるじゃーんと思って入れたものの動かなかったでござる。

理由は、delayはアニメーションにしか効かないから。もともとのキュー(queue)がアニメーションするものにしか有効でないためだろう。だから、「何秒後にこのクラスを変える」というのがdelayではできなかった。

ということで、animateを使うことに。

opacityを1.0、つまり見た目は変更せずに1秒経ったあとでcompleteの関数を実行。
hoverはマウスオーバーとマウスアウトが交互にイベント実行されるので、toggleにしておけばひとつの関数で済む。

実装したのは結局もうひとつfunction作って、

$(this).clearQueue().stop().removeClass(‘hover_submn’);

としたけど。clearQueueとstopはどちらかで良いかも。