Editor API

Config API

getConfig

Get all editor's default config.

editor.getConfig()

getMenuConfig

Get one menu default config by key, see Menu config.

editor.getMenuConfig(menuKey)

getAllMenuKeys

Get all editor's embed menus keys.

editor.getAllMenuKeys()

alert

Trigger editor's alert, you can config it by customAlert.

editor.alert('错误信息', 'error')

Content API

handleTab

Define behavior when tap tab key.

editor.handleTab = () => editor.insertText('    ')

getHtml

editor.getHtml() return unformatted html string.

<p>head</p><p>hello <strong>word</strong></p>

You can format html by yourself, use xml-formatter.

getHtmlWithId

editor.getHtmlWithId(idKey?) returns HTML with generated unique id attributes.

const html = editor.getHtmlWithId() // default key: data-w-e-id
const html2 = editor.getHtmlWithId('data-node-id') // custom key

This is useful when you need stable node mapping/positioning in server-side or rendering pipelines. It does not change editor.getHtml() output.

getText

Get editor's plain text.

const text = editor.getText()

setHtml

Rewrite editor HTML content.

editor.setHtml('<p>hello</p>')

PS: wangEditor can only understand the HTML format produced by editor.getHtml(), but custom HTML format.

If you want to insert some HTML, use dangerouslyInsertHtml please.

isEmpty

Determine whether the editor is empty (just has an empty paragraph)

editor.isEmpty()

TIP

This method can only identify an empty paragraph. If you want more info, use editor.getText() or editor.getHtml().

getSelectionText

editor.getSelectionText()

getElemsByType

Get all elements in editor by type.

editor.getElemsByType('image') // all images
editor.getElemsByType('link') // all links

getElemsByTypePrefix

Get all elements in editor by type prefix.

editor.getElemsByTypePrefix('header') // all header: header1 header2 header3...

deleteBackward

editor.deleteBackward()

deleteForward

editor.deleteForward()

deleteFragment

Delete all selected content.

editor.deleteFragment()

getFragment

Get selected content, JSON format.

editor.getFragment()

insertBreak

editor.insertBreak()

insertText

editor.insertText('xxx')

dangerouslyInsertHtml

Insert HTML string, but it's dangerous. There is no guarantee of complete consistency.

editor.dangerouslyInsertHtml(`<h1>Header1</h1><p>Hello <b>word</b></p>`)

TIP

If you want to rewrite editor HTML content, use setHtml please.

clear

editor.clear()

undo

editor.undo()

redo

editor.redo()

clear history

Clear undo / redo history stacks.

editor.clearHistory()

A common use case is to run this right after editor.setHtml(...) or after loading existing content, so users cannot undo back to the previous content.

history without merging

If you need a programmatic insert to become its own undo step instead of merging into the previous history entry, you can directly use HistoryEditor.withoutMerging(...) from slate-history.

import { HistoryEditor } from 'slate-history'

HistoryEditor.withoutMerging(editor as HistoryEditor, () => {
  editor.insertText('plain text')
})

This is useful for flows like “paste HTML first, then let the user keep plain text only”. Since the editor instance is already extended by slate-history at runtime, you do not need to wait for a separate wangEditor wrapper API.

Node API

Please learn the editor content node structure standard first.

insertNode

Insert a node in selection.

const node = { type: 'paragraph', children: [{ text: 'simple text' }] }
editor.insertNode(node)

insertNodes

Insert many nodes in selection.

import { SlateTransforms } from '@wangeditor-next/editor'

const node1 = { type: 'paragraph', children: [{ text: 'aaa' }] }
const node2 = { type: 'paragraph', children: [{ text: 'bbb' }] }
const nodeList = [node1, node2]

SlateTransforms.insertNodes(editor, nodeList)

removeNodes

Remove all nodes in selection.

import { SlateTransforms } from '@wangeditor-next/editor'

SlateTransforms.removeNodes(editor)

Get selected nodes

Use SlateEditor.nodes to get selected nodes, see Editor.nodes API in Slate.js doc.

import { SlateEditor, SlateElement, SlateNode } from '@wangeditor-next/editor'

const nodeEntries = SlateEditor.nodes(editor, {
    match: (node: SlateNode) => {  // TS syntax
    // match: (node) => {          // JS syntax
        if (SlateElement.isElement(node)) {
            if (node.type === 'paragraph') {
                return true // match paragraph
            }
        }
        return false
    },
    universal: true,
})

if (nodeEntries == null) {
    console.log('No selected paragraphs')
} else {
    for (let nodeEntry of nodeEntries) {
        const [node, path] = nodeEntry
        console.log('selected node', node)
        console.log('cur path', path)
    }
}

setNodes

Set node props in selection

import { SlateTransforms } from '@wangeditor-next/editor'

SlateTransforms.setNodes(editor, {
  // @ts-ignore
  textAlign: 'right'
}, {
  mode: 'highest'
})

getParentNode

