mention渲染出来info没有数据的解决方法/自定义样式

[codecnmc]

昨天突然需要一个@提及的方法 发现v5版本有插件 所以昨天从v4版本升级v5 两者的差异的初始化有点大
遇到一个问题 所有渲染的mention的Node 插入到编辑器里 都是data-slate-node="element"的存在 只能把value渲染出来 导致要显示的值是name 但是实际操作的值提醒的人是user_id 不可能把user_id显示到屏幕上吧 看了半天的源代码 包太分散太复杂了 感觉是模块下的elem-to-html没有应用到

解决方法1：直接提交富文本的时候将编辑器所有children拿出来 递归筛选出type为mention的节点

// 每次提交的时候调用方法获取id
getMentionList() {
      let mentionSet = new Set()
      const getMention = item => {
        if (item.type == 'mention') {
          mentionSet.add(item.info.id)
        }
        item.children &&
          item.children.forEach(child => {
            getMention(child)
          })
      }
      this.editor.children.forEach(x => {
        getMention(x)
      })
      return [...mentionSet]
}

问题来了 我觉得样式不够美观 而且 我想修改基础样式 并且当被@到的人 进来页面高亮显示
解决方法2：直接修改renderMention模块 在注册前修改 不需要修改源码文件 更换环境也不受影响

import mentionModule from '@wangeditor/plugin-mention'
import MentionModal from './MentionModal'
mentionModule.renderElems[0].renderElem = function (elem, children, editor) {
  // 当前节点是否选中
  const selected = DomEditor.isNodeSelected(editor, elem)
  const { value = '', info } = elem
  // 构建 vnode
  const vnode = h(
    'span',
    {
      props: {
        contentEditable: false, // 不可编辑
      },
      // 自定义的属性 这个h的class没有效果 所以直接再attrs下编写
      attrs: {
        'data-id': info.id,
        class: 'w-mention',
      },
      style: {
        marginLeft: '3px',
        marginRight: '3px',
        backgroundColor: 'var(--w-e-textarea-slight-bg-color)',
        border: selected // 选中/不选中，样式不一样
          ? '2px solid var(--w-e-textarea-selected-border-color)' // wangEditor 提供了 css var https://www.wangeditor.com/v5/theme.html
          : '2px solid transparent',
        borderRadius: '3px',
        padding: '0 3px',
      },
    },
    `@${value}`, // 如 `@张三`
  )

  return vnode
}

在标签中有自定义的class 也可以直接修改style里样式
所以可以

::v-deep .w-mention {
  cursor: pointer !important;
  color: red;
}

导出的富文本html里面也有需要的数据

我是两种方法结合使用 第二种是写前端被提醒者查看时高亮提醒 第一种是我写后端的时候set拿到的id不会重复 我就可以安心做我的提醒操作

[GWnbsp]

该怎么实时定位当前的聚焦位置 让菜单在鼠标的位置下方

[codecnmc]

该怎么实时定位当前的聚焦位置 让菜单在鼠标的位置下方

根据demo里面的代码修改 但是他的代码有个问题 封装的modal是绝对布局 如果你的自己封装的vue组件div 不是相对布局位置就会偏移到能寻找到是相对布局的上层dom直到body 所以解决方法如下：
更换demo modal中的mounted代码 我自己修改了下拉框的组件 所以有些许不同

 mounted() {
    // 获取到当前父对象的编辑器选取位置top left 也可以直接prop传入
    let pos = this.$parent.editor.getSelectionPosition()
    // 由于需要全屏功能 所以我的编辑器不是相对布局 我要获取到编辑器在页面的位置
    let dom = document.querySelector('.w-e-text-container')
    this.top = `${dom.offsetTop - 45 + parseFloat(pos.top.replace('px', ''))}px`
    this.left = `${dom.offsetLeft + parseFloat(pos.left.replace('px', ''))}px`
    // vuetify 组件的下拉列表显示
    this.$refs.input.isMenuActive = true
    let selectInput = document.querySelector('#mention-modal input')
    // 当内容为空的时候 按下退格键 需要关闭@框以及清除@符号
    selectInput.onkeydown = e => {
      if (!this.search && e.code == 'Backspace') {
        this.$emit('closeMentionModal')
      }
    }
  },

希望我的回答能够帮助到你

[codecnmc]

该怎么实时定位当前的聚焦位置 让菜单在鼠标的位置下方

我没有做跟随下拉菜单在鼠标下方 我是根据当前编辑器的光标在在它旁边显示

[GWnbsp]

嗯嗯，非常感谢 这对我帮助很大

[GWnbsp]

// 当前节点是否选中
const selected = DomEditor.isNodeSelected(editor, elem) 这个DomEditor是？

[codecnmc]

// 当前节点是否选中 const selected = DomEditor.isNodeSelected(editor, elem) 这个DomEditor是？

噢噢 忘了
import { createEditor, Boot, createToolbar, DomEditor } from '@wangeditor/editor'

[GWnbsp]

非常感谢

[codecnmc]

编写高亮功能的时候 发现导出html渲染回网页的时候 elem-to-html是getHtml的时候生效的 所以之前自定义的样式不见了 同理 修改一遍渲染器的为源码即可

mentionModule.elemsToHtml[0].elemToHtml = function (elem, childrenHtml) {
  const { value = '', info = {} } = elem
  return `<span data-w-e-type="mention" class="w-mention" data-w-e-is-void data-w-e-is-inline data-user_id="${info.user_id}">@${value}</span>`
}