inputEx - RTEField Usage

Basic RTEField creation

Use the following code to create a basic inputEx RTEField.

This text field can contain stylized text and graphics. To cycle through all formatting options, use the keyboard shortcut Control + Shift + T to place focus on the toolbar and navigate between option heading names.

Common formatting keyboard shortcuts:

  • Control Shift B sets text to bold
  • Control Shift I sets text to italic
  • Control Shift U underlines text
  • Control Shift [ aligns text left
  • Control Shift | centers text
  • Control Shift ] aligns text right
  • Control Shift L adds an HTML link
  • To exit this text editor use the keyboard shortcut Control + Shift + ESC.

You have left the Rich Text Editor.

1new inputEx.RTEField({parentEl: 'container1', name: 'rteField',value:"I'm the default value. I've been set through the value option."}); 
view plain | print | ?

RTEField setValue/getValue

Test for setValue/getValue using the RTEField.

This text field can contain stylized text and graphics. To cycle through all formatting options, use the keyboard shortcut Control + Shift + T to place focus on the toolbar and navigate between option heading names.

Common formatting keyboard shortcuts:

  • Control Shift B sets text to bold
  • Control Shift I sets text to italic
  • Control Shift U underlines text
  • Control Shift [ aligns text left
  • Control Shift | centers text
  • Control Shift ] aligns text right
  • Control Shift L adds an HTML link
  • To exit this text editor use the keyboard shortcut Control + Shift + ESC.

You have left the Rich Text Editor.

1var div = YAHOO.util.Dom.get('container2'); 
2var htmlField = new inputEx.RTEField({parentEl: div, name: 'test2'}); 
3 
4var button1 = inputEx.cn('button', null, null, "SetValue"); 
5div.appendChild(button1); 
6YAHOO.util.Event.addListener(button1, "click" ,function() {  
7    htmlField.setValue('RTEField can contain HTML !');  
8}); 
9var button2 = inputEx.cn('button', null, null, "GetValue"); 
10div.appendChild(button2); 
11YAHOO.util.Event.addListener(button2, "click" ,function() {  
12    alert(htmlField.getValue()); 
13}); 
view plain | print | ?

Using the SimpleEditor

Use the following code to create a SimpleEditor widget

This text field can contain stylized text and graphics. To cycle through all formatting options, use the keyboard shortcut Shift + Escape to place focus on the toolbar and navigate between options with your arrow keys. To exit this text editor use the Escape key and continue tabbing.

Common formatting keyboard shortcuts:

  • Control Shift B sets text to bold
  • Control Shift I sets text to italic
  • Control Shift U underlines text
  • Control Shift L adds an HTML link

You have left the Rich Text Editor.

1var field3 = new inputEx.RTEField({parentEl: 'container3', name: 'rteField3', editorType: 'simple'}); 
2field3.setValue("Value set just after init..."); 
view plain | print | ?