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


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

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


19


источник


Ответы:


Оберните содержимое в 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!

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


20



Как сказал Шелваку, <pre> Теги html сохраняют пробелы ,

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

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

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

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

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

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


48



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

HTML:     

{{}} Note.content 

CSS:

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

18



Не уверен, что я здесь что-то упустил, но все остальные ответы заставят вас иметь кучу лишних пробелов от отступов в вашем 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.

4



Я могу заставить его работать с backticks (`)

<pre>{{textRenderedAsItIs}}<pre>

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

1