Добавить стиль к тексту после использования paste_as_text в TinyMCE

Question

Используя TinyMCE 4, я настроил опцию paste_as_text для плагина paste, как объяснено здесь .

Он работает, как и ожидалось, например:

<p>&nbsp;</p>
<h1 dir="ltr" style="line-height: 1.38; margin-top: 20pt; margin-bottom: 6pt;"><span style="font-size: 20pt; font-family: Arial; color: #000000; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">Requirements</span></h1>
<h3 dir="ltr" style="line-height: 1.38; margin-top: 16pt; margin-bottom: 4pt;"><span style="font-size: 14pt; font-family: Arial; color: #434343; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">Nav Bar/Header</span></h3>
<ul style="margin-top: 0pt; margin-bottom: 0pt;">
<li dir="ltr" style="list-style-type: disc; font-size: 11pt; font-family: Arial; color: #000000; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre;">
<p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; color: #000000; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">Change EAT | DRINK to DISCOVER but keep this as the existing dropdown everywhere</span></p>
</li>
<li dir="ltr" style="list-style-type: disc; font-size: 11pt; font-family: Arial; color: #000000; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre;">
<p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; color: #000000; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">Change WATCH | READ to WATCH but keep this as the existing dropdown everywhere</span></p>
</li>
<li dir="ltr" style="list-style-type: disc; font-size: 11pt; font-family: Arial; color: #000000; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre;">
<p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; color: #000000; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">Keep EXPERIENCE as the existing dropdown everywhere</span></p>
</li>
</ul>

Превращается в:

<p>Requirements<br />Nav Bar/Header<br />Change EAT | DRINK to DISCOVER but keep this as the existing dropdown everywhere<br />Change WATCH | READ to WATCH but keep this as the existing dropdown everywhere<br />Keep EXPERIENCE as the existing dropdown everywhere</p>

Но поскольку все строки находятся внутри одного <p>, когда я пытаюсь оформить первую строку, например, изменив ее на Heading 1, весь текст получаетотформатированный к этому.

Как я могу избежать этого?

Answer 1

Вы не можете избежать этого, основываясь на том факте, что вы выбрали «Вставить как текст».

Вставить как текст удалит все теги HMTL и вернет просто «текст», как и подразумевает название функции.

Когда вы затем выполняете что-то вроде форматирования в заголовке 1, TinyMCE берет блок, в котором находится ваш курсор, и превращает этот блок в <h1>.

Это работает как задумано.

Если вы хотите, чтобы только часть контента была превращена в заголовок, сначала он должен находиться в отдельном блоке. Как правило, нажатие Enter запускает новый блок (абзац) в TinyMCE, делая это до и после текста, который вы хотите, переместит его в свой собственный блок.