`contenteditable`与`white-space:pre-wrap` - 换行符

时间:2018-05-21 04:02:30

标签: javascript html contenteditable

我想创建一个contenteditable元素,其CSS设置为white-space: pre-wrap,其中按 Enter 的默认行为只是插入换行符(元素的{ {1}}应该与其外观完全匹配。)

经过多次尝试以非hacky,无错误的方式让它工作,这仍然让我头疼,因为在元素的 end 处插入换行符 none 以下内容:

  • 即使使用textContent
  • ,也可以显示换行符
  • 允许用户将插入符号放在换行符位置
  • 在元素white-space: pre-wrap
  • 中包含换行符

到目前为止,我最好的尝试如下:

textContent

然而,除了hacky之外,还不清楚为什么这是有效的(为什么插入然后删除一个不间断的空间会产生预期的效果?),更重要的是,它会弄乱元素的撤消历史记录 - 按 Ctrl + Z 结束您最终的不受欢迎的const insertNewline = e => { e.preventDefault(); document.execCommand('insertHTML', false, '\n '); document.execCommand('delete'); e.target.normalize(); };

有关如何改善这一点的想法吗?

0 个答案:

没有答案