问题描述:

I have such html:

<main class='someClass'>

<!-- somecontent -->

</main>

After updating the post I see:

<p>&nbsp</p>

<main class='someClass'>

<p>&nbsp</p>

<!-- somecontent -->

<p>&nbsp</p>

</main>

<p>&nbsp</p>

What can I do? What's this?

I read a lot of posts about this problem, but, I think, I don't understand only one: WHERE I have to insert all the rules? Such as

config.allowedContent = true;

config.extraAllowedContent = 'main';

or else? Because then I inserted in ckeditor.config.js I see no changes. It continue to insert to my html

<p>&nbsp</p>

Can somebody help me? I'll be very thankfull.

网友答案:

After longer investigation I think I found it.

Steps taken:

Firstly I checked if CKEditor supports HTML5 tags at all, and it does. So it should not strip them or change at all. As you posted the <main class="someClass"> was getting surrounded with <p>&nbsp;</p> - this could happen if main was recognized as an inline element instead of block one. I digged into CKEDITOR.dtd and it turned out that main exists and it is a block element. It should be fine.

To check if it's a CKEditor issue or WordPress I checked what was written into database and what the CKEditor was getting from it. The post/page content was as in the example below (the only difference was the new lines characters - as CKEditor formats the code):

<main class="someClass">
    <p>There should be only 2 paragraphs inside the</p>
    <pre>&lt;main class=&quot;someClass&quot;&gt;&lt;/main&gt;</pre>
    <p>element.</p>
</main>

But the code returned for edit was different

<p><main class="someClass"></p>
<p>There should be only 3 paragraphs inside the</p>
<pre>&lt;main class=&quot;someClass&quot;&gt;&lt;/main&gt;</pre>
<p>element.</p>
<p></main></p>

The <main class="someClass"> was wrapped with <p></p>, then CKEditor was fixing those paragraphs around block element and the result was as you posted:

<p>&nbsp</p>
<main class='someClass'>
<p>&nbsp</p>

After short debugging of WordPress core I found the place where those paragraphs were added - function wpautop inside formatting.php https://developer.wordpress.org/reference/functions/wpautop/

To be more precise, the 469 line which describes all block elements:

$allblocks = '(?:table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|form|map|area|blockquote|address|math|style|p|h[1-6]|hr|fieldset|legend|section|article|aside|hgroup|header|footer|nav|figure|figcaption|details|menu|summary)';

and there is no main element.

So you have some options:

  1. Disable wpautop at all (not recomended)
  2. Edit WordPress sources and add this element to the list. Then remember about it after every WordPress upgrade.

Or report it, create patch/pull request and wait for the fix, then update without any risk ;)

相关阅读:
Top