问题描述

现在遇到三个问题，需要解惑一下。
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 = <span id="${id}" data-w-e-element="selfElement" data-w-e-type="underline" data-w-e-is-void data-w-e-is-inline data-index="${index}" data-spaceCount="${spaceCount}">
let spaceStr = ''
for (let i = 0; i < spaceCount; i++) {
spaceStr += ' '
}
html+= <u style="margin-left: 0px;"><span style="margin-right: 10px;">${spaceStr}</span></u>
html+= </span>

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 */`