Custom alignment classes in Page Edit Image not working in CKEditor

[schwaaab]

Short description of the issue

The Alignment Classes in Modules->Configure->ProcessPageEditImageSelect cannot change to anything but the default classes. CKEditor does not recognize other set custom classes.

Expected behavior

The custom classes should be recognized by CKEditor and put to the img element.

Actual behavior

None other than the default classes work. You can add another class like "align_left uk-align-left", but only align_left gets recognized.

Steps to reproduce the issue

1. Go to Modules->Configure->ProcessPageEditImageSelect and change the custom alignment classes
2. go to a page textarea field with ckeditor active and put in text and an image
3. use the alignment on the image to float it to the text

Setup/Environment

• ProcessWire version: 3.0.120
• PHP version: 7.2.8
• 10.1.34-MariaDB

[Toutouwai]

I took a quick look and I think the change needed to support multiple align classes is something like the following at line 642:

$validClasses = array_merge(explode(' ', $this->alignLeftClass), explode(' ', $this->alignCenterClass), explode(' ', $this->alignRightClass));

Also, currently the user has to manually allow any custom align classes as "Extra Allowed Content" for CKEditor fields. But given that ProcessPageEditImageSelect invites the user to enter custom align classes it would be better if these were automatically allowed for CKEditor rather than the current scenario where the allowed align classes are hardcoded in the pwimage plugin: https://github.com/processwire/processwire/blob/6ad523966655a03c60f3d76a9b38f7f3dfd2d33e/wire/modules/Inputfield/InputfieldCKEditor/plugins/pwimage/plugin.js#L13-L17

[ryancramerdesign]

Thanks @schwaaab @Toutouwai I've pushed your suggested fix for this. Regarding CKEditor, since we're moving to TinyMCE, and it may not be so simple to update CKEditor for it, I think we'll skip modifying the CKEditor plugin right now, as I don't think our implementation of TinyMCE has the same issue. There's also the matter of other alignment classes not being supported by the admin, but we also have a solution for that in our implementation of TinyMCE.

[matjazpotocnik]

@schwaaab @Toutouwai based on Ryan's response I'll close this issue. I hope you're ok with that; if not, let me know, and I'll reopen.