wangEditor mention 插件
English Documentation
介绍
wangEditor mention 插件,如 @张三
。
安装
yarn add @wangeditor/plugin-mention
使用
Vue 示例源码
注册到编辑器
import { IDomEditor, Boot, IEditorConfig } from '@wangeditor/editor'
import mentionModule, { MentionElement } from '@wangeditor/plugin-mention'
Boot.registerModule(mentionModule)
function showModal(editor: IDomEditor) {
const domSelection = document.getSelection()
const domRange = domSelection.getRangeAt(0)
if (domRange == null) return
const selectionRect = domRange.getBoundingClientRect()
const containerRect = editor.getEditableContainer().getBoundingClientRect()
function insertMention() {
const mentionNode: MentionElement = {
type: 'mention',
value: '张三',
info: { x: 1, y: 2 },
children: [{ text: '' }],
}
editor.restoreSelection()
editor.deleteBackward('character')
editor.insertNode(mentionNode)
editor.move(1)
}
}
function hideModal(editor: IDomEditor) {
}
const editorConfig: Partial<IEditorConfig> = {
EXTEND_CONF: {
mentionConfig: {
showModal,
hideModal,
},
},
}
显示 HTML
mention 节点返回的 HTML 格式如下,其中 data-info
的值需要 decodeURIComponent
解析。
<span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="张三" data-info="%7B%22x%22%3A10%7D">@张三</span>