Options
All
  • Public
  • Public/Protected
  • All
Menu

Editor for Content Model.

Hierarchy

Implements

  • ILegacyEditor

Index

Constructors

constructor

Methods

addContentEditFeature

  • addContentEditFeature(feature: GenericContentEditFeature<PluginEvent>): void

addDomEventHandler

  • addDomEventHandler(nameOrMap: string | Record<string, DOMEventHandler<Event>>, handler?: DOMEventHandler<Event>): () => void

addUndoSnapshot

  • addUndoSnapshot(callback?: (start: default, end: default) => any, changeSource?: string, canUndoByBackspace?: boolean, additionalData?: default): void
  • Add undo snapshot, and execute a format callback function, then add another undo snapshot, then trigger ContentChangedEvent with given change source. If this function is called nested, undo snapshot will only be added in the outside one

    Parameters

    • Optional callback: (start: default, end: default) => any

      The callback function to perform formatting, returns a data object which will be used as the data field in ContentChangedEvent if changeSource is not null.

        • (start: default, end: default): any
        • Parameters

          • start: default
          • end: default

          Returns any

    • Optional changeSource: string

      The change source to use when fire ContentChangedEvent. When the value is not null, a ContentChangedEvent will be fired with change source equal to this value

    • Optional canUndoByBackspace: boolean

      True if this action can be undone when user press Backspace key (aka Auto Complete).

    • Optional additionalData: default

    Returns void

announce

attachDomEvent

  • attachDomEvent(eventMap: Record<string, DOMEventRecord<Event>>): () => void

collapseNodes

  • collapseNodes(start: Node, end: Node, canSplitParent: boolean): Node[]
  • Collapse nodes within the given start and end nodes to their common ancestor node, split parent nodes if necessary

    Parameters

    • start: Node

      The start node

    • end: Node

      The end node

    • canSplitParent: boolean

      True to allow split parent node there are nodes before start or after end under the same parent and the returned nodes will be all nodes from start through end after splitting False to disallow split parent

    Returns Node[]

    When canSplitParent is true, returns all node from start through end after splitting, otherwise just return start and end

contains

  • contains(arg: Node | Range): boolean

deleteNode

  • deleteNode(node: Node): boolean

deleteSelectedContent

  • deleteSelectedContent(): default

dispose

  • dispose(): void

ensureTypeInContainer

  • ensureTypeInContainer(position: default, keyboardEvent?: KeyboardEvent): void
  • deprecated

    Ensure user will type into a container element rather than into the editor content DIV directly

    Parameters

    • position: default

      The position that user is about to type to

    • Optional keyboardEvent: KeyboardEvent

      Optional keyboard event object

    Returns void

focus

  • focus(): void

formatContentModel

getBlockElementAtNode

  • getBlockElementAtNode(node: Node): default

getBlockTraverser

  • getBlockTraverser(startFrom?: ContentPosition | CompatibleContentPosition): default
  • Get a content traverser for current block element start from specified position

    Parameters

    • startFrom: ContentPosition | CompatibleContentPosition = ...

      Start position of the traverser. Default value is ContentPosition.SelectionStart

    Returns default

    A content traverser, or null if editor never got focus before

getBodyTraverser

  • getBodyTraverser(startNode?: Node): default
  • Get a content traverser for the whole editor

    Parameters

    • Optional startNode: Node

      The node to start from. If not passed, it will start from the beginning of the body

    Returns default

getColorManager

getContent

  • getContent(mode?: GetContentMode | CompatibleGetContentMode): string
  • Get current editor content as HTML string

    Parameters

    • mode: GetContentMode | CompatibleGetContentMode = ...

      specify what kind of HTML content to retrieve

    Returns string

    HTML string representing current editor content

getContentModelCopy

  • Create Content Model from DOM tree in this editor

    Parameters

    • mode: "connected" | "disconnected" | "clean"

      What kind of Content Model we want. Currently we support the following values:

      • disconnected: Returns a disconnected clone of Content Model from editor which you can do any change on it and it won't impact the editor content. If there is any entity in editor, the returned object will contain cloned copy of entity wrapper element. If editor is in dark mode, the cloned entity will be converted back to light mode.
      • clean: Similar with disconnected, this will return a disconnected model, the difference is "clean" mode will not include any selection info. This is usually used for exporting content

    Returns ContentModelDocument

