@umbraco-cms/backoffice
    Preparing search index...

    Interface EditorOptions

    interface EditorOptions {
        autofocus: FocusPosition;
        content: Content;
        coreExtensionOptions?: {
            clipboardTextSerializer?: { blockSeparator?: string };
            delete?: {
                async?: boolean;
                filterTransaction?: (transaction: Transaction) => boolean;
            };
        };
        editable: boolean;
        editorProps: EditorProps;
        element: | null
        | Element
        | { mount: HTMLElement }
        | ((editor: HTMLElement) => void);
        emitContentError: boolean;
        enableContentCheck: boolean;
        enableCoreExtensions?:
            | boolean
            | Partial<
                Record<
                    | "delete"
                    | "drop"
                    | "paste"
                    | "editable"
                    | "tabindex"
                    | "commands"
                    | "clipboardTextSerializer"
                    | "focusEvents"
                    | "keymap",
                    false,
                >,
            >;
        enableInputRules: EnableRules;
        enablePasteRules: EnableRules;
        extensions: Extensions;
        injectCSS: boolean;
        injectNonce: undefined
        | string;
        onBeforeCreate: (props: { editor: Editor }) => void;
        onBlur: (
            props: { editor: Editor; event: FocusEvent; transaction: Transaction },
        ) => void;
        onContentError: (
            props: {
                disableCollaboration: () => void;
                editor: Editor;
                error: Error;
            },
        ) => void;
        onCreate: (props: { editor: Editor }) => void;
        onDelete: (
            props: {
                combinedTransform: Transform;
                deletedRange: Range;
                editor: Editor;
                from: number;
                newRange: Range;
                partial: boolean;
                to: number;
                transaction: Transaction;
            } & (
                | { newFrom: number; newTo: number; node: Node; type: "node" }
                | { mark: Mark; type: "mark" }
            ),
        ) => void;
        onDestroy: (props: void) => void;
        onDrop: (e: DragEvent, slice: Slice, moved: boolean) => void;
        onFocus: (
            props: { editor: Editor; event: FocusEvent; transaction: Transaction },
        ) => void;
        onMount: (props: { editor: Editor }) => void;
        onPaste: (e: ClipboardEvent, slice: Slice) => void;
        onSelectionUpdate: (
            props: { editor: Editor; transaction: Transaction },
        ) => void;
        onTransaction: (
            props: {
                appendedTransactions: Transaction[];
                editor: Editor;
                transaction: Transaction;
            },
        ) => void;
        onUnmount: (props: { editor: Editor }) => void;
        onUpdate: (
            props: {
                appendedTransactions: Transaction[];
                editor: Editor;
                transaction: Transaction;
            },
        ) => void;
        parseOptions: ParseOptions;
    }
    Index

    Properties

    autofocus content coreExtensionOptions? editable editorProps element emitContentError enableContentCheck enableCoreExtensions? enableInputRules enablePasteRules extensions injectCSS injectNonce onBeforeCreate onBlur onContentError onCreate onDelete onDestroy onDrop onFocus onMount onPaste onSelectionUpdate onTransaction onUnmount onUpdate parseOptions

    Properties

    autofocus: FocusPosition

    The editor's initial focus position

    content

    content: Content

    The content of the editor (HTML, JSON, or a JSON array)

    coreExtensionOptions?: {
        clipboardTextSerializer?: { blockSeparator?: string };
        delete?: {
            async?: boolean;
            filterTransaction?: (transaction: Transaction) => boolean;
        };
    }

    The editor's core extension options

    editable: boolean

    Whether the editor is editable

    editorProps: EditorProps

    The editor's props

    element:
        | null
        | Element
        | { mount: HTMLElement }
        | ((editor: HTMLElement) => void)

    The element to bind the editor to:

    • If an Element is passed, the editor will be mounted appended to that element
    • If null is passed, the editor will not be mounted automatically
    • If an object with a mount property is passed, the editor will be mounted to that element
    • If a function is passed, it will be called with the editor's element, which should place the editor within the document
    emitContentError: boolean

    If true, the editor will emit the contentError event if invalid content is encountered but enableContentCheck is false. This lets you preserve the invalid editor content while still showing a warning or error message to the user.

    false
    enableContentCheck: boolean

    If true, the editor will check the content for errors on initialization. Emitting the contentError event if the content is invalid. Which can be used to show a warning or error message to the user.

    false
    enableCoreExtensions?:
        | boolean
        | Partial<
            Record<
                | "delete"
                | "drop"
                | "paste"
                | "editable"
                | "tabindex"
                | "commands"
                | "clipboardTextSerializer"
                | "focusEvents"
                | "keymap",
                false,
            >,
        >

    Determines whether core extensions are enabled.

    If set to false, all core extensions will be disabled. To disable specific core extensions, provide an object where the keys are the extension names and the values are false. Extensions not listed in the object will remain enabled.

    // Disable all core extensions
    enabledCoreExtensions: false

    // Disable only the keymap core extension
    enabledCoreExtensions: { keymap: false }

    true
    enableInputRules: EnableRules

    Whether to enable input rules behavior

    enablePasteRules: EnableRules

    Whether to enable paste rules behavior

    extensions: Extensions

    The extensions to use

    injectCSS: boolean

    Whether to inject base CSS styles

    injectNonce: undefined | string

    A nonce to use for CSP while injecting styles

    onBeforeCreate: (props: { editor: Editor }) => void

    Called before the editor is constructed.

    onBlur: (
        props: { editor: Editor; event: FocusEvent; transaction: Transaction },
    ) => void

    Called on blur events.

    onContentError: (
        props: {
            disableCollaboration: () => void;
            editor: Editor;
            error: Error;
        },
    ) => void

    Called when the editor encounters an error while parsing the content. Only enabled if enableContentCheck is true.

    onCreate: (props: { editor: Editor }) => void

    Called after the editor is constructed.

    onDelete: (
        props: {
            combinedTransform: Transform;
            deletedRange: Range;
            editor: Editor;
            from: number;
            newRange: Range;
            partial: boolean;
            to: number;
            transaction: Transaction;
        } & (
            | { newFrom: number; newTo: number; node: Node; type: "node" }
            | { mark: Mark; type: "mark" }
        ),
    ) => void

    Called when content is deleted from the editor.

    onDestroy: (props: void) => void

    Called when the editor is destroyed.

    onDrop: (e: DragEvent, slice: Slice, moved: boolean) => void

    Called when content is dropped into the editor.

    onFocus: (
        props: { editor: Editor; event: FocusEvent; transaction: Transaction },
    ) => void

    Called on focus events.

    onMount: (props: { editor: Editor }) => void

    Called when the editor is mounted.

    onPaste: (e: ClipboardEvent, slice: Slice) => void

    Called when content is pasted into the editor.

    onSelectionUpdate: (props: { editor: Editor; transaction: Transaction }) => void

    Called when the editor's selection is updated.

    onTransaction: (
        props: {
            appendedTransactions: Transaction[];
            editor: Editor;
            transaction: Transaction;
        },
    ) => void

    Called after a transaction is applied to the editor.

    onUnmount: (props: { editor: Editor }) => void

    Called when the editor is unmounted.

    onUpdate: (
        props: {
            appendedTransactions: Transaction[];
            editor: Editor;
            transaction: Transaction;
        },
    ) => void

    Called when the editor's content is updated.

    parseOptions: ParseOptions

    The editor's content parser options

    Settings

    Member Visibility

    On This Page

    Properties