Options
All
  • Public
  • Public/Protected
  • All
Menu

Module roosterjs-editor-api

Index

Variables

Const FONT_SIZES

FONT_SIZES: number[] = ...

Default font size sequence, in pt. Suggest editor UI use this sequence as your font size list, So that when increase/decrease font size, the font size can match the sequence of your font size picker

Functions

applyCellShading

blockFormat

changeCapitalization

changeFontSize

clearBlockFormat

  • clearBlockFormat(editor: IEditor): void

clearFormat

commitListChains

createLink

  • createLink(editor: IEditor, link: string, altText?: string, displayText?: string, target?: string): void
  • Insert a hyperlink at cursor. When there is a selection, hyperlink will be applied to the selection, otherwise a hyperlink will be inserted to the cursor position.

    Parameters

    • editor: IEditor

      Editor object

    • link: string

      Link address, can be http(s), mailto, notes, file, unc, ftp, news, telnet, gopher, wais. When protocol is not specified, a best matched protocol will be predicted.

    • Optional altText: string

      Optional alt text of the link, will be shown when hover on the link

    • Optional displayText: string

      Optional display text for the link.

    • Optional target: string

      Optional display target for the link ("_blank"|"_self"|"_parent"|"_top"|"{framename}") If specified, the display text of link will be replaced with this text. If not specified and there wasn't a link, the link url will be used as display text.

    Returns void

editTable

Const experimentCommitListChains

formatTable

  • Format table

    Parameters

    • editor: IEditor

      The editor which contains the table to format

    • format: TableFormat

      A TableFormat object contains format information we want to apply to the table

    • Optional table: HTMLTableElement

      The table to format. This is optional. When not passed, the current table (if any) will be formatted

    Returns void

getElementBasedFormatState

  • Get element based Format State at cursor

    Parameters

    • editor: IEditor

      The editor instance

    • Optional event: PluginEvent

      (Optional) The plugin event, it stores the event cached data for looking up. In this function the event cache is used to get list state and heading level. If not passed, it will query the node within selection to get the info

    Returns ElementBasedFormatState

    An ElementBasedFormatState object

getFormatState

  • Get format state at cursor A format state is a collection of all format related states, e.g., bold, italic, underline, font name, font size, etc.

    Parameters

    • editor: IEditor

      The editor instance

    • Optional event: PluginEvent

      (Optional) The plugin event, it stores the event cached data for looking up. In this function the event cache is used to get list state and heading level. If not passed, it will query the node within selection to get the info

    Returns FormatState

    The format state at cursor

insertEntity

  • Insert an entity into editor.

    Parameters

    • editor: IEditor

      The editor to insert entity into.

    • type: string

      Type of the entity

    • contentNode: Node

      Root element of the entity

    • isBlock: boolean

      Whether the entity will be shown as a block

    • isReadonly: boolean

      Whether the entity will be a readonly entity

    • Optional position: NodePosition | Begin | End | DomEnd | Begin | End | DomEnd

      @optional The position to insert into. If not specified, current position will be used. If isBlock is true, entity will be insert below this position

    • Optional insertToRegionRoot: boolean

      @optional When pass true, insert the entity at the root level of current region. Parent nodes will be split if need

    • Optional focusAfterEntity: boolean

      @optional When pass true, focus will be moved next to the entity. For inline entity, focus will be after right after the entity (and the delimiter if exist). For block entity, focus will be in the new empty line below the entity

    Returns Entity

insertImage

  • insertImage(editor: IEditor, imageFileOrSrc: File | string, attributes?: Record<string, string>): void
  • Insert an image to editor at current selection

    Parameters

    • editor: IEditor

      The editor instance

    • imageFileOrSrc: File | string

      Either the image file blob or source string of the image.

    • Optional attributes: Record<string, string>

      Optional image element attributes

    Returns void

insertTable

  • Insert table into editor at current selection

    Parameters

    • editor: IEditor

      The editor instance

    • columns: number

      Number of columns in table, it also controls the default table cell width: if columns <= 4, width = 120px; if columns <= 6, width = 100px; else width = 70px

    • rows: number

      Number of rows in table

    • Optional format: TableFormat

      (Optional) The table format. If not passed, the default format will be applied: background color: #FFF; border color: #ABABAB

    Returns void

removeLink

  • removeLink(editor: IEditor): void
  • Remove link at selection. If no links at selection, do nothing. If selection contains multiple links, all of the link styles will be removed. If only part of a link is selected, the whole link style will be removed.

    Parameters

    • editor: IEditor

      The editor instance

    Returns void

replaceWithNode

  • replaceWithNode(editor: IEditor, text: string, node: Node, exactMatch: boolean, searcher?: IPositionContentSearcher): boolean
  • replaceWithNode(editor: IEditor, range: Range, node: Node, exactMatch: boolean): boolean
  • Replace text before current selection with a node, current selection will be kept if possible

    Parameters

    • editor: IEditor

      The editor instance

    • text: string

      The text for matching. We will try to match the text with the text before cursor

    • node: Node

      The node to replace the text with

    • exactMatch: boolean

      True if the text must appear exactly before selection, otherwise there can be some text between the target text and selection

    • Optional searcher: IPositionContentSearcher

      Optional PositionContentSearcher of current selection to help search text

    Returns boolean

  • Replace a given range with a node, current selection will be kept if possible

    Parameters

    • editor: IEditor

      The editor instance

    • range: Range

      The range to replace from

    • node: Node

      The node to replace the text with

    • exactMatch: boolean

      True if the text must appear exactly before selection, otherwise there can be some text between the target text and selection

    Returns boolean

