Integrating WYSIWYG TinyMCE into CodeIgniter

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source. It has the ability to convert HTML textarea fields or other HTML elements to editor instances. TinyMCE is very easy to integrate, all WYSIWYGs are. When I was picking WYSIWYG for my website then I was between this and CKEditor. I loved the size and placement of source button of CKEditor, but other buttons look pixelerated and low quality images in examples. That because I picked TinyMCE, but lets get to work...

Getting neccessary files:

Firt of all you have to get TinyMCE, I am guessing that you allready have a running CI(CodeIgniter), if not then look for a tutorial how to do that. If you use jQuery then get the jQuery version, but don't download jQuery only just for TinyMCE. Though it is a powerful tool and I suggest to check it out.

Placing files next to CI:

Unpack it under tinymce/jscripts/ there is tiny_mce, you need to upload that so you could use it on your website. I am using /js/ folder in my root directory for that. If you do the same you should get something like:

Source code viewer
/js/
/system/ - if you haven't changed the name of it for security
/index.php
Programming Language: Text

Copying the sample code:

Make a view called wysiwyg.php. I am going to post here both codes jQuery version and non jQuery version.

This is the jQuery version:

Source code viewer
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<?php echo $base_url; ?>js/tiny_mce/jquery.tinymce.js"></script>
 
<script type="text/javascript">
$(function(){$("textarea.tinymce").tinymce({
	// Location of TinyMCE script
	script_url : "<?php echo $base_url; ?>js/tiny_mce/tiny_mce.js",
 
	// General options
	theme : "advanced",
	plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
 
	// Theme options
	theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
	theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
	theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
	theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_statusbar_location : "bottom",
	theme_advanced_resizing : true,
 
	// Drop lists for link/image/media/template dialogs
	template_external_list_url : "lists/template_list.js",
	external_link_list_url : "lists/link_list.js",
	external_image_list_url : "lists/image_list.js",
	media_external_list_url : "lists/media_list.js"
});});
</script>
Programming Language: Javascript

Standalone version:

Source code viewer
<script type="text/javascript" src="<?php echo $base_url; ?>js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
	// General options
	mode : "textareas",
	theme : "advanced",
	plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",
 
	// Theme options
	theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
	theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
	theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
	theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_statusbar_location : "bottom",
	theme_advanced_resizing : true,
 
	// Drop lists for link/image/media/template dialogs
	template_external_list_url : "js/template_list.js",
	external_link_list_url : "js/link_list.js",
	external_image_list_url : "js/image_list.js",
	media_external_list_url : "js/media_list.js"
});
</script>
Programming Language: Javascript

Loading the view:

Load the view where you have your textarea and change its class to tinymce.

Textarea code:

Source code viewer
<form method="post" action="somepage">
	<textarea name="content" style="width:100%">
	</textarea>
</form>
Programming Language: HTML5

Load the view code:

Source code viewer
// To use base_url() you need to load URL Helper.
echo $this->load->view('wysiwyg', base_url(), true);
Programming Language: PHP

Tweaking the sample code:

Now you should tweak the code for your needs. Take off features and plugins that you don't need and reorder them. If that is done then you have successfully integrated WYSIWYG TinyMCE to CodeIgniter.