Question

我有contenteditable div。每次div的内容更改时，都会调用用span包装每个单词的功能（对于CSS）。我有两个问题：

设置innerHTML后，光标出现在div的开头，我想将光标停留在同一位置，
换行符被删除。

我试图找到一个光标定位解决方案（例如here），但是我无法解决Range或Selection的问题。这是fiddle。

const div = document.querySelector('div')

div.addEventListener('input', () => {
    let text = div.textContent
    text = '<span>' + text.replace(/ /g, '</span> <span>').replace(/\n/g, '</span><br /><span>') + '</span>'
    div.innerHTML = text
})

body {
  background-color: white;
}

body > div {
  background-color: black;
  color: white;
  font-family: Monospace;
  padding: 0.5rem;
  width: 20rem;
}

<div contenteditable="true">
Multiline text
<br />
Multiline
<br />
Text
</div>

Answer 1

下面的代码解决了添加换行符代替换行符的问题。

问题在于使用textContent进行评估。让我们举个例子，假设您的div用以下内容初始化了：

<div contenteditable>
  abc
  <br/>
  def
</div>

第一次有人触发对该div的更改时，textContent方法将返回

  abc def

由于丢失了具有断点的内容的信息，因此您会看到新行被删除。解决方案是改为将其更改为innerHTML，这样您就可以在不损失任何内容的情况下进行操作。

const div = document.querySelector('div')

div.addEventListener('input', () => {
    let text = div.innerHTML
    
   text = '<span>' + text.replace(/ /g, '</span> <span>').replace(/\n/g, '</span><br/><span>') + '</span>'
//console.log(text)
   div.innerHTML = text
})

body {
  background-color: white;
}

body > div {
  background-color: black;
  color: white;
  font-family: Monospace;
  padding: 0.5rem;
  width: 20rem;

}

<div contenteditable="true">
Multiline text
<br />
Multiline
<br />
Text
</div>

对于问题的第二部分，您可以参考关于SO的类似问题的答案： How to set caret(cursor) position in contenteditable element (div)?

在contenteditable div中将每个单词都用空格括起来

1 个答案: