|
|
Close Help | ||||||||||||||
http://www.yiiframework.com/extension/tinymce/
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
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`
(
`contractID` INT NOT
NULL AUTO_INCREMENT ,
`contractName` TEXT NOT NULL ,
`contractData` MEDIUMTEXT NOT NULL ,
PRIMARY KEY ( `contractID` )
) TYPE = MYISAM ;
This is
how the table looks in phpmyadmin.
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
http://www.mydomain.com/gii/
If you're not using the URL manager yours will look something like this.
http://www.yourdomain.com/index.php?r=gii
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 'xxx.xxx.xxx.xxx' 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.
'modules'=>array(
// uncomment the
following to enable the Gii tool
'user',
'gii'=>array(
'class'=>'system.gii.GiiModule',
'password'=>'YOURPASSWORD',
//
If removed, Gii defaults to localhost
only. Edit carefully to taste.
//'ipFilters'=>array('127.0.0.1','xxx.xxx.xxx.xxx'),
),
),
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.
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.
Here is a link to the Yii TinyMCE extension: http://www.yiiframework.com/extension/tinymce/
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 http://www.7-zip.org/ and it seemed to work with no issues.
The form Yii uses to allow you to work with your contract model is located here:
protected/views/contracts/_form.php
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',
array(
'model'=>$model,
'attribute'=>'contractData',
'editorTemplate'=>'full',
'htmlOptions'=>array('rows'=>6, 'cols'=>50,
'class'=>'tinymce'),
));
?>
<?php echo $form->error($model,'contractData');
?>
</div>
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.
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',
array(
'model'=>$model,
'attribute'=>'contractData',
'editorTemplate'=>'full',
'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,
15=15pt,16=16pt,17=17pt,18=18pt,19=19pt,20=20pt",
)
));
?>
<?php
echo $form->error($model,'contractData'); ?>
</div>
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 http://www.tinymce.com.
To figure out what button options I had available to me, I went to the following url. http://www.tinymce.com/tryit/full.php <-- 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