getContentSearcherOfCursor

  • getContentSearcherOfCursor(event?: PluginEvent): default
  • Get a text traverser of current selection

    Parameters

    • Optional event: PluginEvent

      Optional, if specified, editor will try to get cached result from the event object first. If it is not cached before, query from DOM and cache the result into the event object

    Returns default

    A content traverser, or null if editor never got focus before

Protected getCore

getCustomData

  • getCustomData<T>(key: string, getter?: () => T, disposer?: (value: T) => void): T
  • Get custom data related to this editor

    Type parameters

    • T

    Parameters

    • key: string

      Key of the custom data

    • Optional getter: () => T

      Getter function. If custom data for the given key doesn't exist, call this function to get one and store it if it is specified. Otherwise return undefined

        • (): T
        • Returns T

    • Optional disposer: (value: T) => void

      An optional disposer function to dispose this custom data when dispose editor.

        • (value: T): void
        • Parameters

          • value: T

          Returns void

    Returns T

getDOMCreator

getDOMHelper

getDOMSelection

getDarkColorHandler

  • getDarkColorHandler(): default

getDefaultFormat

  • getDefaultFormat(): default

getDocument

  • getDocument(): Document

getEditorDomAttribute

  • getEditorDomAttribute(name: string): string

getElementAtCursor

  • getElementAtCursor(selector?: string, startFrom?: Node, event?: PluginEvent): HTMLElement
  • Get an HTML element from current cursor position. When expectedTags is not specified, return value is the current node (if it is HTML element) or its parent node (if current node is a Text node). When expectedTags is specified, return value is the first ancestor of current node which has one of the expected tags. If no element found within editor by the given tag, return null.

    Parameters

    • Optional selector: string

      Optional, an HTML selector to find HTML element with.

    • Optional startFrom: Node

      Start search from this node. If not specified, start from current focused position

    • Optional event: PluginEvent

      Optional, if specified, editor will try to get cached result from the event object first. If it is not cached before, query from DOM and cache the result into the event object

    Returns HTMLElement

getEnvironment

getFocusedPosition

  • getFocusedPosition(): default

getPendableFormatState

  • getPendableFormatState(): PendableFormatState

getPendingFormat

getRelativeDistanceToEditor

  • getRelativeDistanceToEditor(element: HTMLElement, addScroll?: boolean): number[]
  • deprecated

    Use getVisibleViewport() instead.

    Get current relative distance from top-left corner of the given element to top-left corner of editor content DIV.

    Parameters

    • element: HTMLElement

      The element to calculate from. If the given element is not in editor, return value will be null

    • Optional addScroll: boolean

      When pass true, The return value will also add scrollLeft and scrollTop if any. So the value may be different than what user is seeing from the view. When pass false, scroll position will be ignored.

    Returns number[]

    An [x, y] array which contains the left and top distances, or null if the given element is not in editor.

getScrollContainer

  • getScrollContainer(): HTMLElement

getSelectedRegions

  • getSelectedRegions(type?: Table | Table): default[]

getSelectionPath

  • getSelectionPath(): default
  • Get current selection in a serializable format It does a live pull on the selection, if nothing retrieved, return whatever we have in cache.

    Returns default

    current selection path, or null if editor never got focus before

getSelectionRange

  • getSelectionRange(tryGetFromCache?: boolean): Range
  • Get current selection range from Editor. It does a live pull on the selection, if nothing retrieved, return whatever we have in cache.

    Parameters

    • tryGetFromCache: boolean = true

      Set to true to retrieve the selection range from cache if editor doesn't own the focus now. Default value is true

    Returns Range

    current selection range, or null if editor never got focus before

getSelectionRangeEx

  • getSelectionRangeEx(): SelectionRangeEx
  • Get current selection range from Editor. It does a live pull on the selection, if nothing retrieved, return whatever we have in cache.

    Returns SelectionRangeEx

    current selection range, or null if editor never got focus before

getSelectionTraverser

  • getSelectionTraverser(range?: Range): default
  • Get a content traverser for current selection

    Parameters

    • Optional range: Range

    Returns default

    A content traverser, or null if editor never got focus before

getSizeTransformer

  • getSizeTransformer(): SizeTransformer

