mr_garther
@mr_garther
Python Full-Stack

Во время ввода в div с contenteditable теряется форматирование текста, почему?

Привет!
Суть вопроса такова - есть окно диалога между двумя юзерами, в нём есть поле для ввода сообщения:
<div class="add_comment_text" id="messageInput" contenteditable="true"
       (input)="newMessageContent = $event.target.innerText">
</div>

и так же есть само "сообщение":
<div class="dialogue-message__content px-3 py-2"
        [innerHTML]="message.content" >
</div>

При вводе текста в поле всё ок, пока мы не решим использовать абзацы. Пользователь нажимает ввод - указатель переходит на следующую строку, вставляет <br> :
5db0a09f70eb1201962022.png
Но, что если продолжить ввод текста? Абзац попросту исчезает:
5db0a10666b78113350107.png
И после отправки сообщение отображается без абзацов, в единственной строке:
5db0a1cdd1359439250051.png

Help, знающие люди, как сделать так, чтобы сообщение отправлялось и отображалось с нужным форматированием - с абзацами?
  • Вопрос задан
  • 494 просмотра
Решения вопроса 1
Xuxicheta
@Xuxicheta
инженер
Поставьте вашему контейнеру для отображения стиль white-space: pre;
Как тут https://ng-run.com/edit/MSBlNak8ZQAR3VSGGJBv

Скрипты тут не причем, вы просто забыли что браузер по умолчанию вырезает переводы строки и лишние пробелы из текста.

Вот другое возможное решение https://ng-run.com/edit/7935m84gmuS0HUdOxhSj
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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