CODEWITHSUNDEEP
javascripthtmlckeditorwysiwyg
Dave
Dave

Reputation: 1639

How to prevent a block style to propagate onto following block when deleting new lines in CKEditor?

When there are 2 blocks with style applied to then and you delete an empty line between them the lower block's style is lost and overwritten by the previous block's style. How to prevent this? I want the styles to remain unchanged and just remove the line break.

Here's an example of what I'd like to prevent the editor from doing:

CKEditor bug

var editor = document.getElementById('editor');
 CKEDITOR.inline(editor);
<script src="//cdn.ckeditor.com/4.7.0/standard/ckeditor.js"></script>
<div id="editor" contentEditable>
  <p></p>
  <h1>Heading</h1>
</div>

I've googled extensively but can't find any mention of this behavior or how to clearly describe what this behavior is called. Any advice appreciated!

Upvotes: 2

Views: 263

Answers (1)

Niloct
Niloct

Reputation: 9995

It seems that it's kinda of expected result, since you delete a H1 element and the previous element is a P tag in your snippet.

Check this snippet in which the previous element is also a H1

var editor = document.getElementById('editor');
 CKEDITOR.inline(editor);
<script src="//cdn.ckeditor.com/4.7.0/standard/ckeditor.js"></script>
<div id="editor" contentEditable>
  <h1></h1>
  <h1>Heading</h1>
</div>

If you inspect the HTML and then delete you will see that in your example the H1 element is indeed deleted and its content is moved into the previous P element.

Upvotes: 0

Related Questions