[CakePHP]WordPressよりもckeditor/ckfinderを使ってみた

[CakePHP 2.2.3]

1月から、「みんなの英語ひろば」で記事コンテンツを配信し始めました。

http://eigohiroba.jp/t

当初、ベースのシステムはCakePHP、記事コンテンツWordPressと分けていたのですが、この2つのシステムの相性がよろしくないので、記事コンテンツ向けにWordPressはやめて、普通にCakePHPで作ることにしました。

3日程で作ることができたのですが、、今回ご紹介するckeditorとckfinderというツールのおかげでかなり楽でした。こちらはjavascriptでテキストエリアに簡単に機能を付加できる多機能エディタで、本当に、かなりのスグレモノです。

ちなみに、ckeditorが本体で、ckfinderは追加機能で、画像アップロード機能を追加するのに使いました。

2013 01 27 1831

導入方法は簡単

CakePHPの場合、それぞれダウンロードしたファイルを、以下に配置します。

app/webroot/js/ckeditor/

app/webroot/js/ckfinder/

そして、使用したいビューの中で、以下のように呼び出すだけです。

[php]
<?php $this->Html->script(‘ckeditor/ckeditor’, array(‘inline’ => false));?>
<?php $this->Html->script(‘ckfinder/ckfinder’, array(‘inline’ => false));?>

<?=$this->Form->input(‘body’, array(‘class’=>’ckeditor’, ‘id’=>’editor1’))?>
[/php]
[js]
<script type="text/javascript">
if (typeof CKEDITOR != ‘undefined’) {
var editor = CKEDITOR.replace( ‘editor1’ );
CKFinder.setupCKEditor( editor, ‘/js/ckfinder/’ ) ;
}
</script>
[/js]

実装例

2013 01 27 1841

ckeditorを読み込んだ場合、テキストエリアがこのように変わります。

2013 01 27 1842

エディタ上にあるボタンのうち、「イメージ」ボタンをおすとこのようなウインドウが開きます。

2013 01 27 1843

アップロード機能(ckfinderがちゃんと読み込まれていればこのアップロードタブが出てきます)

2013 01 27 1844

さらに、「イメージ」ウインドウから過去にアップロードした画像一覧を見ることもできます。
こちらもckfinderの機能です。

CakePHPとWordPressを一緒に動作させると2つのシステムを管理するのが大変になってしまいます。簡単なブログ機能で良い場合、ckeditorを候補に入れてみるのはいかがでしょうか。

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.