TinyMCE

This page demonstrates the integration of Code Igniter and TinyMCE.

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.

NOTE: If there is any single or double quotes in the content area, the content after the quote will not be shown up. I think it's because there is some conflict between TinyMCE and xajax.

Controller: tinymce.php

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

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

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

    function index()
    {
        // XAJAX
        $this->_load_xajax();

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

        $this->data['content_area'] = "Some &lt;b&gt;element&lt;/b&gt;, this is to be editor 1.&lt;p&gt;Some paragraph.";

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

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

    function _load_xajax()
    {
        $this->load->library('xajax');
        //$this->xajax->debugOn();
        $this->xajax->registerFunction(array("process_form_data", &$this, "process_form_data"));
        $this->xajax->processRequests();
        $this->data['xajax_js'] = $this->xajax->getJavascript(null, '/js/xajax.js');
    }

    function _load_misc_data()
    {
        $this->data['head_title'] = WEBSITE_NAME . " - Examples: TinyMCE";
        $this->data['highlighted_controller'] = highlight_file("tinymce.php", TRUE);
        
        // load example MVC
        $example = new example('tinymce', 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_tpl', $this->data, true);
    }

    function process_form_data($form_data)
    {
        $objResponse = new xajaxResponse();
        
        //$objResponse->addAlert($form_data['content_area']);
        $result = nl2br_except_pre($form_data['content_area']);

        $objResponse->addAssign("div_result", "innerHTML", $result);
        return $objResponse;
    }
}
?>

View: tinymce_tpl.php

<script type="text/javascript">
<!--
    xajax.loadingFunction = function(){xajax.$('loading_message').style.display='block';};
    xajax.doneLoadingFunction = function(){xajax.$('loading_message').style.display='none';};
// -->
</script>
<div id="loading_message" class="loadingMessage">Submitting ...</div>
<!-- tinyMCE -->
<script language="javascript" type="text/javascript" src="<?=base_url()?>tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
    tinyMCE.init({
        mode : "exact",
        elements : "content_area",
        theme : "simple"
    });
</script>
<!-- /tinyMCE -->

<script language="javascript" type="text/javascript">
function do_submit()
{
    tinyMCE.triggerSave(false, false);
    xajax_process_form_data(unescape(xajax.getFormValues('form_tinymce', false, 'content')));
}
</script>

<h1 id="introduction">TinyMCE</h1>

<p>
This page demonstrates the integration of <?=CODE_IGNITER_LINK_POPUP?> and <?=TINYMCE_LINK_POPUP?>.
</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>

<p>
<b>NOTE</b>: If there is any single or double quotes in the content area, the content after the quote will not be shown up. I think it's because there is some conflict between <?=TINYMCE_LINK_POPUP?> and <?=XAJAX_LINK_POPUP?>.
</p>

<form id="form_tinymce" name="form_tinymce">
<table>
<tr>
    <td><textarea id='content_area' name='content_area' rows='10' cols='60'><?=$content_area?></textarea></td>
</tr>
<tr>    
    <td><input type="button" id="btn_submit" name="btn_submit" value="Submit" onclick="do_submit()" /></td>
</tr>
</table>
</form>
<br/>

<div id="div_result"></div>

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

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