Fork me on GitHub

Example: Basic tinymce field creation

How to create a tinymce field.

Important Notice :

TinyMCE is not included in the inputEx distribution !
Download it on http://tinymce.moxiecode.com/ (tested with version 3.5.6) and install it in lib/tiny_mce

Basic TinyMCEField creation

Use the following code to create a basic inputEx TinyMCEField.

TinyMCEField setValue/getValue

Test for setValue/getValue using the TinyMCEField.

Using the SimpleEditor

Use the following code to create a SimpleEditor widget

Changing the config

You can have access to all the tinymce config options through the "opts" attribute. Check out the TinyMCE examples for all options.

HTML

<script src="http://tinymce.moxiecode.com/js/tinymce/jscripts/tiny_mce/tiny_mce.js" type='text/javascript'></script>

<div id="field-container"></div>

JavaScript

Implementation

YUI().use('inputex-tinymce',function(Y) {

    // Example 1
    new Y.inputEx.TinyMCEField({
        parentEl: 'container1',
        name: 'rteField',
        value: "<b>I'm</b> the default value. I've been set through the value option."
    });
    
    
    // Example 2
    var div = Y.one('#container2');
    var htmlField = new Y.inputEx.TinyMCEField({ parentEl: div, name: 'test2' });

    var button1 = Y.inputEx.cn('button', null, null, "SetValue");
    div.appendChild(button1);
    Y.one(button1).on('click' ,function() { 
        htmlField.setValue('TinyMCEField can contain <a href="http://en.wikipedia.org/wiki/Html" target="_blank">HTML</a> !'); 
    });
    var button2 = Y.inputEx.cn('button', null, null, "GetValue");
    div.appendChild(button2);
    Y.one(button2).on('click' ,function() { 
        alert(htmlField.getValue());
    });
    var button3 = Y.inputEx.cn('button', null, null, "GetText");
    div.appendChild(button3);
    Y.one(button3).on('click' ,function() { 
        alert(htmlField.getText());
    });
    
    
    // Example 3
    var field3 = new Y.inputEx.TinyMCEField({parentEl: 'container3', name: 'rteField3'});
    field3.setValue("Value set just after init...");
    
    
    // Example 4
    var field4 = new Y.inputEx.TinyMCEField({
        parentEl: 'container4', 
        name: 'rteField4',
        opts: {
            mode : "textareas",
            height: "400",
            width: "400"
        }
    });
    field4.setValue("Value set just after init...");

});