Angular8 - Библиотека [tinymce] - элемент редактора и настройка многострочности

#angular #typescript #tinymce

Вопрос:

Я использую Angular 8, и в шаблоне у нас есть что-то вроде этого:

 <editor
              required
              class="research-modal__control__input research-modal__control__input__description"
              formControlName="description"
              id="description"
              [inline]="false" //my attempt
              placeholder="Description"
              [init]="{
                      base_url: '/tinymce',
                      suffix: '.min',
                      inline: true,
                      height: 500,
                      menubar: false,
                      toolbar:
                        'subscript superscript'
                    }"
            ></editor>

Кто-нибудь знает, как установить многострочный режим?
Например, когда я ввожу в это поле textarea что-то вроде:

 line1
line2
line3

и в базе данных (Postgres) сохраняется значение с конечными строками, затем после повторного открытия моего всплывающего окна с тегом все отображается в одной строке:

 line1 line2 line3

Я не могу найти решение в Интернете… Как я могу включить многострочность?

Ответ №1:

TinyMCE — это HTML-редактор, поэтому содержимое, которое вы загружаете в редактор, должно быть действительным HTML. Если вы просто передадите строку обычного текста без разметки, TinyMCE заключит ее в один блочный элемент ( <p>...</p> ). Возврат каретки и разрывы строк не имеют значения в HTML, поэтому они игнорируются / удаляются.

1. Хм, хорошо, так какое решение вы предлагаете? После ввода нескольких строк с помощью строки разрыва, возможно, мне следует перехватить текст и заменить символы новой строки, например, <br> и сохранить эту структуру в базе данных?

2. Это будет работать так же, как и преобразование каждой строки в отдельный абзац. Использование br тегов оставляет весь элемент в виде одного блочного элемента, что повлияет на определенное поведение в редакторе (вместо того, чтобы делать каждую строку отдельным абзацем). Вам действительно решать, что подходит для вашего варианта использования.