ReadOnly: Whether to instantiate the editor to read-only mode.Default: False
Placeholder: Placeholder text to show when the editor is empty.Default: “Compose an epic…”
ThemeId: Identifier of theme to use. The builtin options are “bubble” or “snow”. An invalid or falsy value will load a default minimal theme.Default: Entities.Theme.Snow
ExtendedOptions: For more options please visit the official documentation here: https://quilljs.com/docs/quickstart/
EditorChangeEvent: Emitted when either text-change or selection-change would be emitted, even when the source is "silent". The first parameter is the event name, either text-change or selection-change, followed by the arguments normally passed to those respective handlers.IsMandatory: False
SelectionChangeEvent: Emitted when a user or API causes the selection to change, with a range representing the selection boundaries. A null range indicates selection loss (usually caused by loss of focus from the editor). You can also use this event as a focus change event by just checking if the emitted range is null or not.IsMandatory: False
TextChangedEvent: Emitted when the contents of Quill have changed. Details of the change, representation of the editor contents before the change, along with the source of the change are provided.IsMandatory: False
Renders the HTML generated by the editor or any other source. Does not create an editor instance.
HTML: text code to render.
Content:
QuillJ_SetText: Sets contents of editor with given text, returning a Delta representing the change.
QuillJS_DeleteText: Deletes text from the editor.
QuillJS_GetContents: Retrieves contents of the editor, with formatting data, represented by a Delta object.
QuillJS_GetLength: Retrieves the length of the editor contents. Note even when Quill is empty, there is still a blank line represented by ‘\n’, so getLength will return 1.
QuillJS_GetText: Retrieves the string contents of the editor. If no Index and Length are specified, all text will be returned. Non-string content is omitted, so the returned string’s length may be shorter than the editor’s as returned by getLength. Note even when Quill is empty, there is still a blank line in the editor, so in these cases getText will return ‘\n’.
QuillJS_InsertEmbed: Insert embedded content into the editor, returning a Delta representing the change.
QuillJS_InsertText: Inserts text into the editor, optionally with a specified format or multiple formats.
QuillJS_SetContents: Overwrites editor with given contents.
QuillJS_UpdateContents: Applies Delta to editor contents, returning a Delta representing the change.
QuillJS_GetHTML: Retrieves the HTML contents of the editor.
Editor:
QuillJS_Blur: Removes focus from the editor.
QuillJS_Enable: Set ability for users to edit, via input devices like the mouse or keyboard.
QuillJS_Focus: Focuses the editor and restores its last range.
QuillJS_HasFocus: Checks if the editor has focus. Note focus on toolbar, tooltips, does not count as the editor.
QuillJS_Update: Synchronously check editor for user updates and fires events, if changes have occurred. Useful for collaborative use cases during conflict resolution requiring the latest up to date state.
Extension:
QuillJS_Debug: Enables logging messages at a given level.
Formatting:
QuillJS_Format: Format text at user’s current selection, returning a Delta representing the change. If the user’s selection length is 0, i.e. it is a cursor, the format will be set active, so the next character the user types will have that formatting.
QuillJS_FormatLine: Formats all lines in a given range, returning a Delta representing the change. See formats for a list of available formats. Has no effect when called with inline formats. To remove formatting, pass false for the value argument. The user’s selection may not be preserved.
QuillJS_FormatText: Formats text in the editor, returning a Delta representing the change. For line level formats, such as text alignment, target the newline character or use the formatLine helper. See formats for a list of available formats. To remove formatting, pass false for the value argument. The user’s selection may not be preserved.
QuillJS_GetFormat: Retrieves common formatting of the text in the given range. For a format to be reported, all text within the range must have a truthy value. If there are different truthy values, an array with all truthy values will be reported. If no range is supplied, the user’s current selection range is used. May be used to show which formats have been set on the cursor. If called with no arguments, the user’s current selection range will be used.
QuillJS_RemoveFormat: Removes all formatting and embeds within a given range, returning a Delta representing the change. Line formatting will be removed if any part of the line is included in the range. The user’s selection may not be preserved.
Selection:
QuillJS_GetBounds: Retrieves the pixel position (relative to the editor container) and dimensions of a selection at a given location. The user’s current selection need not be at that index. Useful for calculating where to place tooltips.
QuillJS_GetSelection: Retrieves the user’s selection range, optionally to focus the editor first. Otherwise -1 may be returned if the editor does not have focus.
QuillJS_SetSelection: Sets user selection to a given range, which will also focus the editor. Providing null as the selection range will blur the editor.
These step-by-step instructions will guide you through the process of using the Quill rich text editor with a simple example to set and get contents.
Step 1: Dependencies
Begin by installing the Quill component in your desired environment. Click the "Manage Dependencies" button and add the following references to your application:
Step 2: Using The Text Editor
Add the QuillJS_Editor block to your desired screen and assign it a name:
Step 3: Adding Contents
While the editor is ready to use, it initializes empty. To populate the editor with existing content from a local source or a database, use the provided client action "QuillJS_SetContents". Set the inputs "WidgetId" (editor block name identifier) and "Content" (data to display). Call this action in an event action such as the "on ready" event of a screen or an "on after fetch" event.
The input data for "Content" should be a text delta object, similar to the example below:
Step 4: Get Editor Contents
Retrieve the entire content of an editor using the action "QuillJS_GetContents". Set the editor's "WidgetId" to specify the editor you want to extract contents from and the obtained data will be a text delta object. If you want to display this data later, save it and use it in the previous action.