Class ContentEditorAbstract

The Content Editor component is a WYSIWYG (What You See Is What You Get) editor, providing a user-friendly interface for creating and editing rich text content.

It offers real-time preview of changes, enhancing the user experience and supports both Markdown and WYSIWYG modes, catering to different user preferences and use cases.

Element

ix-content-editor

Example

Understanding properties and methods

// get the HTML element of the Content Editor using the provided GUID.
var contentEditor = ix.api.dom.getHtml("<GUID>");

// set/get a "property" via HTML attribute
contentEditor.property = "value";       // sets the property
contentEditor.property;                 // returns the property -> "value";

// set/get the value via function (method)
contentEditor.setValue("Hello World");  // sets the value
contentEditor.getValue();               // returns the value -> "Hello World";

Refer to the provided examples for each property to gain a deeper understanding of utilizing the getter/setter functionality.

Note

The Content Editor utilizes the Textarea view control when displaying content on view pages. Refer to this documentation for guidance on its use on view pages as well.

Hierarchy

  • ContentEditor

Properties

placeholder readonly required value

Methods

getValue setValue setView

Properties

Abstract placeholder

placeholder: undefined | string

The placeholder attribute specifies a short hint that describes the expected value of the input field and will be displayed before the user enters a value.

Example

// sets the placeholder
contentEditor.placeholder = "Please add some content";

// returns the placeholder -> "Please add some content";
contentEditor.placeholder;

Abstract readonly

readonly: boolean

Makes the Content-Editor not mutable, meaning the user can not edit the value.

Example

// sets the readonly state
contentEditor.readonly = true;

// returns the readonly state -> true;
contentEditor.readonly;

Abstract required

required: boolean

Indicates that the user must specify a value for the Content-Editor before the owning form can be submitted.

Example

// sets the required state
contentEditor.required = true;

// returns the required state -> true;
contentEditor.required;

Abstract value

value: string

Returns/Sets the current value of the control.

Example

// sets the value
contentEditor.value = "Hello World";

// returns the value -> "Hello World";
contentEditor.value;

Methods

Abstract getValue

  • Returns the value of the field.

    Returns string

    Example

    contentEditor.getValue();

    Hint

    This is a convenient function for the getter of value.

Abstract setValue

  • Sets a value for the control.

    Parameters

    • value: string

      The value to set.

    Returns void

    Example

    contentEditor.setValue("Hello World");

    Hint

    This is a convenient function for the setter of value.

Abstract setView

  • Switch the editor's display mode to "Markdown" or "WYSIWYG".

    WYSIWYG offers visual real-time editing similar to the final result, while Markdown uses plain text with simple formatting codes to structure content for later conversion.

    Parameters

    • editorType: "markdown" | "wysiwyg"

    Returns void

    Example

    // sets the view to markdown
    contentEditor.setView("markdown");

    // sets the view to wysiwyg
    contentEditor.setView("wysiwyg");

Settings

Member Visibility

Theme

On This Page