QuillJSEditor

Namespace: Wisej.Web.Ext.QuillJS

Assembly: Wisej.Web.Ext.QuillJS (4.1.0.0)

Control
- Widget
  - QuillJSEditor

Represents a WYSIWYG rich text editor based on the QuillJS (https://quilljs.com/) JavaScript library.

C#
VB.NET

public class QuillJSEditor : Widget

Public Class QuillJSEditor
    Inherits Widget

The content can be accessed as HTML (Html), as plain text (Text) or as a QuillDelta (GetDeltaAsync, SetDeltaAsync, UpdateContent). Html and Text are updated on the server every time the content changes on the client.

Constructors

QuillJSEditor()

Initializes a new instance of the QuillJSEditor class.

The new instance uses the "snow" Theme and an empty Toolbar configuration.

Properties

AutoFocus

Boolean: Returns or sets a value indicating whether the editor should get the focus when it's loaded. (Default: False)

When true, Focus is called after the editor has been initialized on the client.

Html

String: Returns or sets the HTML content of the editor. (Default: null)

The value is updated on the server every time the content changes on the client. When both Html and Text are set, the client uses Html. QuillJS normalizes the HTML to the formats it supports, therefore reading the property may return markup that is different from the value that was assigned.

Example:

Loading and saving the HTML content:

this.quillJSEditor1.Html = "<h1>Title</h1><p>Some <strong>bold</strong> text.</p>";

private void buttonSave_Click(object sender, EventArgs e)
{
    SaveDocument(this.quillJSEditor1.Html);
}

InitScript

String: Returns the JavaScript code that initializes the editor on the client.

The script is loaded from the embedded "startup.js" resource and cannot be changed.

Options

Object: Returns or sets the options object passed to the QuillJS editor when it's created.

The object is the QuillJS configuration (theme, placeholder, readOnly, modules, ...) plus the "html" and "text" values used to initialize the content. Html, Text, ReadOnly, Placeholder, Toolbar and Theme are stored in this object. Configuration values are read only when the editor is created on the client.

Example:

Enabling a QuillJS module that has no dedicated property:

this.quillJSEditor1.Options.modules.history = new DynamicObject();
this.quillJSEditor1.Options.modules.history.delay = 2000;
this.quillJSEditor1.Options.modules.history.maxStack = 500;

Packages

List<Package>: Returns the list of packages loaded by the widget.

The list is populated on first access with the embedded "quill.min.js" library and the "quill.snow.min.css" stylesheet.

Example:

Adding the stylesheet of the "bubble" theme, which is not included in the default packages:

this.quillJSEditor1.Packages.Add(new Package
{
    Name = "QuillBubbleTheme",
    Source = "https://cdn.jsdelivr.net/npm/quill@2/dist/quill.bubble.css"
});
this.quillJSEditor1.Theme = "bubble";

Placeholder

String: Returns or sets the placeholder text displayed when the editor is empty. (Default: "")

The value is passed to QuillJS as the "placeholder" option when the editor is created on the client.

ReadOnly

Boolean: Returns or sets a value indicating whether the editor is read-only. (Default: False)

The value is passed to QuillJS as the "readOnly" option when the editor is created on the client.

Text

String: Returns or sets the plain text content of the editor. (Default: "")

The value is updated on the server every time the content changes on the client and always ends with a new line character. Setting the text replaces the content and removes all formatting, but it's ignored by the client when Html also has a value, since Html takes precedence.

Theme

String: Returns or sets the QuillJS theme to use for the editor. (Default: "snow")

QuillJS provides the "snow" theme (with a toolbar) and the "bubble" theme (with a floating tooltip toolbar). Only the stylesheet of the "snow" theme is included in the default Packages. The value is read only when the editor is created on the client.

Object: Returns or sets the toolbar configuration for the editor.

The value is the QuillJS toolbar module configuration (modules.toolbar): an array of groups of format names, where a format can also be an object mapping the format name to a value or to an array of values for a drop down. The default is an empty object, which doesn't display any toolbar. The value is serialized without changing the case of the member names and is read only when the editor is created on the client.

Example:

Displaying a toolbar with text formats, headers, lists and links:

this.quillJSEditor1.Toolbar = new object[]
{
    new object[] { QuillFormat.Formats.Bold, QuillFormat.Formats.Italic, QuillFormat.Formats.Underline },
    new object[] { new { header = new object[] { 1, 2, 3, false } } },
    new object[] { new { list = QuillFormat.Lists.Ordered }, new { list = QuillFormat.Lists.Bullet } },
    new object[] { QuillFormat.Formats.Link, QuillFormat.Formats.Clean }
};

Methods

Focus()

Moves the focus to the editor.

Focuses the control and the editable area of the QuillJS editor on the client.

Example:

Focusing the editor after loading a document:

this.quillJSEditor1.Html = LoadDocument();
this.quillJSEditor1.Focus();

Format(format, value)

Formats the text at the current selection.

Parameter	Type	Description
format	String	Format name like "bold", "italic", etc. See Formats.
value	Object	Value of the format, i.e. true for "bold", "#ff0000" for "color", or false to remove the format.

When the selection is empty, the format is applied to the text typed next at the caret position.

Example:

Applying formats from buttons outside of the editor:

private void buttonBold_Click(object sender, EventArgs e)
{
    this.quillJSEditor1.Format(QuillFormat.Formats.Bold, true);
}

private void buttonRed_Click(object sender, EventArgs e)
{
    this.quillJSEditor1.Format(QuillFormat.Formats.Color, "#ff0000");
}

FormatLine(index, length, format, value)

Formats all the lines in the specified range.

Parameter	Type	Description
index	Int32	The zero-based starting position of the range to format.
length	Int32	The number of characters in the range to format.
format	String	Line format name like "header", "align", "list", etc.
value	Object	Value of the format, or false to remove the format.

Every line that intersects the range is formatted. Has no effect when called with inline formats such as "bold".

Example:

Centering the first line and turning it into a header:

this.quillJSEditor1.FormatLine(0, 1, QuillFormat.Formats.Align, QuillFormat.Alignments.Center);
this.quillJSEditor1.FormatLine(0, 1, QuillFormat.Formats.Header, 1);

FormatText(index, length, format, value)

Formats the text in the specified range.

Parameter	Type	Description
index	Int32	The zero-based starting position of the text to format.
length	Int32	The number of characters to format.
format	String	Format name like "bold", "italic", etc. See Formats.
value	Object	Value of the format, or false to remove the format.

Example:

Highlighting the first 10 characters:

this.quillJSEditor1.FormatText(0, 10, QuillFormat.Formats.Background, "#ffff00");

GetDeltaAsync()

Returns the content of the editor as a QuillDelta asynchronously.

Returns: Task<QuillDelta>. A task that represents the asynchronous operation. The task result contains the QuillDelta describing the whole content.

The returned delta contains only insert operations, together with their formatting attributes.

Example:

Saving the content as a delta:

private async void buttonSave_Click(object sender, EventArgs e)
{
    var delta = await this.quillJSEditor1.GetDeltaAsync();
    SaveDocument(JSON.Stringify(delta));
}

GetSelectionAsync()

Returns the current selection range asynchronously.

Returns: Task<QuillSelection>. A task that represents the asynchronous operation. The task result contains the QuillSelection, or null when the editor doesn't have the focus.

Example:

Making the selected text bold:

private async void buttonBold_Click(object sender, EventArgs e)
{
    var selection = await this.quillJSEditor1.GetSelectionAsync();
    if (selection != null && selection.Length > 0)
        this.quillJSEditor1.FormatText(selection.Index, selection.Length, QuillFormat.Formats.Bold, true);
}

OnDeltaChanged(e)

Raises the DeltaChanged event.

Parameter	Type	Description
e	DeltaChangedEventArgs

OnLinkClick(e)

Raises the LinkClick event.

Parameter	Type	Description
e	LinkClickEventArgs

OnLoad(e)

Called when the widget is initialized on the client.

Parameter	Type	Description
e	EventArgs

OnSelectionChanged(e)

Raises the SelectionChanged event.

Parameter	Type	Description
e	SelectionChangedEventArgs

OnWidgetEvent(e)

Parameter	Type	Description
e	WidgetEventArgs

RemoveFormat()

Removes all formatting from the current selection.

Both inline and line formats are removed. Nothing happens when the editor doesn't have a selection.

Example:

Clearing the formatting from a button:

private void buttonClear_Click(object sender, EventArgs e)
{
    this.quillJSEditor1.RemoveFormat();
}

RemoveFormat(index, length)

Removes all formatting from the specified range.

Parameter	Type	Description
index	Int32	The zero-based starting position of the range to remove formatting from.
length	Int32	The number of characters to remove formatting from.

Example:

Clearing the formatting of the whole content:

this.quillJSEditor1.RemoveFormat(0, this.quillJSEditor1.Text.Length);

SetDeltaAsync(delta)

Replaces the content of the editor with the specified QuillDelta asynchronously.

Parameter	Type	Description
delta	QuillDelta	The delta describing the new content, made of insert operations.

Returns: Task. A task that represents the asynchronous operation.

The whole content is replaced. Use UpdateContent to apply a change to the existing content.

Example:

Loading a new document:

var delta = new QuillDelta();
delta.Insert("Dear customer,\n");
delta.Insert("Thank you for your order.\n");
await this.quillJSEditor1.SetDeltaAsync(delta);

SetSelection(index, length)

Sets the selection range.

Parameter	Type	Description
index	Int32	The zero-based starting position of the selection.
length	Int32	The number of characters to select, or 0 to move the caret to index .

QuillJS also moves the focus to the editor when the selection is set.

Example:

Selecting a word found in the text:

int index = this.quillJSEditor1.Text.IndexOf("invoice");
if (index > -1)
    this.quillJSEditor1.SetSelection(index, "invoice".Length);

UpdateContent(delta)

Applies the changes described by the specified delta to the content of the editor.

Parameter	Type	Description
delta	QuillDelta	The delta describing the changes, made of retain, insert and delete operations.

Unlike SetDeltaAsync, the existing content is preserved and only modified as described by the delta.

Example:

Inserting italic text after the first 20 characters:

var delta = new QuillDelta();
delta.Retain(20);
delta.Insert("Best regards", new Dictionary<string, object> { { QuillFormat.Formats.Italic, true } });
this.quillJSEditor1.UpdateContent(delta);

Events

DeltaChanged

DeltaChangedEventHandler Fired when the editor content changes.

LinkClick

LinkClickEventHandler Fired when a link is clicked in the editor.

SelectionChanged

SelectionChangedEventHandler Fired when the selection changes in the editor.

Implements

Name	Description
IUserData
IBindableComponent
IDropTarget
IWisejComponent
IWisejControl
IWisejHandler
IWisejSerializable

Constructors​

QuillJSEditor()​

Properties​

AutoFocus​

Html​

InitScript​

Options​

Packages​

Placeholder​

ReadOnly​

Text​

Theme​

Toolbar​

Methods​

Focus()​

Format(format, value)​

FormatLine(index, length, format, value)​

FormatText(index, length, format, value)​

GetDeltaAsync()​

GetSelectionAsync()​

OnDeltaChanged(e)​

OnLinkClick(e)​

OnLoad(e)​

OnSelectionChanged(e)​

OnWidgetEvent(e)​

RemoveFormat()​

RemoveFormat(index, length)​

SetDeltaAsync(delta)​

SetSelection(index, length)​

UpdateContent(delta)​

Events​

DeltaChanged​

LinkClick​

SelectionChanged​

Implements​

Constructors

QuillJSEditor()

Properties

AutoFocus

Html

InitScript

Options

Packages

Placeholder

ReadOnly

Text

Theme

Toolbar

Methods

Focus()

Format(format, value)

FormatLine(index, length, format, value)

FormatText(index, length, format, value)

GetDeltaAsync()

GetSelectionAsync()

OnDeltaChanged(e)

OnLinkClick(e)

OnLoad(e)

OnSelectionChanged(e)

OnWidgetEvent(e)

RemoveFormat()

RemoveFormat(index, length)

SetDeltaAsync(delta)

SetSelection(index, length)

UpdateContent(delta)

Events

DeltaChanged

LinkClick

SelectionChanged

Implements