CakePHP TinyMCE Pluginを使ってみた

CakeDC謹製のWYSIWYGエディタがあるとのことで、ダウンロードして使ってみました。


CakePHP TinyMCE Plugin

※オープンソースとしてgithubでも公開しているようなので、そちらからもダウンロード化。現在はver.1.0.0

CakePHPの対象バージョンはCakePHP 1.3のみとのことなので、2系に使えないのは残念。

使い方覚書

1.ダウンロード

2.解凍後、CakePHPに差分を取り込む

3.Controllerにhelperを追加

class IndexController extends Controller {

	public $name = "Index";
	public $uses = array();
	public $helpers = array('Session','TinyMce.TinyMce','Form','Javascript');

	/**
	 *
	 */
	public function index() {
           //hoge
	}
}

4.Viewに諸々の記述を追加

<?php
echo $this->TinyMce->editor(array(
	'language' => 'ja',
	'mode' => 'textareas',
	'theme' => 'advanced',
	'plugins' => 'spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template',
	'theme_advanced_buttons1' => 'search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor|,fullscreen,tablecontrols',
	'theme_advanced_buttons2' => '',
	'theme_advanced_buttons3' => '',
	'theme_advanced_buttons4' => '',
	'theme_advanced_toolbar_location' => 'top',
	'theme_advanced_toolbar_align' => 'left',
	'theme_advanced_statusbar_location' => 'bottom',
	'theme_advanced_resizing' => 'true',
	'template_external_list_url' => '/tiny_mce/js/tiny_mce/template_list.js',
	'external_link_list_url' => '/tiny_mce/js/tiny_mce/link_list.js',
	'external_image_list_url' => '/js/tiny_mce/image_list.js',
	'media_external_list_url' => '/tiny_mce/js/tiny_mce/media_list.js',
));
?>
<div>
<?php echo $this->Form->create('Tiny');?>
	<fieldset>
 		<legend>CakePHP TinyMCE Plugin Test</legend>
	<?php
		echo $this->Form->input('textarea',array('type'  => 'textarea'));
	?>
	</fieldset>
<?php echo $this->Form->end(__('SUBMIT', true));?>
</div>

5.アクセスする

TinyMce->editorの中にはTinyMCEの設定を記述するのだけど、ここの設定内容については通常通りjsからTinyMCEを利用する設定と同じで大丈夫っぽい。

※Documentationを見ると、$this->TinyMce->editor(array(‘theme’ => ‘advanced’));だけで行けるよ!みたいなことが書いてあったが、実際にはうまくいかず思ったより時間を食った。。なんとなくmodeの設定がキモだった気がする。