Yii 1.1: CKEditor Integration (includes steps for file uploads) - Step by Step

21 followers

Hey guys, I'm hoping other people will find this helpful. Today I went through the process of adding CKEditor to one of my projects, and then integrating KCFinder as the image uploader. It will be used in a CActiveForm, without the use of any crazy weird widgets. All paths are relative, using Yii functions, so this will work no matter where you install. Here it is:

1) Download the latest CKEditor (http://ckeditor.com/download), unzip it, and move the contents to a folder OUTSIDE of your protected folder. I put mine in my root web folder for my site, so if sitefolder/protected is my protected path, I put mine at sitefolder/ckeditor. If you want to change the config options for buttons and such, do it in the config.js file.

2) Import the script file, give the textArea that you want to become an editor an id, and then initialize CKEditor on that textArea. A quick example follows, the attribute of my model is called 'short_version':

<div class="row">
    <?php echo $form->labelEx($model,'short_version'); ?>
    <?php echo $form->textArea($model, 'short_version'); ?>
    <?php echo $form->error($model,'short_version'); ?>
</div>

becomes:

<script src="<?php echo Yii::app()->baseUrl.'/ckeditor/ckeditor.js'; ?>"></script>
 
<div class="row">
    <?php echo $form->labelEx($model,'short_version'); ?>
    <?php echo $form->textArea($model, 'short_version', array('id'=>'editor1')); ?>
    <?php echo $form->error($model,'short_version'); ?>
</div>
 
<script type="text/javascript">
    CKEDITOR.replace( 'editor1' );
</script>

Note the path on the javascript include should change if you installed somewhere else. If all you wanted was the editor, then you're done! Simple as pie. No weird extensions or anything like that. If you want to also allow images to be uploaded, make sure the basic editor is working, and then keep going...

3) Download KCFinder. (http://kcfinder.sunhater.com/download) Extract and put it in the root folder outside of protected again. I put mine at sitefolder/kcfinder.

4) Create a folder for your uploads, again, outside of protected. I chose to create a new folder for this, in order to keep any uploads done by my clients separate from the other resources on the site. My upload folder is located at sitefolder/uploads. Make sure you set your permissions! If you get error messages later on, most likely you're either having a path issue or permissions issues.

5) Make any changes to kcfinder/config.php. You can read the kcfinder docs for more info on these. Don't worry about the uploadURL and uploadDir for now, we are going to set those using Yii so that they work correctly. The only option I had to change was to set _check4htaccess to false, but that was due to my personal server config and the way we have our .htaccess files set up.

6) In your controller action, you need to enable the file uploads (so that a user can't just access kcfinder from anywhere, and then set the upload paths like so:

$_SESSION['KCFINDER']['disabled'] = false; // enables the file browser in the admin
$_SESSION['KCFINDER']['uploadURL'] = Yii::app()->baseUrl."/uploads/"; // URL for the uploads folder
$_SESSION['KCFINDER']['uploadDir'] = Yii::app()->basePath."/../uploads/"; // path to the uploads folder

If you placed your uploads folder somewhere other than your site's root, make sure you change that here as well.

7) Back on your form view, we need to tell our CLEditor to start using the file uploader. To do that, change

<script type="text/javascript">
    CKEDITOR.replace( 'editor1' );
</script>

From earlier to this:

<script type="text/javascript">
    CKEDITOR.replace( 'editor1', {
         filebrowserBrowseUrl: '<?php echo Yii::app()->baseUrl; ?>/kcfinder/browse.php?type=files',
         filebrowserImageBrowseUrl: '<?php echo Yii::app()->baseUrl; ?>/kcfinder/browse.php?type=images',
         filebrowserFlashBrowseUrl: '<?php echo Yii::app()->baseUrl; ?>/kcfinder/browse.php?type=flash',
         filebrowserUploadUrl: '<?php echo Yii::app()->baseUrl; ?>/kcfinder/upload.php?type=files',
         filebrowserImageUploadUrl: '<?php echo Yii::app()->baseUrl; ?>/kcfinder/upload.php?type=images',
         filebrowserFlashUploadUrl: '<?php echo Yii::app()->baseUrl; ?>/kcfinder/upload.php?type=flash'
    });
</script>

Once again, if you installed kcfinder somewhere else, go ahead and modify this code to match your setup. If you're having issues, I would first check your paths and permissions. The nice thing about this widgetless approach is that your configuration will all look exactly like the documentation for the two libraries. For me, the benefit of ease and clarity was much greater than having a few javascript snippets hidden inside of a widget, or creating a widget and then trying to explain to people how to modify the options. Hope this helps someone else!

Total 11 comments

#18227 report it
ionnini at 2014/09/30 09:29am
Image Browse Server page not loading

Hi and thanks for the tutorial!

I downloaded KCFinder 3.20 Test 2 and works fine on my local machine, but when I uploaded on the real site I get a blank page (source empty). Any ideas why is this happening?

#17667 report it
Muhammad Rafiq at 2014/07/13 04:20pm
Use with Yii Booster

Hi,

Nice work. Just to add for others who might need it as reference. If you are using Yii Booster, it comes with CKEditor. You can easily integrate it with Yii Booster CKEditor.

