Fork me on GitHub

Example: Basic rte field creation

How to create a rte field.

Basic RTEField creation

Use the following code to create a basic inputEx RTEField.

RTEField setValue/getValue

Test for setValue/getValue using the RTEField.

Using the SimpleEditor

Use the following code to create a SimpleEditor widget

HTML

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

JavaScript

Implementation

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

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

    var button1 = Y.inputEx.cn('button', null, null, "SetValue");
    div.appendChild(button1);
    Y.one(button1).on('click' ,function() { 
        htmlField.setValue('RTEField can contain <strong>HTML</strong> !'); 
    });
    var button2 = Y.inputEx.cn('button', null, null, "GetValue");
    div.appendChild(button2);
    Y.one(button2).on('click' ,function() { 
        alert(htmlField.getValue());
    });
    
    
    // Example 3
    var field3 = new Y.inputEx.RTEField({parentEl: 'container3', name: 'rteField3', editorType: 'simple'});
    field3.setValue("Value set just after init...");


    // Add "yui-skin-sam" class on body for YUI 2 styling
    Y.one('body').addClass("yui-skin-sam");
});