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.
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()
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/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/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/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/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/editor'
SlateText.isText(node) // true/false
isElement
Element's concept, See Slate.js doc.
import { SlateElement } from '@wangeditor/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/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/editor
, no need to install slate
.
import { SlateTransforms } from '@wangeditor/editor'
Node Editor API
See slate Node API first.
You could get slate Node objects from @wangeditor/editor
, no need to install slate
.
import { SlateEditor, SlateNode, SlateElement, SlateText } from '@wangeditor/editor'
Location API
See slate Location API first.
You could get slate Location objects from @wangeditor/editor
, no need to install slate
.
import { SlateLocation, SlatePath, SlatePoint, SlateRange } from '@wangeditor/editor'