Extra Allowed Content | CKEditor strips i tag and classes

[electricarts]

Hi,

what do i have to do, to allow the i tag and the h4 class in the CKEditor? In the Extra Allowed Content box (setup field -> input) i wrote "i(*);h4(*)". But when i type 

<h4 class="uk-panel-title"><i class="uk-icon-credit-card-alt"></i>Unsere Bankverbindung:</h4>

the CKEditor still strips the complete i tag and the h4 class from the source. 

Mario

[Christophe]

Hi,

Normally, as written above the Extra Allowed Content box, i(*) and h4(*) have to be on separate lines.

h4(uk-panel-title) and i(uk-icon-credit-card-alt) should work.

(uk-panel-title) and (uk-icon-credit-card-alt) also.

[electricarts]

Hi Christophe,

thanks for your reply! I've also tried i(*) and h4(*) individual. Without success. Your other suggestions didn't work too. 

[horst]

Sorry, I do not work much with CKEditor, but maybe a detailed google search uncovers a solutions: https://www.google.de/search?q=site:processwire.com/talk+-%22Viewing+Profile%22+%2Bckeditor+%2Bextra+%2Ballowed

[3fingers]

You can also add your personal styles in site->modules->InputfieldCKEditor->mystyle.js

Example:

CKEDITOR.stylesSet.add( 'mystyles', [
 { name: 'Credit Card Icon', element: 'i', attributes: {'class': 'uk-icon-credit-card-alt'} },
 { name: 'Panel Title', element: 'h4', attributes: {'class': 'uk-panel-title'} },
]);

You could now select on-demand which <i> and <h4> you want to apply those styles.

[Francesco Bortolussi]

Hi.

Maybe HTML purifier and ACF (CKEditor Advanced Content Filter) is stripping all unrecognized or not permitted html.

You can test this, unchecking this option's in in the "Input" tab for the specific field.

Be careful with this because those filter's are there for security/standarization reason's; if you uncheck them you give plenty power to the user's to ruin your html Layout.

(This could be overcome with a good CSS+HTML encapsulation of the content)

Hope this help's.

[electricarts]

Hi,

i tried everything i found about this issue (here and with a Google search). Nothing helped. I unchecked ACF and HTML purifier. I added the i tag to the Format Tags section under field->Input->CKEditor Settings. This made the field unusable (the field in the backend was empty after). I used wildcards 

i[*]{*}(*)

in the Extra Allowed Content box. Didn't work.

In the end i made a Hanna Code snippet. This worked and is maybe the better and more secure solution. But it drives me crazy to not know what i'm doing wrong. 

[3fingers]

Did you already spotted this link ?

[electricarts]

No, i didn't found this. Thanks for the link!

That means, i've to write this

config.allowedContent = true;
config.extraAllowedContent = 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}';
CKEDITOR.dtd.$removeEmpty.i = 0; 

directly in the config.js and there's no way to use entries in the Input section of the field to achieve this? 

[3fingers]

I don't know if there is a better way to achieve the same result,I had (for a previous project) to insert :

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	config.protectedSource.push(/<i[^>]*><\/i>/g);
	config.enterMode = CKEDITOR.ENTER_BR; // I added this because I didn't want a new <p> tag on every new line, <br /> instead.
};

CKEDITOR.dtd.$removeEmpty['i'] = false

 inside site\modules\InputfieldCKEditor\config-body.js (you shoud already have that file there).

To be honest I don't know why this is necessary and doesn't work by default, but as far as I know it's not related to processwire, rather by Ckeditor itself.

[DarsVaeda]

Quote

Allowed content rules per CKEditor extraAllowedContent option. Applies only if the "Use ACF" checkbox above is checked. You may enter multiple rules by putting each on its own line.

For me it only works if "Use ACF" is unchecked!

[bartelsmedia]

Sorry to dig out this posting but I have a similar issue:

I tried allowing "button(*)[*]{*}" or "button" or "button(*)" or "button[*]" but Processwire still strips out this html:

<button aria-expanded="false" aria-haspopup="true" class="dlbutton dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" type="button"><span class="sr-only">Toggle Dropdown</span></button>

 

The "fun" part: When inserting above in CKEDitor html source code view and pressing OK, it is still there but when I actually save the page, it gets wiped out.

Any help would be very much appreciated.

[wbmnfktr]

@bartelsmedia in your case HannaCode could be an option.

 

[bartelsmedia]

I try to avoid Hanna code as it is quicker to edit in CKE and I prefer not to bloat the Hanna Code selection drop-down in CKE

[szabesz]

5 hours ago, bartelsmedia said:

The "fun" part: When inserting above in CKEDitor html source code view and pressing OK, it is still there but when I actually save the page, it gets wiped out.

 

Maybe HTML Purifier is at work? CKEditor makes changes when closing its source code editor but HTML Purifier makes changes right before saving the data.

[bartelsmedia]

Yes, HTMLPurifier is enabled. Can it be configured not to strip the valid <button> html?

[bartelsmedia]

You were right. I tried the HTMLPurifier Demo and it removes the button html:

http://htmlpurifier.org/demo.php

Quote

Error Line 4, Column 1: Unrecognized <button type="button" class="btn btn-lg dlbutton disabled btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> tag removed

Strange, that it doesn't like buttons.

[szabesz]

14 hours ago, bartelsmedia said:

Strange, that it doesn't like buttons.

HTML Purifier is not yet configurable in ProcessWire. You can give this request a thumb's up though: https://github.com/processwire/processwire-requests/issues/226

Anyway, without being able to actually configure it I have no experience in this field.