Mojo.Widget.RichTextEdit

Namespace Detail

Overview

There is a simple RichTextEdit widget that behaves exactly like a multiline text field, but in addition supports applying Bold, Italic and Underline styles to arbitrary runs of text within the field. You declare an x-mojo-element="RichTextEdit" DIV in your scene and set it up in your assistant without attributes or a model.

To enable the styling, set the richTextEditMenu property to true in the AppMenu attributes (see Menus for more information on the App Menu).

Declaration 

<div x-mojo-element="RichTextEdit" id="richTextEditId" class="message-rte"
  name="richTextEdit"></div>
Properties Required Value Description
x-mojo-element Required RichTextEdit Declares the widget as type 'RichTextEdit'.
id Required Any String Identifies the widget element for use when instantiating or rendering.
class Optional Any String Provide your own unique class and override the framework's styles.
name Optional Any String Adds a unique name to the RichTextEdit widget; generally used in templates.

Events 

this.controller.listen(this.controller.get("richtexteditId"), "blur",
  this.handleUpdate);
Event Type Value Event Handling
blur N/A Removes focus from the element.
focus N/A Puts focus on the element.

Instantiation 

this.controller.setupWidget("richtexteditId",
  this.attributes = {
  },
  this.model = {
  }
);

Get or Set Content

To obtain or set the content of the RichTextEdit field, use the widget's innerHTML property: 

var myRichText = this.controller.get('richtexteditId').innerHTML;
var newText = "<strong>Hello!</strong> <em>This is a</em> <u>test</u>.";
this.controller.get("richTextEditId").innerHTML = newText;

Attribute Properties

The RichTextEdit widget has no attributes.

Model Properties

The RichTextEdit widget has no model properties.

Methods

The RichTextEdit widget has no methods.