Нажатие [return] после div в TinyMCE создает еще один div. Вы знаете, почему и как это остановить?

Question

Поведение TinyMCE по умолчанию заключается в том, что если я нажимаю return в конце heading, он создает новый p, но если я нажимаю return в конце div, он создает еще div .

headings и divs оба являются блочными элементами и, похоже, имеют одинаковые настройки в настройках по умолчанию tinyMCE, поэтому я не понимаю, почему это происходит, и я не нахожу способ заставить его вести себя по-другому. Мне нужно, чтобы div вел себя так же, как h1.

Кодовое перо: https://codepen.io/jacoping/pen/QWjQNxZ

Кто-нибудь знает, почему ведет себя div таким образом?

Answer 1

Когда вы нажимаете ENTER после заголовка, поведение, которое используют текстовые процессоры (и люди ожидают), заключается в том, что вы «покидаете» заголовок и возвращаетесь к обычному блоку. В текстовых редакторах это обычный абзац (<p></p>).

TinyMCE имитирует это поведение, поэтому, когда вы нажимаете клавишу ввода, оставляя заголовок (или список или таблицу, и т. Д. c), он создает «по умолчанию root block ".

Div - это еще один тип блока по умолчанию root - просто не один человек предпочитает использовать его часто. Если вы нажмете клавишу ввода в конце <p> или <div>, TinyMCE просто предоставит вам еще один из тех же элементов блока root.

Если вы хотите вернуться к абзацу при нажатии введите в конце <div>, вы можете использовать раскрывающийся список styleselect, чтобы сделать это, выбрав другой блок из списка. В вашем примере у вас есть

style_formats: [
  { title: 'H1', block: 'h1' },
  { title: 'DIV', block: 'div' },
]  

..., который отменяет обычные параметры в списке и удаляет любую возможность, которая у вас есть, для переключения на другой вариант блока, такой как абзац. Если вы закомментируете эту часть конфигурации, ваш список выбора будет включать в себя множество параметров блока, так что вы можете вернуться к абзацу.

Answer 2

В tinyMCE.init добавить forced_root_block : 'p'. Это всегда будет вставлять элементы p, когда вы нажимаете клавишу ввода.

Что касается того, почему это произошло: большинство пользователей с большей вероятностью вставят p после h1 и с большей вероятностью вставят div за другим div. Программа «умна» и вставляет элемент, который, по ее мнению, вы, скорее всего, будете использовать следующим.