ALERT! This extension stopped working in IE 11 so I've decided to try and implement TinyMCE using my own extension that uses TinyMCE 4.0.12 . Check it out here

The following instructions are for THIS extension.

Simple Tutorial using the Yii TinyMCE extension

I've recently decided to test drive the TinyMCE extension. I did not find much documentation on how to use it so I figured I'd write up a little tutorial with the hopes that it might help someone.

For the purpose of this tutorial, I'll pretend I'm creating an application to write up contracts.

I'm going to start from as close to scratch as possible, feel free to jump ahead if you already know this stuff.

I'm assuming you already set up a connection to a database. If not check out Larry Ullman's tutorial Configuring Yii .

I've broken this tutorial into the following steps.

1.       Create a Table

2.       Create Model

3.       Create Crud

4.       Install TinyMCE extension

5.       Swap out the form field that yii created with a custom one.

6.       Tweaking the toolbar

1. Create a table

For simplicity, the table is going to only have three fields. contractID, contractName and contractData. I'm using a mysql database and phpmyadmin to create the table.

First I specify the name of the table and the number of rows then click Go.

Next, I define the field names and types in the database and click the Save button.



phpmyadmin displays the sql used to create the table that I just built in phpmyadmin.

CREATE TABLE `tbl_contracts` (

`contractName` TEXT NOT NULL ,
`contractData` MEDIUMTEXT NOT NULL ,
PRIMARY KEY ( `contractID` )


This is how the table looks in phpmyadmin.

2. Create Model

I'm just going to use Gii from the web browser to create the model for the table we just build. To do this I just point my browser to gii. I'm using the URL manager and hiding my index page so I point mine to

If you're not using the URL manager yours will look something like this.

If you have Gii configured, you should see this.

If you have not configured Gii. You have to go into the /protected/config/main.php

Then you have to uncomment the following module. There is a filter that allows you to specify IP addresses that are allowed to run Gii called ipFilters. Just add your address where the '' is. Alternately you could use 'ipFilters'=>false, and it won't filter on IP but this is not a very good idea if your application is on the internet.


// uncomment the following to enable the Gii tool





// If removed, Gii defaults to localhost only. Edit carefully to taste.




Once you are logged into Gii you should see the following screen.


Go ahead and click on Model Generator. You should see a web page that looks like this.



My table is called tbl_contacts. The tbl_ is a prefix I use on my tables and I really don't want it included in the name of my model. The text field, Table Prefix, tells Yii to ignore this at the beginning of the table name. In this field I put tbl_. The Table Name field is the actual name of the table in the data base so I fill that in with tbl_contracts. Yii will automatically fill in the Model Class for you. In the picture below, I've filled out the feilds and clicked the Preview button.

The bottom of the screen shows the path of where Yii is going to create the model. To actually create the code, you have to click on the Generate button. If all goes well you should see the following at the bottom of the screen.


You will find this model in protected/models/Contracts.





3. Create CRUD

Gii is also used to generate the CRUD code. CRUD stands for Create, Read, Update and Delete. From the screen you are on you can just click on the Crud Generator link pictured below. If you already closed your browser log back into Gii and the link will be on the main page.

After clicking on Crud Generator you should see the following page.

Just fill in the Model Class field with the name of the model we just created, Contracts. You will see that the Controller ID field is filled in automatically for you. Go ahead and click preview and your page should look like this.


At the bottom of the page, Gii displays all the files it will build to give you the ability to work with your model. Go ahead and click on the Generate button. If it was successful you should see the following.


Notice the link that says try it now. If you click on this link, it should take you to your Yii application and the main window should look like the following.

You can click on the Create Contacts link and it should present you with a form that will allow you to create a new contact like the one below.


I've gone ahead and filled in the fields and after I click Create, Yii displays the record I just added to the database.

You can see, now that I've created the contract, there are more Operations available to me. List, Update, Delete. There are rules in protected/controllers/ContractsController.php that are used to determine what tasks the user can do. Notice that a logged in user can create and update records but cannot delete them.

You can give an authenticated user permission to delete records by adding ,'delete' to the authenticated user array as follows.



If you decide to give authenticated users the ability to delete records you will probably get the following after the deletion.

This is not because the delete did not work but because it is trying to redirect you to the admin page that your user does not have permission to. You could give your user permission or change the page the user is redirected to in the controller.


I opted to make the change in the controller. Look for the following code.

Where it says array('admin') you can change it to array('index.php/contracts') and it will bring you back to the contract index page.


Unless you have run into any snags, you should be able to create a new contract and save it in the database. Now it's time to get the TinyMCE working.


4. Install TinyMCE


Here is a link to the Yii TinyMCE extension:

You will be able to download the extension from this page.

The installation instructions at the site are as follows.

Extract the release file under protected/extensions

That is all that there is to it. The file you download needs to be extracted. It is compressed using tar.bz2 format. I'm on a Windows PC and did not have anything to open this type of file with so I downloaded and it seemed to work with no issues.

5. Swap out the form field that Yii created with a custom one

The form Yii uses to allow you to work with your contract model is located here:


If you open this file it should look like this.

The code that creates the text box where we enter the contract data is this.

Since this is the field that we would like to use TinyMCE we need to replace that code with code that creates a TinyMCE widget. Here is the code for that.


Code you can copy/paste

<div class="tinymce">

<?php echo $form->labelEx($model,'contractData'); ?><br />

<?php $this->widget('application.extensions.tinymce.ETinyMce',





'htmlOptions'=>array('rows'=>6, 'cols'=>50, 'class'=>'tinymce'),

)); ?>

