ckeditor+ckfinderで画像アップロードエディタの設置
技術的なお話になってしまいますが、
かなり手こずってしまい、忘れないように書き留めておくことにしました。
タイトルの通り、「ckeditor+ckfinderで画像アップロードエディタの設置」になりますが、
WordpressなどのCMSではプラグインとして設置ができ、画像の挿入などはCMS自体の機能が備わっており、
特に悩むことなく使用しておりましたが、
プラグインとしてエディタを追加できない部分に設置したい時など、
ckeditorだけを追加した時に、画像挿入ボタンを選択すると、下記の画面が出てきて、
「画像の参照ができないじゃん！」ってことを思った方は多いのではないでしょうか。
そこで、「ckfinder」を追加してあげることで解決に至りました。
設置ができると以下のようになります。
———————————————————-
設置方法
———————————————————-
1.まずは、必要なファイルをダウンロード
■CKEditor
http://ckeditor.com/
→上記URLがオフィシャルですが、上記の画像のプロパティを実装するには、下記のURLからのダウンロードが必要でした。
https://github.com/ckeditor/ckeditor-releases
※他の紹介サイトでは、「Standard」をダウンロードすれは良いと書いているサイトもありましたが、これでは完全な実装ができませんで、、、
「Standard-all」という拡張性のあるものが上記のリンクからダウンロードできます。
■CKFinder
http://ckfinder.com/
※こちらの「free trial」からダウンロードができます。
2.ファイルをアップロードしたら、次の記述を挿入。
※/js/cke….の部分はルートです。http://…も可能。
3.表示したい箇所に次の記述を挿入。
※divの代わりにtextarea等でも可能です。
※最後のscriptはdivの後に入れないと稼動しません。（私はここでハマりました^^;）
これで設置が完了です。