rotateElement

  • rotateElement(editor: IEditor, element: HTMLElement, angle: number): void

setAlignment

setBackgroundColor

  • Set background color at current selection

    Parameters

    • editor: IEditor

      The editor instance

    • color: string | ModeIndependentColor

      One of two options: The color string, can be any of the predefined color names (e.g, 'red') or hexadecimal color string (e.g, '#FF0000') or rgb value (e.g, 'rgb(255, 0, 0)') supported by browser. Currently there's no validation to the string, if the passed string is invalid, it won't take effect Alternatively, you can pass a @typedef ModeIndependentColor. If in light mode, the lightModeColor property will be used. If in dark mode, the darkModeColor will be used and the lightModeColor will be used when converting back to light mode.

    Returns void

setDirection

setFontName

  • setFontName(editor: IEditor, fontName: string): void
  • Set font name at selection

    Parameters

    • editor: IEditor

      The editor instance

    • fontName: string

      The fontName string, should be a valid CSS font-family style. Currently there's no validation to the string, if the passed string is invalid, it won't take affect

    Returns void

setFontSize

  • setFontSize(editor: IEditor, fontSize: string): void
  • Set font size at selection

    Parameters

    • editor: IEditor

      The editor instance

    • fontSize: string

      The fontSize string, should be a valid CSS font-size style. Currently there's no validation to the string, if the passed string is invalid, it won't take affect

    Returns void

setHeadingLevel

  • setHeadingLevel(editor: IEditor, level: number): void
  • Set heading level at selection

    Parameters

    • editor: IEditor

      The editor instance

    • level: number

      The heading level, can be a number from 0 to 6, in which 1 ~ 6 refers to the HTML heading element <H1> to <H6>, 0 means no heading if passed in param is outside the range, will be rounded to nearest number in the range

    Returns void

setImageAltText

  • setImageAltText(editor: IEditor, altText: string): void

setIndentation

setOrderedListNumbering

  • setOrderedListNumbering(editor: IEditor, separator: HTMLLIElement, startNumber?: number): void
  • Resets Ordered List Numbering back to the value of the parameter startNumber

    Parameters

    • editor: IEditor

      The editor instance

    • separator: HTMLLIElement

      The HTML element that indicates when to split the VList

    • startNumber: number = 1

      The number of that the splitted list should start

    Returns void

setTextColor

  • setTextColor(editor: IEditor, color: string | ModeIndependentColor, shouldApplyInlineStyle?: (element: HTMLElement) => boolean): void
  • Set text color at selection

    Parameters

    • editor: IEditor

      The editor instance

    • color: string | ModeIndependentColor

      One of two options: The color string, can be any of the predefined color names (e.g, 'red') or hexadecimal color string (e.g, '#FF0000') or rgb value (e.g, 'rgb(255, 0, 0)') supported by browser. Currently there's no validation to the string, if the passed string is invalid, it won't take affect Alternatively, you can pass a @typedef ModeIndependentColor. If in light mode, the lightModeColor property will be used. If in dark mode, the darkModeColor will be used and the lightModeColor will be used when converting back to light mode.

    • Optional shouldApplyInlineStyle: (element: HTMLElement) => boolean

      Optional callback function to be invoked to verify if the current element should have the inline Style applied

        • (element: HTMLElement): boolean
        • Parameters

          • element: HTMLElement

          Returns boolean

    Returns void

toggleBlockQuote

  • toggleBlockQuote(editor: IEditor, styler?: (element: HTMLElement) => void): void
  • Toggle blockquote at selection, if selection already contains any blockquote elements, the blockquote elements will be unquote and other elements will take no effect

    Parameters

    • editor: IEditor

      The editor instance

    • Optional styler: (element: HTMLElement) => void

      (Optional) The custom styler for setting the style for the blockquote element

        • (element: HTMLElement): void
        • Parameters

          • element: HTMLElement

          Returns void

    Returns void

toggleBold

  • toggleBold(editor: IEditor): void
  • Toggle bold at selection If selection is collapsed, it will only affect the following input after caret If selection contains only bold text, the bold style will be removed If selection contains only normal text, bold style will be added to the whole selected text If selection contains both bold and normal text, bold style will be added to the whole selected text

    Parameters

    • editor: IEditor

      The editor instance

    Returns void

toggleBullet

  • Toggle bullet at selection If selection contains bullet in deep level, toggle bullet will decrease the bullet level by one If selection contains number list, toggle bullet will convert the number list into bullet list If selection contains both bullet/numbering and normal text, the behavior is decided by corresponding browser execCommand API

    Parameters

    • editor: IEditor

      The editor instance

    • Optional listStyle: BulletListType | CompatibleBulletListType

      (Optional) the style of the bullet list. If not defined, the style will be set to disc.

    • Optional apiNameOverride: string

      (Optional) Set a new api name, if empty the api name will be 'toggleListType'.

    Returns void

