wangEditor富文本实现自定义插入数据（手把手）

Jul-9

已于 2024-05-29 16:05:00 修改

阅读量1.8k

点赞数 5

文章标签： vue.js 富文本编辑器

于 2024-05-29 16:04:22 首次发布

本文链接：https://blog.csdn.net/LiangBlog/article/details/139297705

版权

本文手把手教你如何在vue2项目中，利用wangEditor版本5.1.23和editor-for-vue版本1.0.2实现自定义插入数据。通过创建五个关键文件：index.js、elem-to-html.js、parse-elem-html.js、plugin.js和render-elem.js，重写插入元素方法，使编辑器能够识别并解析自定义的HTML内容。在实际应用中，可以通过template、script部分调用自定义插入方法，效果显著。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插件版本如下：

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(

最低0.47元/天解锁文章