getSnapshotsManager

getStyleBasedFormatState

  • getStyleBasedFormatState(): StyleBasedFormatState

getTrustedHTMLHandler

getUndoState

  • getUndoState(): EditorUndoState

getVisibleViewport

  • getVisibleViewport(): Rect

getZoomScale

  • getZoomScale(): number
  • Get current zoom scale, default value is 1 When editor is put under a zoomed container, need to pass the zoom scale number using EditorOptions.zoomScale to let editor behave correctly especially for those mouse drag/drop behaviors

    Returns number

    current zoom scale number

hasFocus

  • hasFocus(): boolean

insertContent

  • insertContent(content: string, option?: InsertOption): void
  • Insert HTML content into editor

    Parameters

    • content: string
    • Optional option: InsertOption

      Insert options. Default value is: position: ContentPosition.SelectionStart updateCursor: true replaceSelection: true insertOnNewLine: false

    Returns void

insertNode

  • insertNode(node: Node, option?: InsertOption): boolean
  • Insert node into editor

    Parameters

    • node: Node

      The node to insert

    • Optional option: InsertOption

      Insert options. Default value is: position: ContentPosition.SelectionStart updateCursor: true replaceSelection: true insertOnNewLine: false

    Returns boolean

    true if node is inserted. Otherwise false

isDarkMode

  • isDarkMode(): boolean

isDisposed

  • isDisposed(): boolean

isEmpty

  • isEmpty(trim?: boolean): boolean
  • Check whether the editor contains any visible content

    Parameters

    • Optional trim: boolean

      Whether trim the content string before check. Default is false

    Returns boolean

    True if there's no visible content, otherwise false

isExperimentalFeatureEnabled

  • isExperimentalFeatureEnabled(featureName: string): boolean

isFeatureEnabled

  • isFeatureEnabled(feature: ExperimentalFeatures | CompatibleExperimentalFeatures): boolean

isInIME

  • isInIME(): boolean

isInShadowEdit

  • isInShadowEdit(): boolean

isPositionAtBeginning

  • isPositionAtBeginning(position: default): boolean
  • Check if this position is at beginning of the editor. This will return true if all nodes between the beginning of target node and the position are empty.

    Parameters

    • position: default

      The position to check

    Returns boolean

    True if position is at beginning of the editor, otherwise false

paste

  • paste(clipboardData: default, pasteAsText?: boolean, applyCurrentFormat?: boolean, pasteAsImage?: boolean): void
  • Paste into editor using a clipboardData object

    Parameters

    • clipboardData: default

      Clipboard data retrieved from clipboard

    • pasteAsText: boolean = false

      Force pasting as plain text. Default value is false

    • applyCurrentFormat: boolean = false
    • pasteAsImage: boolean = false

    Returns void

queryElements

  • queryElements(selector: string, scopeOrCallback?: QueryScope | CompatibleQueryScope | ((node: Node) => any), callback?: (node: Node) => any): HTMLElement[]
  • Parameters

    • selector: string
    • scopeOrCallback: QueryScope | CompatibleQueryScope | ((node: Node) => any) = ...
    • Optional callback: (node: Node) => any
        • (node: Node): any
        • Parameters

          • node: Node

          Returns any

    Returns HTMLElement[]

redo

  • redo(): void

removeContentEditFeature

  • removeContentEditFeature(feature: GenericContentEditFeature<PluginEvent>): void

replaceNode

  • replaceNode(existingNode: Node, toNode: Node, transformColorForDarkMode?: boolean): boolean
  • Replace a node in editor content with another node

    Parameters

    • existingNode: Node

      The existing node to be replaced

    • toNode: Node

      node to replace to

    • Optional transformColorForDarkMode: boolean

      (optional) Whether to transform new node to dark mode. Default is false

    Returns boolean

    true if node is replaced. Otherwise false

restoreSnapshot

  • restoreSnapshot(snapshot: Snapshot): void

runAsync

  • runAsync(callback: (editor: default & IEditor) => void): () => void
  • Run a callback function asynchronously

    Parameters

    • callback: (editor: default & IEditor) => void

      The callback function to run

        • (editor: default & IEditor): void
        • Parameters

          Returns void

    Returns () => void

    a function to cancel this async run

      • (): void
      • Returns void

