Yii 1.1: How to setup CKeditor

8 followers

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

Total 4 comments

#14440 report it
Narender Negi at 2013/08/12 02:37am
How to hide toolbar

How to hide toolbar in ckeditor

#11055 report it
shulme at 2012/12/12 12:11pm
Didn't work for me

These instructions didn't work for me, so I figured out how to get this all set up, and posted a new set of instructions that work as of 12/12/12 here: Instructions that work

#9149 report it
Dark-Sun at 2012/07/24 08:13am
questions in forum

please use the forum link to ask questions, and put your code sample so that people can help better.

#9148 report it
Justinas at 2012/07/24 07:24am
Getting error

Hi,

I'm getting error on view:

TheCKEditorWidget and its behaviors do not have a method or closure named "editor".

Leave a comment

Please to leave your comment.

Write new article