Add CSS-based text-alignment to CKEditor in ProcessWire

ProcessWire uses CKEditor for HTML text editing. It does not come with text alignment buttons enabled by default. If you do enable them it uses the style attribute for alignment rather than CSS classes. To add the buttons and use CSS classes follow these steps.

You will need to do this for every CKEditor field (via the Input tab) but you can do it to one and then duplicate the field.

Firstly, add this to CKEditor toolbar as a new line:

JustifyLeft, JustifyCenter, JustifyRight, JustifyBlock

Then add this to Custom Config Options:

{"justifyClasses":["txt-left","txt-center","txt-right","txt-justify"]}

Now add this to Custom Editor CSS File (regular mode):

/site/modules/InputfieldCKEditor/contents.css

Save the field and then add the follow CSS to your front-end:

.txt-left { text-align: left; }
.txt-center { text-align: center; }
.txt-right { text-align: right; }
.txt-justify { text-align: justify; }

Finally, add the above CSS to the CSS file as specified in Custom Editor CSS File (regular mode).