wangEditor 添加自定义元素，下划线区域只能输入中文，英文和数字无法输入

问题描述

现在遇到三个问题，需要解惑一下。 1、我实现了一个自定义元素（填空题），在横线部分，输入中文是可以的，但是直接输入英文或者数据，无法输入。 2、我想删除输入的文字，但是删除键会直接把自定义元素删除，而不能只删除输入的文字。 3、下划线部分点击enter，无法换行。

wangEditor 版本

5

是否查阅了文档？

（文档链接 www.wangeditor.com ）

是

最小成本的复现步骤

`/* 下划线自定义元素 start / function registerUnderline () { const module = { editorPlugin: withUnderline } Boot.registerModule(module) } / 定义新元素 */ function withUnderline (editor) { // 定义 const { isInline, isVoid } = editor const newEditor = editor newEditor.isInline = elem => { const type = DomEditor.getNodeType(elem) if (type === 'underline') { return true } return isInline(elem) }

newEditor.isVoid = elem => { const type = DomEditor.getNodeType(elem) if (type === 'underline') { return true } return isVoid(elem) }

return newEditor }

export const insertUnderline = (editor, params) => { const {index = 1, spaceCount = 20, id, isInline} = params // 插入新元素 const underline = { // JS 语法 type: 'underline', index: index, spaceCount: spaceCount, id: 'underline-' + index + '-' + id, isInline: isInline, children: [{ text: '' }] // void 元素必须有一个 children ，其中只有一个空字符串，重要！！！ } editor.insertNode(underline) }

function renderUnderline (elem, children, editor) { // JS 语法

// 获取数据，参考上文 underline 数据结构 const { index = 1, spaceCount = 0, id = 1, isInline } = elem

// 下划线空格 let spaceStr = '' for (let i = 0; i < spaceCount; i++) { spaceStr += ' ' }

const underlineBlockVnode = h( 'span', { attrs: {'data-slate-string': 'true' }, props: { contentEditable: true }, // HTML 属性，驼峰式写法 style: { marginRight: '10px' } // HTML style ，驼峰式写法 }, [spaceStr] )

const underlineVnode = h( // HTML tag 'u', // HTML 属性 { style: { marginLeft: '0px' } // HTML style ，驼峰式写法 }, [underlineBlockVnode] )

const underlineSpanNode = h( // HTML tag 'span', // HTML 属性 { attrs: { 'data-slate-leaf': 'true' }, style: { marginLeft: '0px' } // HTML style ，驼峰式写法 }, [underlineVnode] )

const blockVnode = h( 'span', { attrs: {'data-slate-node': 'text'}, // 自定义属性 attrs props: { id: id }, // HTML 属性，驼峰式写法 style: { marginRight: '10px', display: isInline ? 'inline-block' : 'block', marginBottom: '10px' } // HTML style ，驼峰式写法 }, [underlineSpanNode] ) return blockVnode }

function registerUnderlineElem () { // 在编辑器中渲染新元素（注册到富文本编辑器editor.getHtml()拿不到） const renderElemConf = { type: 'underline', // 新元素 type ，重要！！！ renderElem: renderUnderline, }

const module = { renderElems: [ renderElemConf] } Boot.registerModule(module)

// 把新元素转换为HTML const elemToHtmlConf = { type: 'underline', // 新元素的 type ，重要！！！ elemToHtml: underlineToHtml, } const module1 = { elemsToHtml: [elemToHtmlConf] } Boot.registerModule(module1) }

function underlineToHtml (elem, childrenHtml) { // JS 语法 // 获取附件元素的数据 const { index = 1, spaceCount = 0, id = 0 } = elem

// 生成 HTML 代码 let html =  let spaceStr = '' for (let i = 0; i < spaceCount; i++) { spaceStr += ' ' } html+=${spaceStr} html+=

return html }

// 解析新元素HTML到编辑器 function parseUnderlineHtml (domElem, children, editor) { const index = domElem.getAttribute('data-index') || '' const spaceCount = domElem.getAttribute('data-spaceCount') || '' const resume = { // JS 语法 type: 'underline', index: index, spaceCount: spaceCount, id: 'underline-' + index, children: [{ text: '' }] // void 元素必须有一个 children ，其中只有一个空字符串，重要！！！ } return resume }

// 把parseUnderlineHtml注册到wangEditor function registerParseUnderlineHtml () { const parseHtmlConf = { selector: 'span[data-w-e-type="underline"]', parseElemHtml: parseUnderlineHtml } const module = { parseElemsHtml: [parseHtmlConf] } Boot.registerModule(module) }

export const registerWUnderline = () => { // 注册：下划线自定义元素到富文本编辑器 registerUnderline() registerUnderlineElem() registerParseUnderlineHtml() } /* 下划线自定义元素 end */`