Оберните каждое слово span в contenteditable div - PullRequest
Новая
       13

Оберните каждое слово span в contenteditable div

2 голосов
/ 07 апреля 2019

у меня contenteditable div.Каждый раз, когда изменяется содержимое div, вызывается функция для переноса каждого слова с помощью span (для CSS).У меня 2 проблемы:

  • После установки innerHTML курсор появляется в начале div, я бы хотел, чтобы курсор оставался в той же позиции,
  • Новые строки удалены.

Я пытался найти решение для позиционирования курсора (например, здесь ), но я не смог решить проблему с Range или Selection.Вот скрипка . 

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>

1 Ответ

0 голосов
/ 07 апреля 2019

Приведенный ниже код решает одну часть вашей проблемы добавления разрывных строк вместо символов новой строки.

Проблема была в использовании 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: Как установить позицию курсора (курсора)в contenteditable элемент (div)?

...