CKEditor 5 makes unwanted markup changes

The issue summary needs some fixing up by using <code> tags.

I also think this may be a duplicate of some very recent issues.

The issue summary was indeed unreadable — fixed.

ck5 inserts paragraph tags <p> wherever it sees fit.

Needs steps to reproduce.

<br /> and <hr /> tags get stripped of their slash -- what was <br /> becomes <br>

That's not unreasonable: they are A) equivalent in browsers, B) only the slashless variant is HTML (5), the variant with the slash is XHTML. There's no data loss, they're equivalent. This is the equivalent of complaining about whitespace changes.

Finally: is this behaving differently than in CKEditor 4?

Finally: is this behaving differently than in CKEditor 4?

Yes. I was used to putting lots of code in text area fields, but CK5 makes life a lot more troublesome for me.
There are several strange things going on.

<img … > 

becomes

<p>
   <img … >
</p>

which causes unexpected issues with css as there might be a margin or a padding be defined with a paragraph.
Changing the code to

<div>
   <img … >
</div>

won't add the paragraph.

There are some great things with CK5 as well, it's just different from what CK4 was. And basically I want to be the one who runs the show, even when I want to do something super strange. It's unacceptable for me when a tool I told to not make any changes tinkers with my code.

And that's the most important point: If none of the boxes are checked, CK has to refrain from doing any changes to the code I wrote. Otherwise you won't need these check boxes, right?

<img> is a notoriously tricky tag to handle, because depending on the image, it can be considered inline or block. Looks like CKEditor 5 is treating that image of yours as inline.

Can you please extract markup from your content for a reproducible test case? 🙏 Otherwise it's impossible to help you 😞

If none of the boxes are checked, CK has to refrain from doing any changes to the code I wrote.

Which boxes are you referring to? 🤔

And basically I want to be the one who runs the show, even when I want to do something super strange. It's unacceptable for me when a tool I told to not make any changes tinkers with my code.

If you want 100% control over your markup, never use an assistive rich text editor. CKEditor 4 also reformatted markup!

In general I think we can agree that every kind of coding/programming/marking up is tricky to handle: That's why there's a specialized group of professionals, called 'programmers' with a rather general term.

For a good laugh: The markup from my content is the one above. I didn't include src= … yadda, yadda, because I suppose any programmer can figure this.

The boxes I'm referring to are obviously the ones to configure the behaviour of CK5, found here:
/admin/config/content/formats/manage/full_html?destination=/admin/config/content/formats

And thanks for the heads up -- I think I knew this since maybe 1984. But I was perfectly fine with CK4, and I'm not perfectly fine with how CK5 behaves. Don't try to sell it's ill behaviour to me. All I ask for is: Leave my lines alone if I hadn't ask for any assistance.

Please don't be condescending. Not every problem is equally tricky.

I can reproduce what you reported by using <img …> … but I can't if I actually provide an image source. So it appears that what you reported only happens because you're providing incomplete markup.

Can you reproduce when you provide an actual src too?

Whatever it was, it's amazingly gone. My source code remains unaltered just as it was with CK4. Pure Magic :)
Well, let's consider this issue being fixed. Thanks for listening, and all the best.

Glad to hear it!

Automatically closed - issue fixed for 2 weeks with no activity.

Today's editing revealed one more strangeness of CK5 unwantedness:

Given this code in "Full HTML" mode

<h2 class="display-2 fw-bolder lh-sm text-end">
            Get
            <br>
            new
            <br>
            friends
            <br>
            ever day.
        </h2>

becomes

<h2 class="display-2 fw-bolder lh-sm text-end">
            Get&nbsp;&nbsp;
            <br>
            new&nbsp;
            <br>
            friends&nbsp;&nbsp;&nbsp;
            <br>
            ever day.
        </h2>

Sometimes there are even more   additions, up to seven (!) per line of code. Every time I reopen the source code, I have to delete the unwanted and unnecessary markup, just to have it in place again once I reopen.

This is what is intended:

And this is what CK thinks it should like:

Would be nice to be respected by the coders. Thank you.

Using this line
<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>
in a Full HTML text area -- which is perfectly legal to embed icons and stuff -- the line simply disappears when switching from "source" to "view" mode.

Here's the source code after pasting the line of code from Bootstrap docs (no typos, …):

And this is what's left when returning to source code:

Embarrassing to say the least, as it won't let you embed Bootstrap Icons. I sure don't want to re-invent the wheel but use what's considered a standard, f.e. Bootstrap and HTML tags.

Another oddity of CK5 compared to CK4:
Pressing Return results in a <p> tag, but pressing Shift-Return also results in a <p> tag being inserted.
With CK4 Shift-Return inserted a <br> tag, which can be used to vary line spacing. As everybody who got formal education in typesetting should know, paragraphs are usually separated wider whitespace than just new lines within a paragraph. Using <br> to break lines within a paragraph worked perfectly well, now this is gone.

I for one am not happy with a newer version which less of a tool than it used to be -- and CK5 sure is a burden when you have to write hundreds of lines per day.

#12: this is a known upstream bug, and we're tracking it at #3231168: [upstream] Adding   in source editor adds   to the end of lines → .

#13: that was a known upstream bug, this was fixed recently: 🐛 [upstream] [GHS] CKEditor 5 removes empty inline elements Fixed . See https://www.drupal.org/node/3379650 → .

Putting this as code in the HTML part
```

• 
  
  Find us on Facebook
  
  

```
gets auto formatted to
```

• Find us on Facebook 

```
breaking layouts. looks like its trying to combine the two span classes into 1, and leaves the second one blank.

Putting this as DOM -

<div class="social-media">
<span>Share</span> 
<span class="icon">
<a href="#" target="_blank" rel="noopener">
<em class="fa-fw fa-twitter fab">&nbsp;</em>
</a>
</span>
</div>

This gets modified into

<div class="social-media">
<span>Share</span>&nbsp;
<a href="#" target="_blank" rel="noopener">
<em class="fa-fw fa-twitter fab">
<span class="icon">&nbsp;</span>
</em>
</a>
</div>

Does anyone have any idea how to fix this issue? Thanks in advance.

@IGosh
Trying to see what can be done, I disabled the "Correct faulty and chopped off HTML" option.
The result?

<p>
    Share&nbsp;<a href="#"><em>&nbsp;</em>&nbsp;</a>
</p>

And even when I reverted to the enabled state, things didn't change any more. Seems I broke CK5… Is there any reliable editor which can be used instead? I'm tired of working with a "regular" editor for dev and copying code to CK5 hoping it will suffice this buggy implementation.

Why can't there be a "let my stuff alone" option, keeping the faulty guessing of an immature module out of the equation?

See my #13 request -- only 5 months later (#14) it was "recently fixed". Things simply take too long when CK5 is trying to make my code valid. So for Gods sake, allow to stop the nonsense for Admin mode …

Subscribing to this thread - I had been muddling through for a while by disabling CK 5 entirely and just writing HTML, but as I'm about to launch this site and release/train the client, this will not be acceptable.

Is there a way - any way at all - to use CK 5 without it stripping out valid HTML? (e.g., style attributes) +1 for a "let my stuff alone" option.

Please? Thanks...