Here are the steps 1. You can skip the part about downloading CKEditor as CKEditor is provided by Yii Booster. 2. Just follow the step from (3) i.e. Download KCFinder. 3. Once it is downloaded, put it in a folder outside protected (or anywhere). In my case, I put it under vendor outside protected folder. So your path will be [project root]/vendor/kcfinder 4. Open your KCFinder config file at kcfinder/conf/config.php and modify the configuration

// GENERAL SETTINGS
 
    'disabled' => false,
    'uploadURL' => "../../media",
    'uploadDir' => "",
    'theme' => "default",

Note: by default, it will be uploaded to kcfinder/upload folder. In the config above, I move it to [root]/media/

  1. Now you are ready to use it in your CKEditor. In your form, just add
'filebrowserImageBrowseUrl'=> Yii::app()->baseUrl . '/vendor/kcfinder/browse.php?type=images',

In the options of CKEditor. A typical code to display your CKEditor would be

//ckeditor
        echo $form->ckEditorRow($model, 'content', array(
        'options'=>array(
                    'fullpage'=>'js:true', 
                    'width'=>'100%', 
                    'height'=>'600',
                    'filebrowserImageBrowseUrl'=> Yii::app()->baseUrl . '/vendor/kcfinder/browse.php?type=images',
                    'filebrowserBrowseUrl' => Yii::app()->baseUrl . '/vendor/kcfinder/browse.php?type=files',
 
 
                    'resize_maxWidth'=>'740',
                    'resize_minWidth'=>'320',
                    'toolbar'=>'js:[
                      ["Source","DocProps","-","PasteText","PasteFromWord"],
                      ["Undo","Redo","-","RemoveFormat"],
                      ["Bold","Italic","Underline","Strike","Subscript","Superscript"],
                      ["NumberedList","BulletedList","-","Outdent","Indent"],
                      ["JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock"],
                      ["Link","Unlink"],
                      ["Image","Flash","Table","HorizontalRule","SpecialChar"],
                      ["Format","Font","FontSize","Styles"],
                      ["TextColor","BGColor"],
                      ["Maximize","ShowBlocks"],
                      ["BidiLtr", "BidiRtl"],
                    ],')
        ));

That's all.

#15986 report it
sintret at 2014/01/07 09:39am
Great article

Thanks for your article, i have been succesfully to integrated it.

#15859 report it
jonathan serrano at 2013/12/23 09:54pm
well made! it sure did help us

@LarryTX nope sir, those other CKeditor extensions used to work just fine during their respective time of post (posted 2009 - now is 2013), times now simply changed and they got outdated (they posted their currently defunct extensions to help fellow devs so don't go hatin them), in case you did visit the official CKedit page you'd see how simple it is to integrate CKedit into yer Yii proj, at any rate cheers! another helpful post i hope OP do update it from time to time, mistake done by previous CKEdit ext devs is that they stopped updating them just when a lot people are actually depending on their exts

#15152 report it
LarryTX at 2013/10/12 03:08pm
You Are Yii's Salvation!

One of the sad things about Yii -- the sort of thing that clearly and definitively detracts for any semblance of maturity and professionalism -- is the plethora of extensions that simply do not work and could never, ever work in the way that the author says they would. When I tried to implement the CKEditor Integration extension and encountered this 'ckeditor'=>Yii::app()->basePath.'/../ckeditor/ckeditor.php',, it was immediately apparent that CKEditor Integration was just such an extension. I find it laughable that so many people will post compliments to the author when it is totally apparent that the extension could never have worked for them. (In this case, there is no ckeditor.php for instance.)

I tried your much simpler and easier route to implementing CKEditor -- and it worked just like you said that it would!!! It is people like you who will rescue Yii from the ineptitude of people who sling slop out there for others to debug (and become totally irate when you point out that their extensions just don't work). Many, many thanks for your outstanding work! I cannot heap enough praise on you!

#14906 report it
toph at 2013/09/19 07:39pm
Different session names

This only applies if you've altered the session name. In order to allow yii and kcfinder to share the same session, add the line

session_name('Your session name here');

to the end of kcfinder/core/autoload.php

#14866 report it
chamara at 2013/09/17 02:24am
CKEditor integration with CHFinder

That is work and help for me lot,,,,,nice work!!!!!!!!!!!!

#13678 report it
BlkRaven at 2013/06/16 02:06pm
CKEditor integration

Shulme

Thank you very much for the tutorial. It was easy to follow.

#13640 report it
swedge218 at 2013/06/13 07:12am
Getting html in text/visual mode

every other thing works fine so far but the editor shows the generated html tags in text mode...any ideas to solve this?

#11961 report it
playdog at 2013/02/15 09:03am
Gracias

Hola, excelente este tutorial, me ayudaste mucho.

Tuve problemas con los permisos, los solucioné asi:

en el archivo: kcfinder/config.php

la linea 21.

'disabled' => true,

A

'disabled' => false,

Y quedo solucionado el problema,

el mismo guarda los archivos en la carpeta llamada: upload, en la carpeta de kcfinder.

#11545 report it
akitikkx at 2013/01/19 11:41am
CKEditor Integration

Thanks man for the tut. Worked perfectly. I originally had connector path issues on remote server with the editor extension before using this alternative. This was a better alternative. Thanks again

Leave a comment

Please to leave your comment.

Write new article