编辑器配置

编辑器配置

如果是第一次使用，请先通过快速开始了解基本使用。

import { IEditorConfig, createEditor } from '@wangeditor/editor'
const editorConfig: Partial<IEditorConfig> = {
    /* 编辑器配置 */
}
const editor = createEditor({
  selector: '#editor-container',
  config: editorConfig,
})
// 可通过 editor.getConfig() 查看编辑器默认配置

placeholder

配置编辑器 placeholder

const editorConfig: Partial<IEditorConfig> = {}
editorConfig.placeholder = '请输入内容...'

readOnly

配置编辑器是否只读，默认为 false

const editorConfig: Partial<IEditorConfig> = {}
editorConfig.readOnly = true

只读状态可通过 editor.enable() 和 editor.disable() 切换，详见 API 。

autoFocus

配置编辑器默认是否 focus ，默认为 true

const editorConfig: Partial<IEditorConfig> = {}
editorConfig.autoFocus = false

scroll

配置编辑器是否支持滚动，默认为 true 。注意，此时不要固定 editor-container 的高度，设置一个 min-height 即可。

const editorConfig: Partial<IEditorConfig> = {}
editorConfig.scroll = false

TIP

可将 scroll 设置为 false 的情况：

编辑器高度自增
在线文档，如腾讯文档、语雀那样的，参考 demoopen in new window 中的“仿腾讯文档”

maxLength onMaxLength

配置编辑器的 maxlength ，默认不限制

const editorConfig: Partial<IEditorConfig> = {}
editorConfig.maxLength = 1000
editorConfig.onMaxLength = function (editor: IDomEditor) {
    // 当达到 maxlength 限制时，触发该回调函数
}

TIP

无特殊需求，请慎用 maxLength ，这可能会导致编辑器内容过多时，编辑卡顿。

hoverbarKeys

配置编辑器的 hoverbar 菜单。通过 editor.getConfig().hoverbarKeys 可查看当前的 hoverbarKeys

TIP

createEditor 时设置 mode: 'simple' 可隐藏选中文本时的 hoverbar 。

使用 element type

可以通过元素 type 配置某种元素的 hoverbar

元素的 type 可通过 editor.children 查看，如下图
使用 editor.getAllMenuKeys() 可查看所有内置 menu key

const editorConfig: Partial<IEditorConfig> = {}
editorConfig.hoverbarKeys = {
    'link': {
        // 重写 link 元素的 hoverbar
        menuKeys: ['editLink', 'unLink', 'viewLink'],
    },
    'image': {
        // 清空 image 元素的 hoverbar
        menuKeys: [],
    }
}

自定义 match 函数

如果 element type 无法满足需求，可通过自定义 match 函数匹配元素。

import { SlateNode, IDomEditor, IEditorConfig } from '@wangeditor/editor'
const editorConfig: Partial<IEditorConfig> = {}
editorConfig.hoverbarKeys = {
    'text': {
        // 如有 match 函数，则优先根据 match 判断，而忽略 element type
        match: (editor: IDomEditor, n: SlateNode) => {
            // 可参考下文的源码
        },
        menuKeys: [ ... ], // 定义你想要的 menu keys
    }
}

可参考 hoverbar 配置的源码open in new window。

onCreated

编辑器创建完毕时的回调函数。

const editorConfig: Partial<IEditorConfig> = {}
editorConfig.onCreated = (editor: IDomEditor) => {
    // editor created
}

onChange

编辑器内容、选区变化时的回调函数。

const editorConfig: Partial<IEditorConfig> = {}
editorConfig.onChange = (editor: IDomEditor) => {
    // editor changed
    console.log('content', editor.children)
}

onDestroyed

编辑器销毁时的回调函数。调用 editor.destroy() 即可销毁编辑器，详见 API 。

const editorConfig: Partial<IEditorConfig> = {}
editorConfig.onDestroyed = (editor: IDomEditor) => {
    // editor destroyed
}

onFocus

编辑器 focus 时的回调函数。

const editorConfig: Partial<IEditorConfig> = {}
editorConfig.onFocus = (editor: IDomEditor) => {
    // editor focused
}

onBlur

编辑器 blur 时的回调函数。

const editorConfig: Partial<IEditorConfig> = {}
editorConfig.onBlur = (editor: IDomEditor) => {
    // editor blur
}

customPaste

自定义粘贴。可阻止编辑器的默认粘贴，实现自己的粘贴逻辑。

const editorConfig: Partial<IEditorConfig> = {}
editorConfig.customPaste = (editor: IDomEditor, event: ClipboardEvent): boolean => {
    // event 是 ClipboardEvent 类型，可以拿到粘贴的数据
    // 可参考 https://developer.mozilla.org/zh-CN/docs/Web/API/ClipboardEvent
    // const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
    // const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
    // const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）
    // 同步
    editor.insertText('xxx')
    // 异步
    setTimeout(() => {
        editor.insertText('yy')
    }, 1000)
    // 阻止默认的粘贴行为
    event.preventDefault()
    return false
    // 继续执行默认的粘贴行为
    // return true
}

customAlert

自定义编辑器 alert 。如想用 antd 的 message 功能。

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

用于第三方插件做扩展配置，如 mention 插件open in new window。