toggleCodeBlock

  • toggleCodeBlock(editor: IEditor, styler?: (element: HTMLElement) => void): void
  • Toggle code block at selection, if selection already contains any code blocked elements, the code block elements will be no longer be code blocked and other elements will take no affect

    Parameters

    • editor: IEditor

      The editor instance

    • Optional styler: (element: HTMLElement) => void

      (Optional) The custom styler for setting the style for the code block element

        • (element: HTMLElement): void
        • Parameters

          • element: HTMLElement

          Returns void

    Returns void

Const toggleHeader

  • toggleHeader(editor: IEditor, level: number): void

toggleItalic

  • toggleItalic(editor: IEditor): void
  • Toggle italic at selection If selection is collapsed, it will only affect the input after caret If selection contains only italic text, the italic style will be removed If selection contains only normal text, italic style will be added to the whole selected text If selection contains both italic and normal text, italic style will be added to the whole selected text

    Parameters

    • editor: IEditor

      The editor instance

    Returns void

toggleListType

  • Toggle List Type at selection If ListType Provided is Ordered: If selection contains numbering in deep level, toggle numbering will decrease the numbering level by one If selection contains bullet list, toggle numbering will convert the bullet list into number list If selection contains both bullet/numbering and normal text, the behavior is decided by corresponding realization of browser execCommand API If ListType Provided is Unordered: If selection contains bullet in deep level, toggle bullet will decrease the bullet level by one If selection contains number list, toggle bullet will convert the number list into bullet list If selection contains both bullet/numbering and normal text, the behavior is decided by corresponding browser execCommand API

    Parameters

    • editor: IEditor

      The editor instance

    • listType: ListType | CompatibleListType

      The list type to toggle

    • startNumber: number = 0

      (Optional) Start number of the list

    • includeSiblingLists: boolean = true

      Sets wether the operation should include Sibling Lists, by default true

    • Optional orderedStyle: NumberingListType | CompatibleNumberingListType

      (Optional) the style of an ordered. If not defined, the style will be set to decimal.

    • Optional unorderedStyle: BulletListType | CompatibleBulletListType

      (Optional) the style of an unordered list. If not defined, the style will be set to disc.

    • Optional apiNameOverride: string

      (Optional) Set a new api name, if empty the api name will be 'toggleListType'.

    Returns void

toggleNumbering

  • Toggle numbering at selection If selection contains numbering in deep level, toggle numbering will decrease the numbering level by one If selection contains bullet list, toggle numbering will convert the bullet list into number list If selection contains both bullet/numbering and normal text, the behavior is decided by corresponding realization of browser execCommand API

    Parameters

    • editor: IEditor

      The editor instance

    • Optional startNumber: number

      (Optional) Start number of the list

    • Optional listStyle: NumberingListType | CompatibleNumberingListType

      (Optional) The style of the numbering list. If not defined, the style will be set to decimal.

    • Optional apiNameOverride: string

      (Optional) Set a new api name, if empty the api name will be 'toggleListType'.

    Returns void

toggleStrikethrough

  • toggleStrikethrough(editor: IEditor): void
  • Toggle strikethrough at selection If selection is collapsed, it will only affect the input after caret If selection contains only strikethrough text, the strikethrough style will be removed If selection contains only normal text, strikethrough style will be added to the whole selected text If selection contains both strikethrough and normal text, strikethrough style will be added to the whole selected text

    Parameters

    • editor: IEditor

      The editor instance

    Returns void

toggleSubscript

  • toggleSubscript(editor: IEditor): void
  • Toggle subscript at selection If selection is collapsed, it will only affect the input after caret If selection contains only subscript text, the subscript style will be removed If selection contains only normal text, subscript style will be added to the whole selected text If selection contains both subscript and normal text, the subscript style will be removed from whole selected text If selection contains any superscript text, the behavior is determined by corresponding realization of browser execCommand API

    Parameters

    • editor: IEditor

      The editor instance

    Returns void

toggleSuperscript

  • toggleSuperscript(editor: IEditor): void
  • Toggle superscript at selection If selection is collapsed, it will only affect the input after caret If selection contains only superscript text, the superscript style will be removed If selection contains only normal text, superscript style will be added to the whole selected text If selection contains both superscript and normal text, the superscript style will be removed from whole selected text If selection contains any subscript text, the behavior is determined by corresponding realization of browser execCommand API

    Parameters

    • editor: IEditor

      The editor instance

    Returns void

toggleUnderline

  • toggleUnderline(editor: IEditor): void
  • Toggle underline at selection If selection is collapsed, it will only affect the input after caret If selection contains only underlined text, the underline style will be removed If selection contains only normal text, underline style will be added to the whole selected text If selection contains both underlined and normal text, the underline style will be added to the whole selected text

    Parameters

    • editor: IEditor

      The editor instance

    Returns void

Generated using TypeDoc