This sample demonstrate the usage of API in Rich Text Editor, use the properties panel to change the maximum length, read only mode, disable status, to get value, enable HTML encode, select all content and get selected HTML from the Rich Text Editor.
Rich Text Editor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.
API’s:
maxLength - allows restricting the maximum length to be entered.
readOnly - allows to change it as a non-editable state.
enabled - enable or disable the RTE component.
enableHtmlEncode - Get the encoded string value through value property and source code panel
getValue - get the value of RTE.
getSelection - get the selected text of RTE.
selectAll - select all content in RTE.
Maximum Length | |
ReadOnly | |
Enabled | |
Enable Html Encode | |
In this demos, Ensuring the API'S behavious by doing
maxLength textbox to change maximum Length of character.readOnly check box to enable/disable editable and non-editable mode of the RTE.enabled check box to enable/disable the RTE component.enableHtmlEncode check box to enableHtmlEncode/disableHtmlEncode the RTE component. getValue button which shows the RTE values in the alert window.getSelection button which shows the selectedText in the alert window.selectAll button selecting all text content in the RTE.Injecting Module
Rich Text Editor features are segregated into individual feature-wise modules. In this demo we have used following injectable services ToolbarService, LinkService, ImageService, HtmlEditorService, CountService, QuickToolbarService, PasteCleanupService into the @NgModule.providers section.