2

https://drupal.slack.com/archives/C1BB308HH/p1602318464360700 Link to slack question in #support

JSFiddle of the offending html: https://jsfiddle.net/tyeth/xr4ohast/

Demo Video showing the paragraph beneath second image being removed: https://www.youtube.com/watch?v=Hw9NACmMsps [Was private, now just unlisted, sorry]

Hi supportive people, you must get this one a lot. I'm aware of the filter options and have customised the Full-Html mode to not use the 3 offending filters, and cleared cache, but I'm still losing content.

I'm using the drupal 8(and 9) add a custom body block using layout designer, I then use the WYSIWYG editor in full-html mode with the filters (strip bad html/convert newline br+p/convert images -- see screenshot) disabled. However it is DELETING html from the end of the editor. I wonder if it's technically an empty paragraph as that has been mentioned in other issues (it isn't but has a link inside so doesn't have it's own text content). Screenshot of full-html filters

Also, which module is actually doing the rich editing these days?

Improve this question
4
  • Have you tried to check "Limit allowed HTML tags ..." and add the <p> tag there?
    – leymannx
    Oct 10, 2020 at 13:55
  • The checkb9x for that option (which includes stripping faulty html) is not enabled. it was, but disabling it should have stopped this behaviour, hence my confusion. It only strips the certain paragraph elements. Bizarre!
    – Tyeth
    Oct 10, 2020 at 16:16
  • Is there any other CKEditor config in place? From custom or contrib modules?
    – rémy
    Oct 16, 2020 at 7:26
  • Not yet, but had read about the autoParagraph option from many years ago, just couldnt find official guidance for which editor d9/d8 uses and how to customise
    – Tyeth
    Oct 17, 2020 at 13:00

2 Answers 2

Reset to default
3
+50

Could be related to the auto paragraph funcitonality of CKEditor, which is used by default and can be disabled with this !deprecated setting:

"autoParagraph = false"

This can be easily disabled using the ckeditor_config module, see https://www.drupal.org/project/drupal/issues/3131055 for more information.

The whole paragraph wrapping in CKEditor is kind of buggy, you could also try these patches: https://www.drupal.org/project/drupal/issues/2876094 (but there the problem is an added p after an img)

I had some troubles when using linkit: https://www.drupal.org/project/linkit/issues/3162596 and made this core issue https://www.drupal.org/project/drupal/issues/3162605 (this is not related to your problem as your using the align and caption filters - but you see where the magic happens - on Drupal side).

Improve this answer
2
  • Thanks for your answer. I had seen mention of that config value but no idea where to stick it or if ckeditor was still the default, hence end of question. Looking at your issue now to understand the mechanisms better. Also +1 for mentioning the !deprecated fact, would be plus two with a link hehe
    – Tyeth
    Oct 17, 2020 at 9:49
  • You deserve the plus 2, link to deprecation in end of ckeditor_config related link, origin-docs.ckeditor.com/ckeditor4/docs/#!/api/…
    – Tyeth
    Oct 17, 2020 at 9:57
2

I checked your HTML code thoroughly. The culprit is data-align="center" used in the img tags. To fix the problem, we have two options:

Option 1. (Recommended) If you remove it(data-align="center") from your code, your problem will be resolved, ie; the p tag won't be removed automatically when Source button is clicked.

Option 2. You can uncheck the Align Images in the above configuration. This is not recommended because this will apply the changes globally which we don't desire.

Here is the fixed HTML code.

Explanation: As seen in the Editor's configurations, there is an option called Align Images. This option also adds the same data-align attribute to centrally align the images. This could be causing the conflict and strangely removing the p tags.

Improve this answer
5
  • This is the desired functionality of the Image Properties dialog, it adds the align as the user desires (we use left/center/none). I expect this to work, can you suggest why it doesnt and how to make it respect my authority ;) I have found a work around (shown in video), but I consider it fatally flawed
    – Tyeth
    Oct 14, 2020 at 11:58
  • In that case, you can go with option 2. It's not an issue if you keep in mind that this option has been unchecked.
    – Sandesh Yadav
    Oct 14, 2020 at 12:25
  • We allow the non-technical users to use the align option, it avoids the designers having to paste classes on every element or the css to be too specific.
    – Tyeth
    Oct 14, 2020 at 12:51
  • I got your point. This seems like a 'bug' in core's ckeditor module. As long as you select None, Left or Right, it works fine. But when you select the image to be center aligned, ie; whenever data-align="center" is added to the image tag, the p tag is getting stripped off. The best would be to create an issue in drupal.org. And for the temporary solution, you can avoid center aligning from Image Properties dialog. Keep the alignment to None and align with CSS.
    – Sandesh Yadav
    Oct 14, 2020 at 14:02
  • 1
    Ooh, now that is interesting that it only affects center, hadnt spotted that, thanks! I'll see if I can get anywhere with the issue tracker
    – Tyeth
    Oct 15, 2020 at 14:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.