<?php echo $form->error($model,'contractData'); ?>



Now when you create a new contact the form should look like this.

Now we have a form field that is using TInyMCE. When we click create, the HTML that is used to format this document is stored in the database. When you view this record Yii will show you the actual html code and not try to render it as seen in the following picture.

You can create a custom view to display this using the HTML formatting.


Yii uses the same form to update records that it does to create them so if you update this contract TinyMCE will show it to use the same way you typed it.



6. Tweaking the TinyMCE toolbar.


TinyMCE has a ton of features. Since were only creating text documents we don't need all of these so were going to customize the toolbar and only choose the buttons we need. To do this we pass an array of options to the TinyMCE widget.


Code you can copy/paste

<div class="tinymce">

<?php echo $form->labelEx($model,'contractData'); ?><br />

<?php $this->widget('application.extensions.tinymce.ETinyMce',





'htmlOptions'=>array('rows'=>6, 'cols'=>50, 'class'=>'tinymce'),

'options' => array(

'theme_advanced_buttons1' =>

'undo,redo,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,outdent, indent,|,advhr,|,sub,sup,|,bullist,numlist,|,formatselect,fontselect,fontsizeselect,|,cut,copy,paste,pastetext,pasteword,|,search,replace,',

'theme_advanced_buttons2' => 'tablecontrols,|,removeformat,visualaid,',

'theme_advanced_buttons3' => '',

'theme_advanced_buttons4' => '',

'theme_advanced_toolbar_location' => 'top',

'theme_advanced_toolbar_align' => 'left',

'theme_advanced_statusbar_location' => 'none',

'theme_advanced_font_sizes' => "10=10pt,11=11pt,12=12pt,13=13pt,14=14pt,



)); ?>

<?php echo $form->error($model,'contractData'); ?>


Now the buttons on your form should look like this.




Notice there are now only two rows of buttons instead of four. The following lines determine what buttons are going to show up in these rows. Since there are no buttons selected for the 3rd and 4th rows, they are not displayed.


'theme_advanced_buttons1' =>'undo,redo,|,bold,italic,underline,|,justifyleft, justifycenter,justifyright,justifyfull,|,outdent,indent,|,advhr,|,sub,sup,|,bullist,numlist,|,formatselect,fontselect,fontsizeselect,|,cut,copy,paste,pastetext,pasteword,|,search,replace,',

'theme_advanced_buttons2' => 'tablecontrols,|,removeformat,visualaid,',

'theme_advanced_buttons3' => '',

'theme_advanced_buttons4' => '',


You can get a lot of information about the features of tinymce from their web site


To figure out what button options I had available to me, I went to the following url. <-- This displays the full feature example. You can then click on the View Source tab (see image below) and see all the button options that are available. Just move them to where you want them and be sure to keep the proper comma separated format.





I hope you were successful following along with this demo and that it helped. Send me an email if you found any typo's or want to add anything to this or just to let me know that this helped you.



John Sladek


jsladek at iobe dot net

My Yii Tutorials.