Yii 1.1: eckeditor

A CKEditor Extension for Yii
10 followers

This extension allows the use of CKEditor in forms. This widget uses CHtml:activeTextArea to create a text box, but also creates a CKEditor instance and then replaces the textbox with a CKEditor.

CKEditor v3.6.2 is included in the extension and is automagically published to the public assets folder with the assetManager included in Yii.

Requirements

This extension was created using Yii 1.1.9, but I would expect it to run on most 1.1 frameworks.

CKEditor v3.6.2 IS INCLUDED and is published to the public assets folder with the assets manager.

Usage

Installation

Use of this extension is simple. Simply unzip the extension and place the folder inside the extensions folder

/protected/extensions/

this will create a file structure as follows

/protected/extensions/ckeditor
/protected/extensions/ckeditor/ECKEditor.php <- Widget Class
/protected/extensions/ckeditor/ECKEdit5.php <- Standalone CKEditor Class
/protected/extensions/ckeditor/assets/* <- All the asset files for CKEditor

Usage in view

Replace any activeTextArea

<?php echo CHtml::activeTextArea($model,'content',array('rows'=>10, 'cols'=>70)); ?>

with this

<?php $this->widget('application.extensions.eckeditor.ECKEditor', array(
                'model'=>$model,
                'attribute'=>'content',
                )); ?>

if you want to use custom configure CKEditor to suit your taste, you can send in configuration information like this.

<?php $this->widget('application.extensions.eckeditor.ECKEditor', array(
                'model'=>$model,
                'attribute'=>'content',
                'config' => array(
                    'toolbar'=>array(
                        array( 'Source', '-', 'Bold', 'Italic', 'Underline', 'Strike' ),
                        array( 'Image', 'Link', 'Unlink', 'Anchor' ) ,
                    ),
                  ),
 
                )); ?>

In the code above, a custom toolbar is created that has the Source, Bold, Italic, etc controls enabled. You can pass almost any CKEditor configuration information via the config variable. To see all of how you can configure CKEditor visit: CKEditor Developer's Guide

Resources

I am not affiliated with CKEditor in any way, I have just adapted it's use to be easily used with Yii. This is a work in progress and your ideas/support would be greatly appreciated.

Many thanks to those at CKEditor

Changelog

v0.2 (Jan 23, 2012)
Added the ability to set CKEditor configuration
v0.1
Initial Release

Known Bugs

  • Generates - Not allowed to load local resource:<br/> file:///C:/xampp/htdocs/blog/protected/extensions/eckeditor/ECKEdit5.phpckeditor.js?t=B8DJ5M3 <br/>
  • Ajax validation doesn't work

Upcoming

  • Fix the javascript bug shown above.
  • Enable the ability for Ajax validation. Ajax validation doesn't work on this right now because the extension creates another instance with another id to create the editor. I'm not sure how to fix this yet, but I'll be working on this soon. Thanks to Sasha Kurylenko for pointing this out.

Total 5 comments

#7749 report it
Cstdenis at 2012/04/14 08:32am
reinventing the wheel?

It looks like a lot of the code in this extension isn't really necessary due to manually duplicating functionality that is already built into Yii.

jsEncode() could be replaced with CJSON class ckeditorPath() probably with CAssetManager script() with CClientScript::registerScript()

And the whole event handler stuff isn't used at all.

#7518 report it
manuel-84 at 2012/03/27 04:19pm
to make it work without a model

this

echo CHtml::activeTextArea($this->model,  $this->attribute ,array('rows'=>10, 'cols'=>70));

should be

if($this->hasModel()) {
            $html = CHtml::activeTextArea($this->model, $this->attribute, $this->htmlOptions);
        }
        else {
            $html = CHtml::textArea($name, $this->value, $this->htmlOptions);
        }
        echo $html;
#7434 report it
manuel-84 at 2012/03/22 10:36am
solution

the init() function in eckedit5.php is messing up your init() where you registered the script $cs->registerScriptFile($assets.'/ckeditor.js'); including one more time the script but with a wrong path

so if you load the script with registerscriptfile you can skip ckeditor init again.

to resolve the first known bug simply edit ECKEdit5.php and add a "return;" to init:

private function init()
    {
        return; // skip init ckeditor js again
#6718 report it
polyhedron at 2012/01/31 01:09pm
Known Bug

railton, yea, I know this was a known bug. Failed to load resource. These referenced files aren't necessary. I plan on releasing another update within the next few days fixing this. This extension still works with the bug though.

Quick fix is to comment out line 460 in ECKEdit5.php

// $out .= "<script type=\"text/javascript\" src=\"" . $ckeditorPath . 'ckeditor.js' . $args . "\"></script>\n";

and to create a blank file named content.css in the folder

/protected/extensions/ckeditor/assets/

content.css is typically used to style the content area of the ckeditor to match the style of your site.

#6713 report it
Railton Nepomuceno at 2012/01/31 09:33am
Javascript error

GET http://10.8.24.40/web/teste/protected/extensions/eckeditor/ECKEdit5.phpckeditor.js?t=B8DJ5M3 404 (Not Found) GET http://10.8.24.40/web/teste/assets/7e78f462/contents.css 404 (Not Found)

Leave a comment

Please to leave your comment.

Create extension