wangEditor mention 插件

English Documentation

介绍

wangEditor mention 插件，如 @张三。

![](./_img/demo.png)

安装

``shell yarn add @wangeditor/plugin-mention`

`使用`

Vue 示例源码

`$3`

`ts import { IDomEditor, Boot, IEditorConfig } from '@wangeditor/editor' import mentionModule, { MentionElement } from '@wangeditor/plugin-mention'

// 注册。要在创建编辑器之前注册，且只能注册一次，不可重复注册。 Boot.registerModule(mentionModule)

// 显示弹框 function showModal(editor: IDomEditor) { // 获取光标位置，定位 modal const domSelection = document.getSelection() const domRange = domSelection.getRangeAt(0) if (domRange == null) return const selectionRect = domRange.getBoundingClientRect()

// 获取编辑区域 DOM 节点的位置，以辅助定位 const containerRect = editor.getEditableContainer().getBoundingClientRect()

// 显示 modal 弹框，并定位 // PS：modal 需要自定义，如

 或 Vue React 组件

  // 当触发某事件（如点击一个按钮）时，插入 mention 节点
  function insertMention() {
    const mentionNode: MentionElement = {
      type: 'mention', // 必须是 'mention'
      value: '张三', // 文本
      info: { x: 1, y: 2 }, // 其他信息，自定义
      children: [{ text: '' }], // 必须有一个空 text 作为 children
    }
    editor.restoreSelection() // 恢复选区
    editor.deleteBackward('character') // 删除 '@'
    editor.insertNode(mentionNode) // 插入 mention
    editor.move(1) // 移动光标
  }
}
// 隐藏弹框
function hideModal(editor: IDomEditor) {
  // 隐藏 modal
}
// 编辑器配置
const editorConfig: Partial = {
  EXTEND_CONF: {
    mentionConfig: {
      showModal, // 必须
      hideModal, // 必须
    },
  },
  // 其他...
}

// 创建创建和工具栏，会用到 editorConfig 。具体查看 wangEditor 文档`

`$3`

mention 节点返回的 HTML 格式如下，其中 data-info 的值需要 decodeURIComponent 解析。

`html @张三``