TinyMCE (Advanced)

This page demonstrates the integration of Code Igniter and TinyMCE in advanced theme with basic form post.

What is TinyMCE?
TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems.

Controller: tinymce_adv.php

<?php
class tinymce_adv extends Controller
{
    var $data;

    function tinymce_adv()
    {
        parent::Controller();

        $this->load->helper(array('text'));
    }

    function index()
    {
        // load misc data
        $this->_load_misc_data();

        $this->data['content_area'] = "";
        $this->data['postback_result'] = "<i>Result will be posted here...</i>";

        // load views
        $this->_load_views();

        $this->load->view('site_layout', $this->data);
    }
    
    function postback()
    {
        // load misc data
        $this->_load_misc_data();

        $this->data['content_area'] = stripslashes($_POST["content_area"]);
        $this->data['postback_result'] = stripslashes($_POST["content_area"]); 

        // load views
        $this->_load_views();

        $this->load->view('site_layout', $this->data);
    }

    function _load_misc_data()
    {
        $this->data['head_title'] = WEBSITE_NAME . " - Examples: TinyMCE (Advanced)";
        $this->data['highlighted_controller'] = highlight_file("tinymce_adv.php", TRUE);
        
        // load example MVC
        $example = new example('tinymce_adv', true);
        $this->data['highlighted_view'] = $example->view;
    }

    function _load_views()
    {
        $this->data['subheader'] = $this->load->view('examples_subheader', $this->data, true);
        $this->data['sidebar'] = $this->load->view('examples_sidebar', $this->data, true);
        $this->data['body_content'] = $this->load->view('tinymce_adv_tpl', $this->data, true);
    }
}
?>

View: tinymce_adv_tpl.php

<!-- tinyMCE -->
<script language="javascript" type="text/javascript" src="<?=base_url()?>tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
<!--
    tinyMCE.init({
        theme : "advanced",
        mode : "exact",
        elements : "content_area",
        convert_urls : false,
        relative_urls : false,
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,separator,outdent,indent,separator,undo,redo,separator,link,unlink,anchor,separator,image,separator,cleanup,code",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : ""
    });
// -->
</script>
<!-- /tinyMCE -->

<h1 id="introduction">TinyMCE (Advanced)</h1>

<p>
This page demonstrates the integration of <?=CODE_IGNITER_LINK_POPUP?> and <?=TINYMCE_LINK_POPUP?> in advanced theme with basic form post.
</p>

<p>
<b>What is TinyMCE?</b><br/><?=TINYMCE_LINK_POPUP?> is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems.
</p>

<form id="form_tinymce_adv" name="form_tinymce_adv" method="post" action="/tinymce_adv/postback">
<table>
<tr>
    <td><textarea id='content_area' name='content_area' rows='20' cols='80'><?=$content_area?></textarea></td>
</tr>
<tr>    
    <td><input type="submit" id="btn_submit" name="btn_submit" value="Submit" /></td>
</tr>
</table>
</form>
<br/>

<?=$postback_result?>

<h1 id="introduction">Controller: tinymce_adv.php</h1>
<p>
<?=$highlighted_controller?>
</p>

<h1 id="introduction">View: tinymce_adv_tpl.php</h1>
<p>
<?=$highlighted_view?>
</p>