在TinyMCE中使用paste_as_text之后,为文本添加样式

时间:2019-06-07 17:16:25

标签: tinymce tinymce-4 tinymce-plugins

使用TinyMCE 4,我已经按照here的说明为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内,因此所有文本都被格式化为该行。

如何避免这种情况?

1 个答案:

答案 0 :(得分:1)

基于您选择粘贴为文本的事实,您无法真正避免这种情况。

“粘贴为文本”将删除所有HMTL标签,并仅返回“文本”,如功能名称所示。

然后,当您执行类似将格式设置为标题1的操作时,TinyMCE会获取光标所在的块并将该块变为<h1>

按设计工作。

如果您只希望将一部分内容转换为标题,则必须首先位于其自己的块中。通常,按 Enter 会在TinyMCE中启动一个新的块(段落),因此在您要输入的文本之前和之后将其移动到其自己的块中。