CodeIgniter and TinyMCE

I’m updating a project for a client that I developed using CodeIgniter. One of the updates involves adding a text editor. I decided to use TinyMCE. Integrating TinyMCE with CodeIgniter was easier than I thought.

Create a folder under the js folder and name it tiny_mce (/js/tiny_mce). Download TinyMCE and place the files in the tiny_mce folder.

The Controller

Create (or open) the controller file where you want to use the TinyMCE editor. Add the editor initialization code to your constructor:

class Admin extends Controller {
	function Admin()	{
	        $this->tinyMce = '
			<!-- TinyMCE -->
			<script type="text/javascript" src="'. base_url().'js/tiny_mce/tiny_mce.js"></script>
			<script type="text/javascript">
					// General options
					mode : "textareas",
					theme : "simple"
			<!-- /TinyMCE -->

First I am adding the TinyMCE script files to the page. The editor is initialized so that all textareas on the page will be replaced with the text editor (mode: ‘textareas’). I am also using the simple theme.

Now I create a method to show the view:

function tour_create() {
	if ($this->input->post('tour_date')){
  		$this->session->set_flashdata('message','Tour added');
  	} else {
		$data['title'] = "Add Tour";
		$data['page'] = 'admin/tour_create_edit';
		$data['tour'] = $this->mTours->getLatestTour();
		$data['navList'] = $this->mainMenu;

The View

So now I create my view. This is not my main view. Although I could have added the code to my main view, I only want the TinyMCE code to appear on the pages where I want to use the text editor. Looking at the tour_create method above, you see that I will be loading the page admin/tour_create_edit.php within the main view.

$data['page'] = 'admin/tour_create_edit';

So my main view looks something like this:

	<div id="body">
	        <div id="banner"></div>
		<div id="menu"></div>
                //this is where I load the tour_create_edit view.
		<div id="page">
			<?php $this->load->view($page); ?>
		<div id="sideBar">
			<?php $this->load->view('sideBar'); ?>

I’ll add the TinyMCE code at the top of the tour_create_edit view. I created a form on this page and within the form, I created a few textareas:

<?php echo $this->tinyMce;?>
<h3><?php echo $title;?></h3>
echo form_open('admin/tour_create'); 
echo "<p><label for='tour_date'>Tour Date</label><br/>";
$data = array('name'=>'tour_date','id'=>'tour_date');
echo form_input($data) ."</p>";
echo "<p><label for='locations'>Locations</label><br/>";
$data = array('name'=>'locations','id'=>'locations','rows'=>5, 'cols'=>'40');
echo form_textarea($data) ."</p>";
echo "<p><label for='tour_includes'>Trip Includes</label><br/>";
$data = array('name'=>'tour_includes','id'=>'tour_includes','rows'=>5, 'cols'=>'40');
echo form_textarea($data) ."</p>";
echo form_submit('submit','add tour');
echo form_close();

That’s it. Now the locations and tour_includes textareas will be replaced with the TinyMCE text editor. Enjoy.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks