[CakePHP][1.3] でCKEditorを使う

CakePHPでWYSIWYGエディタを使う方法です。

WYSIWYGエディタの中でも、今回はCKEditorを選びました。

ダウンロード


まずは、以下からCKEditorとCKFinderをダウンロードします。

そして、ダウンロどして解凍したフォルダ、「ckeditor」と「ckfinder」を、「app/webroot/js/」に配置します。

ヘッダー追加


続いて、レイアウトファイル、たとえばdefault.ctpなどの以下のように追加します。

echo $html->script('ckeditor/ckeditor.js');
echo $html->script('ckfinder/ckfinder.js');

Viewファイル変更

つづいて、viewファイルでは以下のように設定します。
<?php
echo $this->Form->hidden('Post.id');
 echo $this->Form->input('itemName',array('type'=>'text','label'=>'商品名'));
 echo $this->Form->input('catchcopy',array('type'=>'text','label'=>'キャッチコピー'));
 echo $this->Form->input('itemCaption',array('type'=>'textarea','label'=>'商品説明','id'=>'ck'));
?>

<script type="text/javascript">
var editor = CKEDITOR.replace('ck');
CKFinder.setupCKEditor( editor, '/js/ckfinder/' );
</script>


CKEditorの設定ファイル変更


次にCKEditorの設定ファイルを変更します。

ckeditor/config.jsというファイルです。

CKEDITOR.editorConfig = function( config )
{
	// Define changes to default configuration here. For example:
	config.language = 'ja';//日本語表記
	config.uiColor = '#AAC6EF';//ツールバーのカラー。
	config.enterMode = CKEDITOR.ENTER_BR;//改行タグを<p>タグから<br />タグに変更
	config.skin = 'office2003';//スキンを変更。'kama'、'office2003'、'v2' の3つから選択。
	config.toolbar =//ツールバーのボタン。不要なものは以下から削除。
	[
      ['Source','ShowBlocks','-','Save','NewPage','Preview','-','Templates'],['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker'],['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField']
      ,'/'
      ,['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],['Link','Unlink','Anchor'],['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak']
      ,'/'
      ,['Styles','Format','Font','FontSize'],['TextColor','BGColor']
    ];
};

すると、id="ck"と指定してあるフィールドが、CKEditorで編集ができるようになります。

他にもいろいろオプションがあるようですが、、、とりあえずこれで動いたのでこれでよしとします(^^;)

参考URL



  • PHP x Ajax = CMS ! » [CakePHP] CKEditorヘルパー(見たまま編集エディター)

  • [CakePHP] CKEditorとCKFinderの導入 | Ks web Design


[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

PHPフレームワーク CakePHP 3入門 [ 掌田津耶乃 ]
価格:3024円(税込、送料無料) (2017/9/20時点)