Ajax and Ajax Frameworks

I have been a developer for nearly 20 years and a web developer for about 10 years. Over the years, I have considered creating a blog to share the things I have learned (and am learning) about web design and development, but I never seemed to have the time. When I began learning about web development using Ajax and Ajax Frameworks, I decided to take the time to create this blog.

My intention for this blog is to focus primarily on Ajax Frameworks, but since web development requires knowledge of many technologies, I will occasionally write about things such as CSS, Javascript, PHP, MySQL, Flash, etc.

Lately, I have been using JQuery as my primary Ajax tool. Although I have used other Ajax Frameworks in the past (Dojo Toolkit, Yahoo! User Interface Library, Scriptaculous/Prototype), JQuery has thus far been the easiest to learn. In my first few posts I will discuss some of the JQuery Plugins that I have created. Some of these include: a plugin for Google Maps (jquery.imGoogleMaps), Form validation and submission (jquery.imValidateForm), Page Populater (jquery.imPagePopulate), and a plugin to create lists (jquery.imList).

While I am still learning about some of the other Ajax Frameworks, I hope that what I have learned will be helpful to others. Just remember, “When you can pull the pebbles from my hand…”

CodeIgniter and TinyMCE

Friday, December 4th, 2009

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:

^?View Code PHP

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:

^?View Code PHP

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.

^?View Code PHP

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

So my main view looks something like this:

^?View Code PHP

...
<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:

^?View Code PHP

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

Categories: Codeigniter
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.

7 Responses to “CodeIgniter and TinyMCE”

Multi-Purpose CodeIgniter Forms | GrasshopperPebbles.com Says:
December 8th, 2009 at 10:41 am

[...] CodeIgniter and TinyMCE [...]
lokesh Says:
December 18th, 2009 at 3:22 am

Superb Tutorial… I belive this is outstanding example which is self explanatory and very near to soultion i ws looking for… Thanks… Thank u very much
Bryce Says:
September 7th, 2010 at 3:08 am

Thanks for sharing.

Works great but as soon as i add a plug in or theme_advanced_buttons it stops working?

Do you have any suggestions?
admin Says:
September 9th, 2010 at 9:01 pm

Are you receiving an error?
Bryce Says:
October 24th, 2010 at 2:27 am

No not receiving any errors. It only seems to work with theme : “simple”
sanam Says:
January 20th, 2011 at 12:59 pm

I can’t integrate tinyMCE. What have you written in tour_create_edit.php file. Need ur help alot. Thanks in advance
sanam Says:
January 20th, 2011 at 1:12 pm

well issue has been resolved. Thanks anyways and nice article

CodeIgniter and TinyMCE

The Controller

The View

7 Responses to “CodeIgniter and TinyMCE”

Home Business Ads

Categories

Archives

Tags

Comments

Blogroll