Hey guys, I’m too new to write a wiki article, so I’m posting here instead, 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:
-
Download the latest CKEditor (I would put a link, but the forums won’t let me use a link… just google it.), 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.
-
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…
-
Download KCFinder. Extract and put it in the root folder outside of protected again. I put mine at sitefolder/kcfinder.
-
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.
-
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.
-
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/"; // enables the file browser in the admin
$_SESSION['KCFINDER']['uploadDir'] = Yii::app()->basePath."/../uploads/"; // enables the file browser in the admin
If you placed your uploads folder somewhere other than your site’s root, make sure you change that here as well.
- 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!
