[upstream] Alignment/justify buttons not appearing for CKEditor, <p class="text-align-left text-align-center text-align-right text-align-justify"> not being allowed automatically

It's a bug, the toolbar do not sync with input configs.

we have an issue with patch for that but I can't find it anymore sadly. :(

Buttons will not be shown if you have "Limit allowed HTML tags and correct faulty HTML" filter enabled, you can disable this filter (security risk) or add to each element in "Allowed HTML tags" setting this few classes: <p class="text-align-left text-align-center text-align-right text-align-justify">. You must add "class" attribute to each element which you want to align.

Module Filter provides form element "text_format" and filter plugin (see FilterInterface), then Editor module alter text_format element and apply all editor plugins (see EditorPluginInterface) to this element, btw one of editor plugin contains in ckeditor module (see Drupal\ckeditor\Plugin\Editor\CKEditor)...
In few words: editor module is affects on input form through hook form alter, but can't affect on output filtering, because it's in responsibility of filter module.

The solution in #4 is documented in the help text (which I also took a while before noticing!) where it states a wildcard * can be used, so we only need <p class="text-align-*">

Let's see if @Wim Leers could give us some hints.

Hardly to understand the code in editor & filter & CKEditor modules.

It is indeed related to #2549077: Allow the "Limit allowed HTML tags" filter to also restrict HTML attributes, and only allow a small whitelist of attributes by default, which now causes more strict CKEditor ACF restrictions.

The alignment buttons need classes to function. From \Drupal\ckeditor\Plugin\CKEditorPlugin\Internal::getConfig():

'justifyClasses' => array('text-align-left', 'text-align-center', 'text-align-right', 'text-align-justify'),

So those classes need to be allowed on the <p> tag. i.e. you need to add this to the Limit allowed HTML tags and correct faulty HTML filter setting:

<p class="text-align-left text-align-center text-align-right text-align-justify">

Of course, that should be happening automatically. That's the actual bug to address here.

I think this is a bug in core/modules/ckeditor/js/ckeditor.admin.js, where it's not properly handling the requiredContent of the CKEditor justify plugin.

Related issues with similar (but less specific) problems are:

1. #2606496: Automatically allowed automatically attributes may be incomplete if they are for a CKEditor plugin that is enabled depending on a filter
2. #2567801: Deprecate core/modules/editor/js/editor.admin.js JS APIs in Drupal 10, for removal in Drupal 11

While the problem is not solved, my workaround is to put "Allowed HTML tags" like this:
<p id class="">
<h1 id class="">
<a href hreflang>
... etc...

@zviryatko: Thanks for the workaround. I was so happy to find this post. I hope that it's fixed automatically soon.

I wonder if https://ckeditor.com/blog/CKEditor-4.7.2-released fixes this, because it specifically mentions an ACF + Justify bugfix. Testing…

Nope, updating to 4.7.2. sadly doesn't fix it.

https://github.com/ckeditor/ckeditor-dev/issues/455 shows that it's more about the Justify plugin respecting ACF rules, which explains why it didn't fix this.

Wouldn't it be an option to rewrite this plugin to use our own, based on data-align attributes even for <p> tags?

I tried to figure out how this was already overwritten in our drupalimage implementation but I can't see anything outside drupalimagecaption. I feel like there is something dirty done here ;)

@DuaelFr, as for me it's question of design, I've described it shortly in #6

Closed #2952740: [upstream] CKEditor alignment buttons not showing up as a duplicate of this.

Assigning to CKEditor maintainer @mlewand for feedback.

Does the workaround makes the align buttons appear in the toolbar?

Because I cannot get them displayed in the toolbar. I can set the classes in source mode though.

Nevermind, I have found why. We were using a custom setting on the editor which conflicts with the buttons:

function MODULE_editor_js_settings_alter(array &$settings) {
  foreach ($settings['editor']['formats'] as $name => $value) {
    // Use <br> instead of <p> on enter.
    // See: https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR.html#property-ENTER_BR.
    // CKEditor natively converts double <br> into <p> on rendering.
    $settings['editor']['formats'][$name]['editorSettings']['enterMode'] = '2';
  }
}

Well, we got to find another workaround, I guess...

Still in 8.5.6.

10 fixed it for me.... thanks

Hi,

i'm only trying to make my site a little bit prettier und stumbled upon this thread. I read Nr. 10 over and over again, but i don't know how to get there to activate my justify buttons nor in which file i have to set these lines. May someone please write a step by step guide, so a newbie like me can follow it? It ist very frustrating to set the justify argument by hand in every P Tag.

I would be glad to hear from you again.

@seppelttheflash the fix is: put <p class="text-align-left text-align-center text-align-right text-align-justify"> into "allowed HTML tags".

Confirmed: the problem still exists in Drupal 8.6.1.

Another issue: not only p can have an alignment, but all block level elements (div, h1, h2...). So putting in just "p" won't be enough.
Wouldn't it be smarter to not force a tag for global attributes, as they can get added to many different tags.

https://www.w3schools.com/tags/ref_standardattributes.asp

Is this really a bug? I thought this was just how the input filter works. Out of box you can't create a table or insert and image with the default allowed tags that is populated when you enable limit allow HTML.

If you add any contrib modules you have to dig around to find every attribute the module wants to use and then whitelist it.

Here is the limit list I have to run for LinkIt, Entity Embed, tables and custom formats:

<a href hreflang data-entity-substitution data-entity-type data-entity-uuid class target name> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id class> <h3 id class> <h4 id class> <h5 id class> <h6 id class> <u> <s> <sup> <sub> <drupal-entity data-entity-type data-entity-uuid data-entity-embed-display data-entity-embed-display-settings data-align data-caption data-embed-button> <p class> <img src alt data-entity-type data-entity-uuid data-align data-caption height width> <blockquote cite class id> <hr> <table> <caption> <tbody> <thead> <tfoot> <th> <td> <tr> <div class data-blazy data-media-gallery data-media data-url style> <span class>

Absurd, but it's very much a Drupal way to do things.

I would recommend boilerplating this better, out of the box you can't really create much or provide a cheatsheet and documentation around this.

Adding <p class> to the allowed filter lets the user do justification.

Agree with @Mile23 #34 Adding <p class> in Allowed HTML tags shows the configured Alignment options in CKEditor, since these options are adding classes and we are allowing the classes to be applied on p tag.

I have an input format which is only for headings, so only h1, h2, etc. allowed and specified in the Styles dropdown. I shouldn't have to add <p class=""> to my allowed tags if I don't allow paragraphs, right? The only way I can get this to work is to add that as well as all the h tags I want with the class allowed on them as well. Without that last piece, the buttons are grayed out when I change the text entered into a heading tag. So mine ends up looking like <u> <em> <strong> <h1 class=""> <h2 class=""> <h3 class=""> <h4 class=""> <p class=""> in order for it to work "as expected".

In addition to not being able to see the alignment buttons, I am also not able to see buttons created by this module. I can now see the alignment buttons thanks to this comment but I've yet to find out what tag/class that project adds.

#4 works, thank you.

Re-titling, since we have retired the terms "whitelist" and "blacklist" in core.

Can confirm the solution in #4 works for me on 9.1.6 core.

CKEditor has been removed from core, CKEditor 4 is removed from Drupal Core in 10.0.0

I tried to reproduce this on Ckeditor 5 but it was working.
So +1 for moving it to the CKEditor 4 issue queue

This module is EOL/unsupported and #2567801: Deprecate core/modules/editor/js/editor.admin.js JS APIs in Drupal 10, for removal in Drupal 11 is deprecated in Drupal >=10.3 and will be removed in >=11.

This will never get fixed at this point.