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()	{
		parent::Controller();
		session_start();
 
	        $this->tinyMce = '
			<!-- TinyMCE -->
			<script type="text/javascript" src="'. base_url().'js/tiny_mce/tiny_mce.js"></script>
			<script type="text/javascript">
				tinyMCE.init({
					// General options
					mode : "textareas",
					theme : "simple"
				});
			</script>
			<!-- /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->mTours->addTour();
  		$this->session->set_flashdata('message','Tour added');
  		redirect('admin/dashboard','refresh');
  	} else {
		$data['title'] = "Add Tour";
		$data['page'] = 'admin/tour_create_edit';
		$data['tour'] = $this->mTours->getLatestTour();
		$data['navList'] = $this->mainMenu;
		$this->load->vars($data);
		$this->load->view('main');    
	}
}

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:

...
<body>
	<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>
		<div id="sideBar">
			<?php $this->load->view('sideBar'); ?>
		</div>
	</div>
</body>

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>
 
<?php
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