忍び歩く男 - SLYWALKER

大阪のこっそりPHPer

CakePHP1.2RC3でFCK Editorを使う

2009-01-06: コメントでご指摘を受け修正

以下を参考にしてみた。
Using FCKeditor with CakePHP (Articles) | The Bakery, Everything CakePHP

まずは設置

FCKeditor - The text editor for Internet
ここからダウンロード(使ったのは2.6.3)
解凍して
app/webroot/js/fckeditor

以下のいらないファイルを削除

  • app/webroot/js/内の_* のファイルやフォルダ
  • app/webroot/js/fckeditor/fckeditor.*の拡張子がphp以外のファイル
  • app/webroot/js/fckeditor/editor/filemanager/connectors/のphp以外のフォルダ

以下のファイルをコピー

  • app/webroot/js/fckeditor/fckeditor.php -> vendors/fckeditor/fckeditor.php
  • app/webroot/js/fckeditor/fckeditor_php4.php -> vendors/fckeditor/fckeditor_php4.php
  • app/webroot/js/fckeditor/fckeditor_php5.php -> vendors/fckeditor/fckeditor_php5.php

FckHelperを作る

参考にしたものより、FormHelperのinputに近づけてみた。
app/views/helpers/fck.php

<?php
App::import('Vendor', 'FCKeditor', array('file' => 'fckeditor/fckeditor.php'));

class FckHelper extends AppHelper { 
	
	var $helpers = array('Form');
	
	function textarea($fieldName, $options = array())
	{
		$defaultOptions = array(
			'value' => '',
			'width' => '100%',
			'height' => '300',
			'toolbar' => 'Cake',
		);
		$options = array_merge($defaultOptions, $options);
		
		$fieldName = explode('.', $fieldName);
		$editor_name = "data";
		if (count($fieldName) > 1) {
			foreach ($fieldName as $key) {
				$editor_name .= "[{$key}]";
			}
		} else {
			$model = $this->Form->params['models'][0];
			$editor_name .= "[{$model}][{$fieldName[0]}]";
		}
		
		$oFCKeditor = new FCKeditor($editor_name) ;
              /* コメント受けて変更 */
              /* $oFCKeditor->BasePath = $this->url('/js/fckeditor/') ; */
              $oFCKeditor->BasePath = $this->webroot('/js/fckeditor/') ;
		$oFCKeditor->Value = $options['value'];
		$oFCKeditor->Width = $options['width'];
		$oFCKeditor->Height = $options['height'];
		$oFCKeditor->ToolbarSet = $options['toolbar'];

		return $oFCKeditor->CreateHtml();
	}
	
	function input($fieldName, $options = array())
	{
		$options = array_merge($options, array('type' => 'textarea'));
		$out = $this->Form->input($fieldName, $options);
		$out = preg_replace('/<textarea[^>]*>[^<]*<\/textarea>/', $this->textarea($fieldName, $options), $out);
		return $out;
	}
}
?>

FCK Editor自体の設定

app/webroot/js/fckconfig.js
app/webroot/js/fckeditor/fckconfig.jsにツールバーを追加
これはお好みで

FCKConfig.ToolbarSets["Cake"] = [
	['Source','-','Preview'],
	['Cut','Copy','Paste','PasteText'],
	['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
	['FitWindow','ShowBlocks','-','About'],
	'/',
	['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
	['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
	['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
	['Link','Unlink','Anchor'],
	['Image','Flash','Table','Rule','Smiley','SpecialChar'],
	'/',
	['Style','FontFormat','FontSize'],
	['TextColor','BGColor']
] ;

app/webroot/js/fckeditor/filemanager/connectors/php/config.php
app/webroot/js/fckeditor/editor/filemanager/connectors/php/config.php
以下を変更

<?php
// SECURITY: You must explicitly enable this "connector". (Set it to "true").
// WARNING: don't just set "$Config['Enabled'] = true ;", you must be sure that only
//		authenticated users can access this file or use some kind of session checking.
$Config['Enabled'] = true ;


// Path to user files relative to the document root.
$fullPath = __FILE__;
for ($i = 0; $i < 7; $i++) {
	$fullPath = dirname($fullPath);
}
$documentRoot = str_replace($_SERVER['DOCUMENT_ROOT'], '', $fullPath);
$Config['UserFilesPath'] = $documentRoot . '/files/' ;

// Fill the following value it you prefer to specify the absolute path for the
// user files directory. Useful if you are using a virtual directory, symbolic
// link or alias. Examples: 'C:\\MySite\\userfiles\\' or '/root/mysite/userfiles/'.
// Attention: The above 'UserFilesPath' must point to the same directory.
$Config['UserFilesAbsolutePath'] = $fullPath . '/files/' ;

app/webroot/filesのパーミッションを書き込み可にするのを忘れずに!

Controllerでのヘルパー指定を忘れずに

<?php
	var $helpers = array('Fck');

Viewにて

<?php echo $fck->input('body', array('label' => '本文')); ?>

一応Helperは、幅、高さ、ツールバーの指定ができるようになっているのでお好みで。
エラーメッセージは、FormHelper::inputを使用したときと同じように表示されます。