Editor Config
If you first-time use wangEditor, please see Get Started it to learn basic usage.
import { IEditorConfig, createEditor } from '@wangeditor/editor'
const editorConfig: Partial<IEditorConfig> = {
/* editor config */
}
const editor = createEditor({
selector: '#editor-container',
config: editorConfig,
})
// Can use `editor.getConfig()` to checkout editor's default config
placeholder
const editorConfig: Partial<IEditorConfig> = {}
editorConfig.placeholder = 'Type your text'
readOnly
Default value is false
.
You can use editor.enable()
and editor.disable()
to toggle readOnly. see Editor API.
const editorConfig: Partial<IEditorConfig> = {}
editorConfig.readOnly = true
autoFocus
Default value is true
.
const editorConfig: Partial<IEditorConfig> = {}
editorConfig.autoFocus = false
scroll
Default value is true
. You can scroll editor area.
If you set false
, do not set editor-container
a fixed height, just set min-height
.
const editorConfig: Partial<IEditorConfig> = {}
editorConfig.scroll = false
TIP
When you need to set false
?
- Editor height increases automatically
- Want a Google doc style, see Demo
maxLength onMaxLength
const editorConfig: Partial<IEditorConfig> = {}
editorConfig.maxLength = 1000
editorConfig.onMaxLength = function (editor: IDomEditor) {
// trigger this when exceed maxlength
}
TIP
If you have no strong demand, do not set maxLength
.
Cause it may affect performance when text is too large.
hoverbarKeys
You can use editor.getConfig().hoverbarKeys
to checkout default config.
TIP
If you only unwanted hoverbar when select text, set mode: 'simple'
when creating editor
Use element type
You can config hoverbar menu keys by element type.
- You can checkout every element's type by
editor.children
, see the picture below - You can use
editor.getAllMenuKeys()
to checkout all embedded menu keys
const editorConfig: Partial<IEditorConfig> = {}
editorConfig.hoverbarKeys = {
'link': {
// rewrite link element's hoverbar
menuKeys: ['editLink', 'unLink', 'viewLink'],
},
'image': {
// clear image element's hoverbar
menuKeys: [],
},
// others...
}
Custom match function
You can also custom a match function instead of use element type.
import { SlateNode, IDomEditor, IEditorConfig } from '@wangeditor/editor'
const editorConfig: Partial<IEditorConfig> = {}
editorConfig.hoverbarKeys = {
'text': {
match: (editor: IDomEditor, n: SlateNode) => {
// match your node exactly
},
menuKeys: [ ... ], // custom your menu keys
},
// others...
}
You can see source code of all default hoverbar keys config.
onCreated
const editorConfig: Partial<IEditorConfig> = {}
editorConfig.onCreated = (editor: IDomEditor) => {
// editor created
}
onChange
const editorConfig: Partial<IEditorConfig> = {}
editorConfig.onChange = (editor: IDomEditor) => {
// editor's content or selection changed
console.log('content', editor.children)
}
onDestroyed
You can use editor.destroy()
to destroy editor. see API.
const editorConfig: Partial<IEditorConfig> = {}
editorConfig.onDestroyed = (editor: IDomEditor) => {
// editor destroyed
}
onFocus
const editorConfig: Partial<IEditorConfig> = {}
editorConfig.onFocus = (editor: IDomEditor) => {
// editor focused
}
onBlur
const editorConfig: Partial<IEditorConfig> = {}
editorConfig.onBlur = (editor: IDomEditor) => {
// editor blur
}
customPaste
You can prevent default paste event, redefine your custom paste logic.
const editorConfig: Partial<IEditorConfig> = {}
editorConfig.customPaste = (editor: IDomEditor, event: ClipboardEvent): boolean => {
// event is ClipboardEvent type, see https://developer.mozilla.org/zh-CN/docs/Web/API/ClipboardEvent
// const html = event.clipboardData.getData('text/html') // get paste html
// const text = event.clipboardData.getData('text/plain') // get paste text
// const rtf = event.clipboardData.getData('text/rtf') // get paste rtf data (word, wsp...)
// insert your custom text (sync)
editor.insertText('xxx')
// insert your custom text (async)
setTimeout(() => {
editor.insertText('yy')
}, 1000)
// 1. prevent default paste event.
event.preventDefault()
return false
// 2. continue default paste event.
// return true
}
customAlert
Redefine your custom editor alert.
import { message } from 'antd'
const editorConfig: Partial<IEditorConfig> = {}
editorConfig.customAlert = (s: string, t: string) => {
switch (t) {
case 'success':
message.success(s)
break
case 'info':
message.info(s)
break
case 'warning':
message.warning(s)
break
case 'error':
message.error(s)
break
default:
message.info(s)
break
}
}
EXTEND_CONF
Use in third-party plugin, like mention plugin.