Отображение символа новой строки в VueJS

Я создаю приложение примечания, в котором пользователи могут добавлять заметку, вводя многострочный текст в текстовое поле. Когда я сохраняю заметку в Firebase, она сохраняется с символами новой строки (\n), которые я хочу визуализировать.

Поэтому я написал фильтр, который заменяет эти символы на <br/> и это отлично работает.
Хотя теперь мне нужно сделать мои данные с помощью {{{note.content}}} и пользователь может ввести HTML, CSS и JS, которые будут выполнены.
Должен ли я использовать что-то вроде DOMPurify для проверки содержимого или есть способ безопасно отображать символы новой строки?

Ответы

Ответ 1

Оберните содержимое в элемент `pre`.

Элемент <pre> будет предварительно размещать пробелы внутри него, например:

This is followed by a newline,
not that you can tell
<br />
<br />
<pre>You can see the newline after me!
Woohoo!</pre>

Это приведет к:

This is followed by a newline, not that you can tell

You can see the newline after me!
Woohoo!

Таким образом, вам не нужно фильтровать новые строки.

Ответ 2

Как сказал @shelvacu, <pre> html сохраняет пробелы.

Однако использование его имеет один серьезный недостаток: сам тег наследует множество ненужных стилей из фреймворков CSS, которые используются в проекте (например, Bootstrap).

Чтобы сохранить пробелы и избежать наследования каких-либо ненужных стилей, используйте:

<span style="white-space: pre;">Some whitespaced content</span>

что будет действовать так же, как <pre>.

Имейте в виду, что white-space: pre остается текст "как есть" - если вы хотите иметь дополнительный разрыв строки, когда это необходимо, используйте: white-space: pre-wrap.

Смотрите: w3schools.com Свойство CSS с белым пространством

Ответ 3

После того, как я описал свою проблему, я понял, что использовать pre-tag, который предназначен для предварительно отформатированного текста. Этот тег будет уважать символы "\ t\n" и корректно выводит текст из коробки! Хотя предложения не разбиваются автоматически и переполняют ширину. С некоторым CSS я смог получить то же поведение, что и другие элементы.

html:

{{note.content}}

CSS:

.note pre {
  white-space: pre-wrap; 
  word-wrap: break-word;
  font-family: inherit;
}

Ответ 4

Используйте свойство CSS white-space: pre-line;.

Как написать в Mozzila Doc для pre-line значение:

Последовательности пустого пространства свернуты. Строки прерваны на новой строке символов, в <br>, и по мере необходимости, чтобы заполнить строки.

Ответ 5

Не уверен, что я здесь что-то упустил, но все остальные ответы заставят вас иметь кучу лишних пробелов от отступов в вашем javascript-коде.

К счастью, свойство css "white-space" имеет еще одно значение, которое соответствует этой конкретной цели: "pre-line":

HTML:

<div v-model="myNote" class="note">
</div>

Вью:

    this.myNote = 'My first line of text.
      My second line of text.'

CSS:

.note {
  white-space: pre-line;
}

Результат:

My first line of text.
My second line of text.

В отличие от результата с просто белым пространством: pre:

My first line of text.
      My second line of text.

Ответ 6

Я могу заставить его работать с кавычками (')

<pre>{{textRenderedAsItIs}}</pre>

data():{
  return{
    textRenderedAsItIs:'Hello
                        World'
   }
}