const parentNode = editor.getParentNode(node) // return a node or null

toDOMNode

Get DOM node by a slate node.

const elem = editor.toDOMNode(node) // return HTMLElement

isInline

Inline's concept, see Slate.js doc.

const inline = editor.isInline(node)

isVoid

Void's concept, See Slate.js doc.

const void = editor.isVoid(node)

isText

Text's concept, See Slate.js doc.

import { SlateText } from '@wangeditor-next/editor'

SlateText.isText(node) // true/false

isElement

Element's concept, See Slate.js doc.

import { SlateElement } from '@wangeditor-next/editor'

SlateElement.isElement(node) // true/false

addMark

Mark is text style, like bold italic...

editor.addMark('bold', true)
editor.addMark('color', '#999')

removeMark

editor.removeMark('bold') // cancel bold

marks

Get selected text marks.

import { SlateEditor } from '@wangeditor-next/editor'

SlateEditor.marks(editor) // like { bold: true, color: "#595959" }

DOM API

id prop

Editor id, unique.

editor.id // like 'wangEditor-1'

isFullScreen prop

editor.isFullScreen // true/false

focus

editor.focus()

// editor.focus(true) // Select end

blur

editor.blur()

isFocused

editor.isFocused() // true/false

updateView

Force update view and re-render DOM.

editor.updateView()

TIP

updateView is an inner API, not recommended for users.

scrollToElem

Scroll to designated DOM element, like html anchor.
You can use toDOMNode to get DOM element and it's id.

See catalog demo.

editor.scrollToElem(elemId)

showProgressBar

editor.showProgressBar(progress) // progress is number 0-100

hidePanelOrModal

Hide current panel dropList or modal.

editor.hidePanelOrModal()

fullScreen

editor.fullScreen()

TIP

Need to standard your html structure, see Getting started.

unFullScreen

editor.unFullScreen()

disable

editor.disable()

isDisabled

editor.isDisabled() // true/false

enable

editor.enable()

destroy

Destroy the editor and it's toolbar.

editor.destroy()

TIP

destroy can only remove the DOM element, remove global event binding.

Get Editable Container

Get editable container DOM element.

editor.getEditableContainer()

selection API

You may see Slate Location doc API first.

selection prop

editor.selection // selection or null

selection's format like:

{
  "anchor": { "path": [1,0], "offset":8 },
  "focus": { "path": [1,0], "offset":10 }
}

select

Select a designated location.

const newSelection = {
  anchor: { path: [1,0], offset:8 },
  focus: { path: [1,0], offset:10 }
}
editor.select(newSelection)

selectAll

Select all content.

editor.selectAll()

deselect

Cancel select.

editor.deselect()

move

Move cursor.

editor.move(3) // Move cursor 3 characters

moveReverse

Reverse move cursor.

editor.moveReverse(2) // Reverse move cursor 2 characters

restoreSelection

Restore prev selection which is not null.

editor.restoreSelection()

isSelectedAll

editor.isSelectedAll() // true/false

getSelectionPosition

Get text selection position data (like top left right bottom).

editor.getSelectionPosition() // eg. { left: "80.15px", top: "116px" }

PS: This position is relative to editor DOM node, not <body>.
You can get editor DOM node's position by editor.getEditableContainer().getBoundingClientRect(), then compute position which is relative to <body>.

getNodePosition

Get selected node position data (like top left right bottom).

editor.getNodePosition(node) // eg. { left: "80.15px", top: "116px" }

PS: This position is relative to editor DOM node, not <body>.
You can get editor DOM node's position by editor.getEditableContainer().getBoundingClientRect(), then compute position which is relative to <body>.

Custom event

wangEditor use event-emitter to extend custom events.

on

editor.on('event-key', fn)

off

editor.off('event-key', fn)

once

editor.once('event-key', fn)

emit

editor.emit('event-key')

Embedded events

editor.on('fullScreen', () => { console.log('fullScreen') })
editor.on('unFullScreen', () => { console.log('unFullScreen') })
editor.on('scroll', () => { console.log('scroll') })
editor.on('modalOrPanelShow', modalOrPanel => { console.log(modalOrPanel) })
editor.on('modalOrPanelHide', () => { console.log('modalOrPanelHide') })

Use Slate.js API

wangEditor is based on slate.js but React. You may use Slate.js API to operate the editor.

Transforms API

See slate Transforms API first.

You could get slate Transforms object from @wangeditor-next/editor, no need to install slate.

import { SlateTransforms } from '@wangeditor-next/editor'

Node Editor API

See slate Node API first.

You could get slate Node objects from @wangeditor-next/editor, no need to install slate.

import { SlateEditor, SlateNode, SlateElement, SlateText } from '@wangeditor-next/editor'

Location API

See slate Location API first.

You could get slate Location objects from @wangeditor-next/editor, no need to install slate.

import { SlateLocation, SlatePath, SlatePoint, SlateRange } from '@wangeditor-next/editor'