You are viewing revision #2 of this wiki article.
This is the latest version of this article.
You may want to see the changes made in this revision.
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!
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
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.
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?
CKEditor integration
Shulme
Thank you very much for the tutorial. It was easy to follow.
CKEditor integration with CHFinder
That is work and help for me lot,,,,,nice work!!!!!!!!!!!!
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
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!
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
Great article
Thanks for your article, i have been succesfully to integrated it.
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
// 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/
'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.
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?
Thanks for a very useful tutorial
I like this widgetless approach!
The reason I like it so much is exactly the one exposed in the tutorial:
"The nice thing about this widgetless approach is that your configuration will all look exactly like the documentation for the two libraries."
Tha easy, immediate access to a reliable documentation is simply invaluable!
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.