Skip to main content
added 900 characters in body
Source Link
MoritzLost
  • 11.9k
  • 6
  • 23

It's not creating tags outside the parent, that's simply how the browser interprets incorrect HTML. The inspector always display the DOM tree created by the browser, not the HTML source. Looks like your redactor field includes a <p> tag in its value, but you're also wrapping that in a <p> tag in your template. This results in output like this (which you can check using right click -> View Page Source in your browser):

<p class="section__description padding-left">
    <p>
        Lorem Ipsum …
    </p>
</p>

But that isn't valid HTML, because a <p> tag can't contain other <p> tags. Browsers try to fix broken HTML, so the first paragraph is automatically closed before the second one opens. This is why you see multiple paragraphs in the inspector.

To fix this, you have to options:

  1. If you want the editors to be able to enter multiple paragraphs in the redactor field, use a <div> (or another element that can contain <p> tags) as the wrapper instead of a <p>.
  2. If you really only want to allow a single paragraph in the redactor field, you can switch to inline modeswitch to inline mode 1. This way, the redactor output won't be wrapped in <p> tags so you can safely use the <p> tag in your template. Sidenote, this setting is quite unreliable, you may want to use striptags with a whitelist of allowed inline tags to ensure the output doesn't include superfluous <p> tags.

1 Inline mode is broken, see this issue for details. Instead, set enterKey: false to prevent editors from adding new paragraphs or breakline: true to make the enter key add <br> tags instead of starting a new paragraph. Remove all block formatting options with the buttons setting. Then you can use the striptags filter in the output template to only allow inline tags and remove the <p> tag if necessary. If this sounds tedious, see my answer here regarding alternative WYSIWYG editors.

It's not creating tags outside the parent, that's simply how the browser interprets incorrect HTML. The inspector always display the DOM tree created by the browser, not the HTML source. Looks like your redactor field includes a <p> tag in its value, but you're also wrapping that in a <p> tag in your template. This results in output like this (which you can check using right click -> View Page Source in your browser):

<p class="section__description padding-left">
    <p>
        Lorem Ipsum …
    </p>
</p>

But that isn't valid HTML, because a <p> tag can't contain other <p> tags. Browsers try to fix broken HTML, so the first paragraph is automatically closed before the second one opens. This is why you see multiple paragraphs in the inspector.

To fix this, you have to options:

  1. If you want the editors to be able to enter multiple paragraphs in the redactor field, use a <div> (or another element that can contain <p> tags) as the wrapper instead of a <p>.
  2. If you really only want to allow a single paragraph in the redactor field, you can switch to inline mode. This way, the redactor output won't be wrapped in <p> tags so you can safely use the <p> tag in your template. Sidenote, this setting is quite unreliable, you may want to use striptags with a whitelist of allowed inline tags to ensure the output doesn't include superfluous <p> tags.

It's not creating tags outside the parent, that's simply how the browser interprets incorrect HTML. The inspector always display the DOM tree created by the browser, not the HTML source. Looks like your redactor field includes a <p> tag in its value, but you're also wrapping that in a <p> tag in your template. This results in output like this (which you can check using right click -> View Page Source in your browser):

<p class="section__description padding-left">
    <p>
        Lorem Ipsum …
    </p>
</p>

But that isn't valid HTML, because a <p> tag can't contain other <p> tags. Browsers try to fix broken HTML, so the first paragraph is automatically closed before the second one opens. This is why you see multiple paragraphs in the inspector.

To fix this, you have to options:

  1. If you want the editors to be able to enter multiple paragraphs in the redactor field, use a <div> (or another element that can contain <p> tags) as the wrapper instead of a <p>.
  2. If you really only want to allow a single paragraph in the redactor field, you can switch to inline mode 1. This way, the redactor output won't be wrapped in <p> tags so you can safely use the <p> tag in your template. Sidenote, this setting is quite unreliable, you may want to use striptags with a whitelist of allowed inline tags to ensure the output doesn't include superfluous <p> tags.

1 Inline mode is broken, see this issue for details. Instead, set enterKey: false to prevent editors from adding new paragraphs or breakline: true to make the enter key add <br> tags instead of starting a new paragraph. Remove all block formatting options with the buttons setting. Then you can use the striptags filter in the output template to only allow inline tags and remove the <p> tag if necessary. If this sounds tedious, see my answer here regarding alternative WYSIWYG editors.

Source Link
MoritzLost
  • 11.9k
  • 6
  • 23

It's not creating tags outside the parent, that's simply how the browser interprets incorrect HTML. The inspector always display the DOM tree created by the browser, not the HTML source. Looks like your redactor field includes a <p> tag in its value, but you're also wrapping that in a <p> tag in your template. This results in output like this (which you can check using right click -> View Page Source in your browser):

<p class="section__description padding-left">
    <p>
        Lorem Ipsum …
    </p>
</p>

But that isn't valid HTML, because a <p> tag can't contain other <p> tags. Browsers try to fix broken HTML, so the first paragraph is automatically closed before the second one opens. This is why you see multiple paragraphs in the inspector.

To fix this, you have to options:

  1. If you want the editors to be able to enter multiple paragraphs in the redactor field, use a <div> (or another element that can contain <p> tags) as the wrapper instead of a <p>.
  2. If you really only want to allow a single paragraph in the redactor field, you can switch to inline mode. This way, the redactor output won't be wrapped in <p> tags so you can safely use the <p> tag in your template. Sidenote, this setting is quite unreliable, you may want to use striptags with a whitelist of allowed inline tags to ensure the output doesn't include superfluous <p> tags.