如何避免在 contenteditable 上出现新的跨度和内联样式

问题描述

contenteditable div，里面有两个 div
将光标放在 lorem 的末尾并点击 delete
或 - 将光标放在 ipsum 之前并点击 Backspace 然后点击按钮
结果： - <div>loremipsum</div>
这是正常的行为

现在，如果我像这样更改 css：
.wrap{color:orange; font-size:1.2rem;}
结果是这样的：
<div>lorem<span style='...'>ipsum</span></div>
如何避免新的跨度和内联样式？

$('button').on('click',function(){
  console.log($('.wrap').html());
});

.wrap{color:orange;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrap' contenteditable>
<div>lorem</div>
<div>ipsum</div>
</div>
<button>CLICK</button>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）