个人技术分享

插件版本如下：

vue2版本
“@wangeditor/editor”: “^5.1.23”,
“@wangeditor/editor-for-vue”: “^1.0.2”,

文件截图如下：

一、plugins/index.js 入口文件，整合模块导出外部使用

import withMention from './plugin'
import renderElemConf from './render-elem'
import elemToHtmlConf from './elem-to-html'
import parseHtmlConf from './parse-elem-html'

const module = {
   
  editorPlugin: withMention,
  renderElems: [renderElemConf],
  elemsToHtml: [elemToHtmlConf],
  parseElemsHtml: [parseHtmlConf]
}

export default module

二、plugins/elem-to-html.js 将内容转化成html标签

// 生成 html 的函数
function mentionToHtml (elem, childrenHtml) {
   
  const {
    value = '', varId = '', varName = '', isNotNull = '' } = elem
  return `<span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-content-var="1" data-is-not-null="${
     isNotNull}" data-var-name="${
     varName}" data-var-id="${
     varId}" data-value="${
     value}">${
     value}</span>`
}

// 配置
const conf = {
   
  type: 'mention', // 节点 type ，重要！！！
  elemToHtml: mentionToHtml
}

export default conf

三、plugins/parse-elem-html.js 将刚才转化的html标签 自定义解析html，编辑器才可以识别到我自定义的html是什么内容

function parseHtml(
  elem,
  children,
  editor
) {
   

  const value = elem.getAttribute('data-value') || ''
  const varId = elem.getAttribute('