Wysiwyg-editor: Can't Backspace or Delete P tag if before or after contenteditable="false"

Created on 9 Mar 2018  路  5Comments  路  Source: froala/wysiwyg-editor

Expected behavior.
  • If the cursor is after a contenteditable=false element, hitting backspace should delete the P tag, leave cursor where it is
  • If the cursor is before a contenteditable=false element, hitting the delete key should delete the P tag, leave cursor where it is
Actual behavior.

Can't delete P tags that are before contenteditable=false elements using delete key
Can't delete P tags that are after contenteditable=false elements using backspace key

Steps to reproduce the problem.

Insert this code into editor at https://www.froala.com/wysiwyg-editor:

<div contenteditable="false"><img src="https://s3-eu-west-1.amazonaws.com/froala-eu/temp_files%2F1520607126390-Hydrangeas.jpg" style="width: 300px;" class="fr-fic fr-dib fr-fil"></div>

<p>
    <br>
</p>

<div contenteditable="false"><img src="https://s3-eu-west-1.amazonaws.com/froala-eu/temp_files%2F1520607126390-Hydrangeas.jpg" style="width: 300px;" class="fr-fic fr-dib fr-fil"></div>

Place cursor in P tag between images, hit backspace, hit delete. Nothing happens.

OS.

Windows 7

Browser.

All

enhancement

Most helpful comment

Thanks for the clarification, Sean. I see what you mean now.

All 5 comments

That's because, by default, the editor is designed not to delete block tag elements. If you'd like to make it deletable, it is necessary to add the fr-deletable class to it.

<p contenteditable="false" class="fr-deletable">...</p>

I've changed them to DIVs with contenteditable="false" to make my example more clear. I want to be able to backspace within the P tag, and delete the P tag itself. Not the Divs.

Thanks for the clarification, Sean. I see what you mean now.

We've checked this again and decided to leave the current implementation as it is. Removing that line would result in not being possible to add a line between those 2 non-editable lines easily.

To be able to add back in that line, I just add those tags to the Line Breaker tags array. It seems to work fine.

Was this page helpful?
0 / 5 - 0 ratings