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 (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.


<script src="" type='text/javascript'></script>

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



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 ='#container2');
    var htmlField = new Y.inputEx.TinyMCEField({ parentEl: div, name: 'test2' });

    var button1 ='button', null, null, "SetValue");
    div.appendChild(button1);'click' ,function() { 
        htmlField.setValue('TinyMCEField can contain <a href="" target="_blank">HTML</a> !'); 
    var button2 ='button', null, null, "GetValue");
    div.appendChild(button2);'click' ,function() { 
    var button3 ='button', null, null, "GetText");
    div.appendChild(button3);'click' ,function() { 
    // 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...");