@doinoil
Студент

ContentEditable="true" Как всегда оборачивать текст в под-div-ы?

Здраствуйте, как извесно, при использовании contenteditable="true" пользователь может вводить текс в div
Сначала текст пишется в основной div, а после первого ентера создаются под-div-и формирующие перенос строки.
Документацыя —
https://developer.mozilla.org/en-US/docs/Web/Guide...
В документации описано как изменить теги или убрать их. Однако как можно сделать так чтоб текст введенный пользоателем до первого ентера тоже оборачивался в div.
Тоесть по дефолту:
qwerty<div>ytrewq</div>
мне же нужно
<div>qwerty</div><div>ytrewq</div>
Пример дефолтного кода который не оборачивает текст до первого ентера в под-div, а только после
<div id="console" contenteditable="true"></div>
<style>
#edit{
width:50%;
height:50%;
background:green;
}
</style>
  • Вопрос задан
  • 63 просмотра
Пригласить эксперта
Ответы на вопрос 4
iiiBird
@iiiBird Куратор тега HTML
Пока ты спишь - твой конкурент совершенствуется
не знаю как в div обернуть красиво, НО если ты задашь этому диву (#edit) стиль display: inline-block;, то все переносы будут через br
Ответ написан
profesor08
@profesor08 Куратор тега JavaScript
Следи за изменением содержимого своего блока, с помощью MutationObserver, и решай когда и где добавлять дополнительную обертку. Например обернуть все текстовые ноды в div.
Ответ написан
@zkrvndm
Боты, парсеры, расширения
Если нужен редактор, лучше использовать TinyMCE, принцип работы в него такой же, но доведены до ума все важные моменты.
Ответ написан
@doinoil Автор вопроса
Студент
Мне нужно вставлять какой-нибудь div, например <div class="superDiv">text</div> перед тем что написал пользователь.
Как я понимаю мне нужно воспользоватся
console.insertBefore(dynamicDiv, /*То что напечатал пользователь*/);

Или
console.insertAdjacentHTML('beforeend, '<div class="superDiv">text</div>');
//Здесь проблема что текст печатаемый пользователем никак не влияет на beforeend

Полный пример кода
<div id="console" contenteditable="true"></div>
<style>
#edit{S
width:50%;
height:50%;
background:green;
}
</style>
<script>
	document.getElementById("console").addEventListener("keydown", () => {
		let dynamicDiv = document.createElement("div");
		dynamicDiv.innerHTML = "123";
		document.getElementById("console").insertBefore(dynamicDiv, /*То что напечатал пользователь*/)
	}, true);
</script>

6021b5f0819e5803141530.png
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы