RichTextEditor SAP SE The RichTextEditor-Control is used to enter formatted text. It uses the third-party component called TinyMCE. In addition to the native toolbar, you can also use a toolbar built with SAPUI5 controls. <h3>Overview</h3> With version 1.48 onward, aside from the native toolbar of the TinyMCE, the <code>RichTextEditor</code> can also use a toolbar built with SAPUI5 controls. Which toolbar is used is taken into consideration only while the control is being initialized and it will not be possible to change it during runtime, because of lifecycle incompatibilities between the SAPUI5 and the third-party library. The custom toolbar acts like a wrapper to the native toolbar and takes care of synchronizing the state of its internal controls with the current state of the selection in the editor (bold, italics, font styles etc.). <h4>Limitations</h4> <b>Note: The <code>RichTextEditor</code> uses a third-party component and therefore some additional limitations apply for its proper usage and support. For more information see the Preamble section in {@link topic:d4f3f1598373452bb73f2120930c133c sap.ui.richtexteditor}. </b> <h3>Guidelines</h3> <ul> <li> The <code>RichTextEditor</code> should be used for desktop apps only.</li> <li> In order to be usable, the control needs a minimum width 17.5 rem and height of 12.5 rem.</li> <li> Do not instantiate the <code>RichTextEditor</code> from a hidden container.</li> <li> Make sure you destroy the <code>RichTextEditor</code> instance instead of hiding it and create a new one when you show it again.</li> </ul> <h3>Usage</h3> <h4>When to use</h4> <ul> <li>You want to enable users to enter text and other elements (tables, images) with different styles and colors.</li> <li>You need to provide a tool for texts that require additional formatting.</li> </ul> <h4> When not to use</h4> <ul> <li>You want to let users add simple text that doesn’t require formatting. Use {@link sap.m.TextArea text area} instead.</li> <li>Use callbacks to the native third-party API with care, as there may be compatibility issues with later versions.</li> </ul> The RichTextEditor of SAPUI5 contains a third party component TinyMCE provided by Moxiecode Systems AB. The SAP license agreement covers the development of applications with RichTextEditor of SAPUI5 (as of May 2014). sap.ui.core/Control An HTML string representing the editor content. Because this is HTML, the value cannot be generically escaped to prevent cross-site scripting, so the application is responsible for doing so. Overwriting this property would also reset editor's Undo manager and buttons "Undo"/"Redo" would be set to their initial state. The text direction Width of RichTextEditor control in CSS units. Height of RichTextEditor control in CSS units. <b>Note:</b> If the height property results in a value smaller than 200px, the minimum height of 200px will be applied. The editor implementation to use. Valid values are the ones found under sap.ui.richtexteditor.EditorType and any other editor identifier that may be introduced by other groups (hence this is not an enumeration). <b>Notes:</b> <ul><li>TinyMCE version 3 is no longer supported and cannot be used. If you set the property to TinyMCE, it will load TinyMCE version 4.</li> <li>Any attempts to set this property after the first rendering will not have any effect.</li></ul> Relative or absolute URL where the editor is available. Must be on the same server. <b>Note:</b> Any attempts to set this property after the first rendering will not have any effect. The editorLocation is set implicitly when choosing the editorType. Determines whether the editor content can be modified by the user. When set to "false" there might not be any editor toolbar. Determines whether the toolbar button group containing commands like Bold, Italic, Underline and Strikethrough is available. Changing this after the initial rendering will result in some visible redrawing. Determines whether the toolbar button group containing text alignment commands is available. Changing this after the initial rendering will result in some visible redrawing. Determines whether the toolbar button group containing commands like Bullets and Indentation is available. Changing this after the initial rendering will result in some visible redrawing. Determines whether the toolbar button group containing commands like Font, Font Size and Colors is available. Changing this after the initial rendering will result in some visible redrawing. Determines whether the toolbar button group containing commands like Cut, Copy and Paste is available. Changing this after the initial rendering will result in some visible redrawing. Determines whether the toolbar button group containing commands like Insert Image and Insert Smiley is available. Changing this after the initial rendering will result in some visible redrawing. Determines whether the toolbar button group containing commands like Create Link and Remove Link is available. Changing this after the initial rendering will result in some visible redrawing. Determines whether the toolbar button group containing commands like Undo and Redo is available. Changing this after the initial rendering will result in some visible redrawing. Determines whether the text in the editor is wrapped. This does not affect the editor's value, only the representation in the control. Determines whether a value is required. Determines whether to run the HTML sanitizer once the value (HTML markup) is applied or not. To configure allowed URLs please use the whitelist API via <code>jQuery.sap.addUrlWhitelist</code> An array of plugin configuration objects with the obligatory property "name". Each object has to contain a property "name" which then contains the plugin name/ID. Determines whether or not to use the legacy theme for the toolbar buttons. If this is set to false, the default theme for the editor will be used (which might change slightly with every update). The legacy theme has the disadvantage that not all functionality has its own icon, so using non default buttons might lead to invisible buttons with the legacy theme - use the default editor theme in this case. An array of button configurations. These configurations contain the names of buttons as array in the property "buttons" and the name of the group in "name", they can also contain the "row" where the buttons should be placed, a "priority" and whether the buttons are "visible". See method addButtonGroup() for more details on the structure of the objects in this array. Determines whether a Fiori Toolbar is used instead of the TinyMCE default toolbar one. It is applied only when the EditorType is TinyMCE4 and sap.m library is loaded. <b>Note:</b> The <code>customToolbar</code> property will have effect only on initial loading. Changing it during runtime will not affect the initially loaded toolbar. Event is fired when the text in the field has changed AND the focus leaves the editor or when the Enter key is pressed. The new control value. Fired when the used editor is loaded and ready (its HTML is also created). Analogous to the ready event, the event is fired when the used editor is loaded and ready. But the event is fired after every time the control is ready to use and not only once like the ready event. This event is fired right before the TinyMCE instance is created and can be used to change the settings object that will be given to TinyMCE. The parameter "configuration" is the javascript oject that will be given to TinyMCE upon first instantiation. The configuration parameter contains a map that can be changed in the case of TinyMCE. Custom toolbar wrapper. The wrapper gets instantiated when customToolbar property is set to true. Custom buttons are meant to extend the <code>RichTextEditor</code>'s custom toolbar. Though type is set to sap.ui.Control, only sap.m.Button is allowed. <b>Note:</b> customButtons are available only when the customToolbar is enabled and all the requirements are fulfilled. Returns the current editor's instance. CAUTION: using the native editor introduces a dependency to that editor and breaks the wrapping character of the RichTextEditor control, so it should only be done in justified cases.