Wysiwyg-editor: Enter splits wrapping element

[M-Knobloch]

Expected behavior.

<article>
    <section>Section content</section>
</article>

press enter on cursor position between "Section" and "content"
expected is <section> Section<p>&nbsp; </p>content</section>

Actual behavior.

article>
    <section>Section&nbsp;</section>
    <section>content</section>
</article>

So my section Element is split up in two and no p tag is generated.

Steps to reproduce the problem.

Do it in your own online example https://www.froala.com/wysiwyg-editor

OS.

W10

Browser.

Mozilla

The same strange behaviour happens on other nested elements.
Also when i place the cursor inside the text and toggle to code view, the cursor is placed to begin of the text-node, after the html-start Tag. The same happens vice versa, when toggle back to wysiwyg mode.

[stefanneculai]

Section is by default a block and when HTML is insert in a block, the editor splits it. What you could do to avoid that is to add the following code before initializing the editor which removes section as a block tag.

$.FroalaEditor.BLOCK_TAGS = ['address', 'article', 'aside', 'audio', 'blockquote', 'canvas', 'dd', 'div', 'dl', 'dt', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'hr', 'li', 'main', 'nav', 'noscript', 'ol', 'output', 'p', 'pre', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'ul', 'video'];

[M-Knobloch]

thanks for your answer, i will try immediately. Unfortunately your reaction did not appear on my list until now. So i refiled the question again. Sorry for that, delete it please

[stefanneculai]

@M-Knobloch we answered to your questions via email in the same day. Please make sure you're receiving our responses via email. Also, please check the spam/junk folder because responses might end there sometimes.

[SeanDKendle]

I created a couple of plugins that add DIVs into the editor. We need DIVs to be in the $.FroalaEditor.BLOCK_TAGS list so that they're allowed as top-level elements, but I also want people to be able to type comfortably within them, and add P tags by hitting enter, without them being split apart.

Is there any way to accomplish this?

[stefanneculai]

@SeanKendle please add class fr-inner to those divs that you don't want to split.

[SeanDKendle]

@stefanneculai thanks for that, that seems to allow me to add new lines. However, they're coming out as BR tags instead of P tags. Is there a way to allow P tags within div elements, specifically?

[stefanneculai]

@SeanKendle it is not possible to allow P tags within DIV elements at this moment.

[SeanDKendle]

Ok, thanks, this will work for now. Is there a list of special classes like fr-inner somewhere?

[stefanneculai]

There is only one more class which could be used fr-deletable which could be used to mark an entire inline node as being deletable on backspace.