select

  • select(arg1: Node | Range | default | SelectionRangeEx | default, arg2?: number | default | default, arg3?: Node, arg4?: number): boolean

setContent

  • setContent(content: string, triggerContentChangedEvent?: boolean): void
  • Set HTML content to this editor. All existing content will be replaced. A ContentChanged event will be triggered

    Parameters

    • content: string

      HTML content to set in

    • triggerContentChangedEvent: boolean = true

      True to trigger a ContentChanged event. Default value is true

    Returns void

setDOMSelection

setDarkModeState

  • setDarkModeState(isDarkMode?: boolean): void

setEditorDomAttribute

  • setEditorDomAttribute(name: string, value: string): void

setEditorStyle

  • setEditorStyle(key: string, cssRule: string, subSelectors?: string[] | "before" | "after"): void
  • Add CSS rules for editor

    Parameters

    • key: string

      A string to identify the CSS rule type. When set CSS rules with the same key again, existing rules with the same key will be replaced.

    • cssRule: string

      The CSS rule string, must be a valid CSS rule string, or browser may throw exception. Pass null to clear existing rules

    • Optional subSelectors: string[] | "before" | "after"

      @optional If the rule is used for child element under editor, use this parameter to specify the child elements. Each item will be combined with root selector together to build a separate rule.

    Returns void

setLogicalRoot

  • setLogicalRoot(logicalRoot: HTMLDivElement): void

setZoomScale

  • setZoomScale(scale: number): void
  • Set current zoom scale, default value is 1 When editor is put under a zoomed container, need to pass the zoom scale number using EditorOptions.zoomScale to let editor behave correctly especially for those mouse drag/drop behaviors

    Parameters

    • scale: number

      The new scale number to set. It should be positive number and no greater than 10, otherwise it will be ignored.

    Returns void

startShadowEdit

  • startShadowEdit(): void
  • Make the editor in "Shadow Edit" mode. In Shadow Edit mode, all format change will finally be ignored. This can be used for building a live preview feature for format button, to allow user see format result without really apply it. This function can be called repeated. If editor is already in shadow edit mode, we can still use this function to do more shadow edit operation.

    Returns void

stopShadowEdit

  • stopShadowEdit(): void

takeSnapshot

transformToDarkColor

  • transformToDarkColor(node: Node, direction?: ColorTransformDirection | CompatibleColorTransformDirection): void
  • Transform the given node and all its child nodes to dark mode color if editor is in dark mode

    Parameters

    • node: Node

      The node to transform

    • direction: ColorTransformDirection | CompatibleColorTransformDirection = ...

      The transform direction. @default ColorTransformDirection.LightToDark

    Returns void

triggerContentChangedEvent

  • triggerContentChangedEvent(source?: string, data?: any): void
  • Trigger a ContentChangedEvent

    Parameters

    • source: string = ...

      Source of this event, by default is 'SetContent'

    • Optional data: any

      additional data for this event

    Returns void

triggerEvent

  • Trigger an event to be dispatched to all plugins

    Type parameters

    Parameters

    • eventType: T

      Type of the event

    • data: PluginEventData<T>

      data of the event with given type, this is the rest part of PluginEvent with the given type

    • broadcast: boolean = false

      indicates if the event needs to be dispatched to all plugins True means to all, false means to allow exclusive handling from one plugin unless no one wants that

    Returns PluginEventFromType<T>

    the event object which is really passed into plugins. Some plugin may modify the event object so the result of this function provides a chance to read the modified result

triggerPluginEvent

  • triggerPluginEvent<T>(eventType: T, data: PluginEventData<T>, broadcast?: boolean): PluginEventFromType<T>
  • Trigger an event to be dispatched to all plugins

    Type parameters

    • T: PluginEventType | CompatiblePluginEventType

    Parameters

    • eventType: T

      Type of the event

    • data: PluginEventData<T>

      data of the event with given type, this is the rest part of PluginEvent with the given type

    • broadcast: boolean = false

      indicates if the event needs to be dispatched to all plugins True means to all, false means to allow exclusive handling from one plugin unless no one wants that

    Returns PluginEventFromType<T>

    the event object which is really passed into plugins. Some plugin may modify the event object so the result of this function provides a chance to read the modified result

undo

  • undo(): void

Generated using TypeDoc