Issue #1907418 by quicksketch, Wim Leers: Make CKEditor's alignment + underline buttons available (but not enabled by default).

core/modules/ckeditor/ckeditor.admin.inc

@@ -54,9 +54,12 @@ function theme_ckeditor_settings_toolbar($variables) {
 
   $build_button_item = function($button, $rtl) {
     // Value of the button item.
-    if (isset($button['image_alternative'])) {
+    if (isset($button['image_alternative'. $rtl])) {
       $value = $button['image_alternative' . $rtl];
     }
+    elseif (isset($button['image_alternative'])) {
+      $value = $button['image_alternative'];
+    }
     elseif (isset($button['image'])) {
       $image = array(
         '#theme' => 'image',

core/modules/ckeditor/css/ckeditor.admin.css

@@ -32,7 +32,10 @@
   margin-bottom: 1em;
 }
 .ckeditor-toolbar-dividers {
-  float: right;
+  float: right; /* LTR */
+}
+[dir=rtl] .ckeditor-toolbar-dividers {
+  float: left;
 }
 .ckeditor-toolbar-disabled ul.ckeditor-buttons {
   border: 0;

core/modules/ckeditor/lib/Drupal/ckeditor/Plugin/CKEditorPlugin/Internal.php

@@ -47,6 +47,7 @@ class Internal extends CKEditorPluginBase {
       'customConfig' => '', // Don't load CKEditor's config.js file.
       'pasteFromWordPromptCleanup' => TRUE,
       'resize_dir' => 'vertical',
+      'justifyClasses' => array('align-left', 'align-center', 'align-right', 'align-justify'),
     );
 
     // Add the allowedContent setting, which ensures CKEditor only allows tags
@@ -80,6 +81,10 @@ class Internal extends CKEditorPluginBase {
         'label' => t('Italic'),
         'image_alternative' => $button('italic'),
       ),
+      'Underline' => array(
+        'label' => t('Underline'),
+        'image_alternative' => $button('underline'),
+      ),
       'Strike' => array(
         'label' => t('Strike-through'),
         'image_alternative' => $button('strike'),
@@ -97,6 +102,23 @@ class Internal extends CKEditorPluginBase {
         'label' => t('Remove format'),
         'image_alternative' => $button('remove format'),
       ),
+      // "justify" plugin.
+      'JustifyLeft' => array(
+        'label' => t('Align left'),
+        'image_alternative' => $button('justify left'),
+      ),
+      'JustifyCenter' => array(
+        'label' => t('Align center'),
+        'image_alternative' => $button('justify center'),
+      ),
+      'JustifyRight' => array(
+        'label' => t('Align right'),
+        'image_alternative' => $button('justify right'),
+      ),
+      'JustifyBlock' => array(
+        'label' => t('Justify'),
+        'image_alternative' => $button('justify block'),
+      ),
       // "list" plugin.
       'BulletedList' => array(
         'label' => t('Bullet list'),

core/modules/ckeditor/lib/Drupal/ckeditor/Plugin/Editor/CKEditor.php

@@ -294,6 +294,7 @@ class CKEditor extends EditorBase implements ContainerFactoryPluginInterface {
   public function buildContentsCssJSSetting(EditorEntity $editor) {
     $css = array(
       drupal_get_path('module', 'ckeditor') . '/css/ckeditor-iframe.css',
+      drupal_get_path('module', 'system') . '/css/system.module.css',
     );
     $css = array_merge($css, _ckeditor_theme_css());
     drupal_alter('ckeditor_css', $css, $editor);

core/modules/ckeditor/lib/Drupal/ckeditor/Tests/CKEditorTest.php

@@ -319,6 +319,7 @@ class CKEditorTest extends DrupalUnitTestBase {
       'customConfig' => '',
       'pasteFromWordPromptCleanup' => TRUE,
       'resize_dir' => 'vertical',
+      'justifyClasses' => array('align-left', 'align-center', 'align-right', 'align-justify'),
     );
   }
 
@@ -348,6 +349,7 @@ class CKEditorTest extends DrupalUnitTestBase {
   protected function getDefaultContentsCssConfig() {
     return array(
       file_create_url('core/modules/ckeditor/css/ckeditor-iframe.css'),
+      file_create_url('core/modules/system/css/system.module.css'),
     );
   }
 

core/modules/system/css/system.module.css

@@ -338,6 +338,22 @@ input {
   clear: both;
 }
 
+/**
+ * Content display classes.
+ */
+.align-left {
+  text-align: left;
+}
+.align-right {
+  text-align: right;
+}
+.align-center {
+  text-align: center;
+}
+.align-justify {
+  text-align: justify;
+}
+
 /**
  * Block-level HTML5 display definition.
  *