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.
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)
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
content.css is typically used to style the content area of the ckeditor to match the style of your site.
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
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;
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.
disabled eckeditor
how can I disabled the textarea when I need?
Image upload and video embed
How do we set it up with image uploader and video embed
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.