How To Integrate Image Upload Option With Wysiwyg Text Editor In Yii Framework

Yii is at present one of the most popular PHP frameworks. It is an open source web application that is used in creating complex and high-performance sites. Originally named “Yes It Is”, this framework is simple to understand and easy to use. With its powerful performance, this framework is at present one of the most sought after framework, especially by experienced web developers. However, with its easy understanding, Yii framework is now widely used to create simple as well as complex websites.

Being open source, it is free to use and provides important components like Ajax enabled widgets, MVC, in-built authentication, integration with jQuery, support for web services etc. All these and many more tools are available to provide you with an opportunity to create the best possible web applications in 2.0 version.

The unique features of Yii framework that makes it outstanding for use are:

Speed: The difference in RSP when a website is created with Yii framework is really high. This, when combined with the APC extension, websites speeds are beyond 670 RSP.

Form Validation: Form validation allows easy connection with database tables. And for Yii, you can set up your own validation rule.

Support Widgets: Yii supports Ajax and jQuery enabled widgets. It contains data picker, jQuery dialogue and even Ajax buttons in enabling it to be called a widget.

Theme: The framework contains inbuilt themes that can be changed and used as per the application. Designers can also switch between different themes helping designers in implementing various themes very easily.

Caching: Yii integrates various caching components which help in boosting up the speed of the page. This results in quick loading of websites.

Sites like www.financialbuzz.com and app site www.nudge.com have been created with the help of this framework. The speed of the framework is quite visible when you open these sites.

If, however, you have been recently introduced to YII framework, you might know all the functionalities. This article is about how to integrate file uploader in ckedito. To implement this use kcfinder file uploader plugins. 

Working With Yii Framework

Yii is a high-performance, component-based PHP framework for developing large-scale Web applications rapidly. It enables maximum reusability in web programming and can significantly accelerate your Web application development process. This is often the accurate and most concise response to inquiries from those new to Yii:

Is it fast? … Is it secure? …… Is it what I want for my project? … Yes, it is!

We needed a rich text editor to write rich content. Editing and formatting content is the bread and butter of every content management system.

What you can do is click the image icon and select “Choose Image”, you will get a pop up that allow you to drag and drop in images. Afterwards, you’ll be able to drag it around for placement.

Bring rich editor features to your products and websites, providing your users with powerful tools to make creating Web content easier than ever and accessible to anyone.

Install CKFinder to increase daily website content management productivity. Easily upload and download multiple files. Check out the new Enterprise Services andSolutions if your project requires additional support options and custom development.

CKFinder is free open-source replacement of CKFinder web file manager. It can be integrated into CKEditor WYSIWYG web editors (or your custom web applications) to upload and manage images, flash movies, and other files that can be embedded in an editor’s generated HTML content.

First download ckeditor and ckfinder and place it into your root folder

http://ckeditor.com/download  (Select full package)

http://kcfinder.sunhater.com/download

Add ckeditor library script to your view file:

1
<script src="<?php echo Yii::app()->baseUrl.'/ckeditor/ckeditor.js'; ?>"></script>

Your view file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="row">
<?php echo $form->labelEx($model,'meta_description'); ?>
                <?php echo $form->textArea($model,'meta_description'); ?>
                <?php echo $form->error($model,'meta_description'); ?>
</div>
1
<strong>Add script to your view file:</strong>
1
<script type="text/javascript">
    CKEDITOR.replace( 'Articles_meta_description', {  // input field id
         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>

Set upload path into session :

1
2
3
4
5
$_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/"; // pat

Refresh your page.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s