mdaniel

Hi, I don't know if this will help you, but recently I also had a CKEDitor problem (PW v: 3.0.165, browsers (64bit): Firefox v: 80.0.1 Chrome v: 85.0.4183.102) and searching solution for my problem I played with CKEditor and using the setting below I didn't experienced the reported problem. My Block Style settings:

{ name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
{ name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } }

which I appended to wire/modules/Inputfield/InputfieldCKEditor/mystyles.js:

/**
 * mystyles.js
 *
 * This file may be used when you have "Styles" as one of the items in your toolbar.
 *
 * For a more comprehensive example, see the file ./ckeditor-[version]/styles.js
 *
 */
CKEDITOR.stylesSet.add( 'mystyles', [
 { name: 'Inline Code', element: 'code' },
 { name: 'Inline Quotation', element: 'q' },
 { name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'align_left' } },
 { name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'align_right' } },
 { name: 'Centered Photo', element: 'img', attributes: { 'class': 'align_center' } },
 { name: 'Small', element: 'small' },
 { name: 'Deleted Text', element: 'del' },
 { name: 'Inserted Text', element: 'ins' },
 { name: 'Cited Work', element: 'cite' },
 { name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
 { name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } }

] );

Useful link about CKEditor settings:  talk/topic/17862-share-your-ckeditor-settings/?tab=comments#comment-156594

@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).

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.

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:

...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!

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?