[solved] div tag in CKEditor field

[mdaniel]

I installed site-regular Pw version 3.0.165 and changed CKEditor Toolbar settings for the body field of the Home page by adding the available CreateDiv, ShowBlocks and Templates items to the CKEditor toolbar. Then using CreateDiv menu item I added the HTML fragment below to the body:

~~~

<div style="display:inline-block; padding-top:5px">
 <div class="uk-card uk-card-default uk-card-small uk-padding-small" style="display:inline-block">
   <div class="uk-card-body"><img alt="" src="http://pilisborosjenoinfo.hu/site/assets/files/1226/kep4.jpg" style="border-style:solid; border-width:2px; height:143px; margin:10px 2px; width:190px"></div>

   <div class="uk-card-footer uk-text-center">Anna és Levi - 05.28</div>
 </div>

 <div class="uk-card uk-card-default uk-card-small uk-padding-small" style="display:inline-block">
   <div class="uk-card-body"><img alt="" src="http://pilisborosjenoinfo.hu/site/assets/files/1226/kep5.jpg" style="border-style:solid; border-width:2px; height:143px; margin:10px 2px; width:190px"></div>

   <div class="uk-card-footer uk-text-center">Anna és Levi - 05.28</div>
 </div>

 <div class="uk-card uk-card-default uk-card-small uk-padding-small" style="display:inline-block">
   <div class="uk-card-body"><img alt="" src="http://pilisborosjenoinfo.hu/site/assets/files/1226/kep7.jpg" style="border-style:solid; border-width:2px; height:143px; margin:10px 2px; width:190px"></div>

   <div class="uk-card-footer uk-text-center">Rita és Gyuri - 04.28</div>
 </div>
</div>

~~~

When I saved the page div tags have been disappeared. I want to add a similar template to the CKEditor templates. It seems that <div> tags can't be used in pw CKEDitor fields or am I wrong?

Edited September 11, 2020 by mdaniel
solved

[stanoliver]

Hi @mdaniel! Welcome to the forum!

I am not 100% sure if I understood you right, but two things come to mind.

1. If you have the CKEDITOR fields in his default settings a lot of code will be filtered out/disappear because there are different security mechanism. You can change that behaviour  by making the filter for input not too strict. If I remember right you can find these settings in the "area" where you create new fields (a ckeditor field) or they are settings in the modules area of the ckeditor.

Beside the default settings there were at least two options available to avoid too much unwanted filtering. But be aware if you choose the less strict option because the filter mechanism is then more or less inactive and only trusted persons or admins should be allowed to use the editor without the filtering because otherwise unfiltered input of "bad stuff" could be harmfull for your pw-setup.

2. Something looks strange to me in your provided code but maybe I missed something in the "css school":

I never saw any < or > between the quotations of css classes 

What seems strange/wrong to me and you did this several times 

<div class="<uk-card uk-card-default uk-card-small uk-padding-small" style="display:inline-block">

I hope I could help you!

[mdaniel]

Hi @stanoliver, thanks for your remarks.

1. I will check how filter settings affects the behavior.

2. I made some typos in the default.js of the templates plugin which generated the bad code:

Spoiler

<div class="<uk-card uk-card-default uk-card-small uk-padding-small" style="display:inline-block">
    <div class="<uk-card-body >">

...html:'\x3cdiv style\x3d"display:inline-block; padding-top:5px"\x3e\x3cdiv class\x3d"&lt;uk-card uk-card-default uk-card-small uk-padding-small" style\x3d"display:inline-block"\x3e\x3cdiv class\x3d"&lt;uk-card-body &gt;"\x3e...

Cheers!

[mdaniel]

I fixed the bugs in my HTML fragment above and set filter settings for the body field as follows:

on Details tab:

• Text Formatters: (empty)
• Content Type: Markup/HTML

on Input tab:

• Use ACF: Yes
• Use HTML purifier: Yes
• Beautify Markup Toggles: convert div tags to paragraph tags: unchecked
• Extra Allowed Content: div {display}

~~~

Recently when I save the page only the  display style name and it's value is removed, the CKEditor source function (preview) shows the 1st div like: <div style="padding-top:5px"> and from uk-card divs the complete style definition removed.

Can somebody help me to set the proper filtering?

Thanks in advance.

[stanoliver]

@mdaniel If only trusted user allowed to use the editor than I would set 

html purifier: no

may also set acf: no

(so that the editor does accept different css frameworks ... )

 

[mdaniel]

@stanoliver I investigated possible filter settings of CKEditor field and it turned out that HTML Purifier filters out the display property of div tags. The following settings resolved my problem:

Setting 1

Use ACF: Yes
Use HTML purifier: No
Beautify Markup Toggles: convert div tags to paragraph tags: unchecked

When I changed the value of style attribute to style="float: left" in the code

Setting 2.

Use ACF: Yes
Use HTML purifier: Yes
Beautify Markup Toggles: convert div tags to paragraph tags: unchecked

also fixed the problem. Investigating the MarkupHTMLPurifier.modul I couldn't figure out why  Setting 2. filters out style="display:inline-block".

Any idea?

I don't know whether it would be reasonable to have an "Extra Allowed Content" for HTML Purifier as well to change it's config (e.g. HTML.AllowedAttributes).

 

[stanoliver]

@mdaniel You do the right thing by exploring MarkupHTMLPurifier.modul or other modules in detail (good for learning ...). I have normally no time for such  (as long I do not really have to understand them for getting a better solution) explorations. I normally turn both filter (html purifier and ACF) just of and have no problems anymore.