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: At first I had problem when there was any single or double quotes in the content area - the content after the quotes would not be shown up. I believe it's the encoding conflict between TinyMCE and xajax. After several tries, I found out xajax.getFormValues() uses a query string to represent the form data which is passed to the PHP function, and the default encoding of TinyMCE is named. Then I set the entity_encoding of TinyMCE to "" and use decodeURIComponent() to decode the query string before passing into the PHP function. It solved the problem!

Controller: tinymce.php

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

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

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

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

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

        $this->data['content_area'] = "";

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

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

    function _load_xajax()
    {
        $this->load->library('xajax');
        $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();
        
        $result = $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",
        convert_urls : false,
        relative_urls : false,
        entity_encoding : ""
    });
// -->
</script>
<!-- /tinyMCE -->

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

function show_content()
{
    alert(tinyMCE.getContent());
}
</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>: At first I had problem when there was any single or double quotes in the content area - the content after the quotes would not be shown up. I believe it's the encoding conflict between <?=TINYMCE_LINK_POPUP?> and <?=XAJAX_LINK_POPUP?>. After several tries, I found out <a href="http://wiki.xajaxproject.org/Tutorials:Processing_Forms_with_xajax" target="_new">xajax.getFormValues()</a> uses a query string to  represent the form data which is passed to the PHP function, and the default encoding of <?=TINYMCE_LINK_POPUP?> is <a href="http://tinymce.moxiecode.com/tinymce/docs/option_entity_encoding.html" target="_new"><i>named</i></a>. Then I set the entity_encoding of <?=TINYMCE_LINK_POPUP?> to "" and use <a href="http://www.w3schools.com/jsref/jsref_decodeURIComponent.asp" target="_new">decodeURIComponent()</a> to decode the query string before passing into the PHP function. It solved the problem!
</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_show_content" name="btn_show_content" value="Show Content" onclick="show_content()" />
        <input type="button" id="btn_submit" name="btn_submit" value="Submit" onclick="do_submit()" />
    </td>
</tr>
</table>
</form>
<br/>

<div id="div_result"><i>Result will be posted here...</i></div>

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

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