To start with you need to download the latest stable release of CKeditor. Extract the downloaded file and place the ckeditor/ folder in your applications webroot directory. (beside "protected" and "css" and other directories)

WARNING: if you put the ckeditor in 'protected' directory it will NOT work.

Next to do is to download the The CKeditor Integration extension, created by Ali Qanavatian. Extract the downloaded file, and place the ckeditor/ widget folder in your web applications protected/extensions/ directory.

Configuring the CKeditorWidget ¶

In the view where you want to use the CKeditorWidget:

<?php $this->widget('application.extensions.ckeditor.cKEditorWidget',array(
	'model'=>$pages,				# Data-Model (form model)
	'attribute'=>'content',			# Attribute in the Data-Model
	'height'=>'400px',
	'width'=>'100%',
	'toolbarSet'=>'Basic', 			# EXISTING(!) Toolbar (see: ckeditor.js)
	'ckeditor'=>Yii::app()->basePath.'/../ckeditor/ckeditor.php',
									# Path to ckeditor.php
	'ckBasePath'=>Yii::app()->baseUrl.'/ckeditor/',
									# Relative Path to the Editor (from Web-Root)
	'css' => Yii::app()->baseUrl.'/css/index.css',
									# Additional Parameters
) ); ?>

• the model property is the instance of the Model to be associated with. like a CFormModel instance or something which you use as your form model.
• attribute the Model attribute to be associated with.
• ckeditor, the path to the ckeditor php file.
• ckBasePath, the url to the editor frontend to be loaded inside the iframe.
• config Most parameter in the CKEditor.Config object can be changed within this config. http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Setting_Configurations and also see here http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html

If those instructions have been followed exactly the CKeditor should work correctly.

NOTE: linux users keep an eye on permissions of files and directories.

Links ¶

the older version compatible with FCKeditor 2.x

Question and bug reports