在 contenteditable div 中用 span 包裹每个单词 [英] Wrap each word with span in contenteditable div

问题描述

我有 contenteditable div.每次更改 div 的内容时，都会调用用 span(用于 CSS)包裹每个单词的函数.我有两个问题:

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

我试图找到一个光标定位解决方案(例如这里)但我无法用 Range 或 Selection 解决问题.这是fiddle.

const div = document.querySelector('div')div.addEventListener('输入', () => {让文本 = div.textContenttext = ''+ text.replace(//g, '</span> <span>').replace(/\n/g, '</span><br/><span>') + '</span>'div.innerHTML = 文本})

body {背景颜色:白色；}身体 >div {背景颜色:黑色；白颜色;字体系列:等宽；填充:0.5rem；宽度:20rem；}

多行文字<br/>多线<br/>文本

解决方案

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

问题在于使用 textContent 进行评估.让我们举个例子，假设你的 div 是用以下内容初始化的:

美国广播公司<br/>定义

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

 abc def

由于有关具有断点的内容的信息已丢失，因此您会看到新行被删除.解决方案是将其更改为 innerHTML，这样您就可以毫无损失地操作内容.

const div = document.querySelector('div')div.addEventListener('输入', () => {让文本 = div.innerHTMLtext = ''+ text.replace(//g, '</span> <span>').replace(/\n/g, '</span><br/><span>') + '</span>'//控制台日志(文本)div.innerHTML = 文本})

body {背景颜色:白色；}身体 >div {背景颜色:黑色；白颜色;字体系列:等宽；填充:0.5rem；宽度:20rem；}

多行文字<br/>多线<br/>文本

对于问题的第二部分，您可以参考SO上类似问题的答案:如何在 contenteditable 元素 (div) 中设置插入符号(光标)位置?

I have contenteditable div. Every time that content of div is changed, function to wrap each word with span (for CSS) is called. I have 2 problems:

• After setting innerHTML, the cursor appears at the beginning of the div, I would like to cursor stay in the same position,
• Newlines are deleted.

I tried to find a cursor positioning solution (eg. here) but I couldn't solve the problem with Range or Selection. Here is 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>

解决方案

The below code solves one part of your problem of adding break lines in place of new line characters.

The problem was with using textContent for evaluation. Let's take an example, say your div was initialized with the below content:

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

The first time when someone triggers a change to that div, the textContent method would return

  abc def

Since, the information about the content having a breakpoint has been lost, you'd see your new lines being stripped away. The solution was to change it to innerHTML instead, which would let you manipulate the content without any losses.

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>

For the second part of the problem, you could refer answers of similar questions on SO: How to set caret(cursor) position in contenteditable element (div)?

这篇关于在 contenteditable div 中用 span 包裹每个单词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！