diff --git a/core/modules/ckeditor/ckeditor.admin.inc b/core/modules/ckeditor/ckeditor.admin.inc
index 4ee12bb..c814193 100644
--- a/core/modules/ckeditor/ckeditor.admin.inc
+++ b/core/modules/ckeditor/ckeditor.admin.inc
@@ -22,6 +22,7 @@
*/
function template_preprocess_ckeditor_settings_toolbar(&$variables) {
$language_interface = \Drupal::languageManager()->getCurrentLanguage();
+ $language_direction = $language_interface->getDirection();
// Create lists of active and disabled buttons.
$editor = $variables['editor'];
@@ -61,53 +62,49 @@ function template_preprocess_ckeditor_settings_toolbar(&$variables) {
}
$disabled_buttons = array_diff_key($buttons, $multiple_buttons);
- $rtl = $language_interface->getDirection() === LanguageInterface::DIRECTION_RTL ? '_rtl' : '';
-
- $build_button_item = function($button, $rtl) {
- // Value of the button item.
- if (isset($button['image_alternative' . $rtl])) {
- $value = SafeMarkup::set($button['image_alternative' . $rtl]);
- }
- elseif (isset($button['image_alternative'])) {
- $value = SafeMarkup::set($button['image_alternative']);
- }
- elseif (isset($button['image'])) {
- $value = array(
- '#theme' => 'image',
- '#uri' => $button['image' . $rtl],
- '#title' => $button['label'],
- '#prefix' => '',
- '#suffix' => '',
- );
- }
- else {
- $value = '?';
+ // Create the internal & external buttons for the CKEditor toolbar.
+ $build_button = function($button, $language_direction) {
+ // Set additional attribute on the button if it can occur multiple times.
+ if (!empty($button['multiple'])) {
+ $button['attributes']['class'][] = 'ckeditor-multiple-button';
}
-
// Build the button attributes.
- $attributes = array(
- 'data-drupal-ckeditor-button-name' => $button['name'],
- );
- if (!empty($button['attributes'])) {
- $attributes = array_merge($attributes, $button['attributes']);
- }
+ $button['attributes']['data-drupal-ckeditor-button-name'] = $button['name'];
+ $button['attributes']['class'][] = 'ckeditor-button';
+ $button['attributes'] = new Attribute($button['attributes']);
+
+ // Add language direction property.
+ $button['language_direction'] = $language_direction;
- // Build the button item.
- $button_item = array(
- 'value' => $value,
- 'attributes' => new Attribute($attributes),
- );
- // If this button has group information, add it to the attributes.
- if (!empty($button['group'])) {
- $button_item['group'] = $button['group'];
+ // Check for the image button to be present and convert file URI to URL.
+ if (!empty($button['image_button']) || !empty($button['image_button_rtl'])) {
+ // The language direction is RTL, check for image_rtl otherwise use the
+ // default image button path.
+ if ($language_direction === LanguageInterface::DIRECTION_RTL && !empty($button['image_button_rtl'])) {
+ $button['image_url'] = file_create_url($button['image_button_rtl']);
+ }
+ elseif(!empty($button['image_button'])) {
+ $button['image_url'] = file_create_url($button['image_button']);
+ }
+ }
+ // Check for the HTML markup for a button and convert it to safe markup.
+ if (!empty($button['html_button']) || !empty($button['html_button_rtl'])) {
+ // The language direction is RTL, check for html_button_rtl otherwise use the
+ // default html_button.
+ if ($language_direction === LanguageInterface::DIRECTION_RTL && !empty($button['html_button_rtl'])) {
+ $button['html_button_safemarkup'] = SafeMarkup::checkAdminXss($button['html_button_rtl']);
+ }
+ elseif (!empty($button['html_button'])) {
+ $button['html_button_safemarkup'] = SafeMarkup::checkAdminXss($button['html_button']);
+ }
}
// Set additional flag on the button if it can occur multiple times.
if (!empty($button['multiple'])) {
- $button_item['multiple'] = true;
+ $button['multiple'] = true;
}
- return $button_item;
+ return $button;
};
// Assemble list of disabled buttons (which are always a single row).
@@ -122,18 +119,18 @@ function template_preprocess_ckeditor_settings_toolbar(&$variables) {
return $button['group'] === $group_name;
});
foreach ($buttons as $button) {
- $variables['active_buttons'][$row_number][$group_name]['buttons'][] = $build_button_item($button, $rtl);
+ $variables['active_buttons'][$row_number][$group_name]['buttons'][] = $build_button($button, $language_direction);
}
}
}
// Assemble list of disabled buttons (which are always a single row).
$variables['disabled_buttons'] = array();
foreach ($disabled_buttons as $button) {
- $variables['disabled_buttons'][] = $build_button_item($button, $rtl);
+ $variables['disabled_buttons'][] = $build_button($button, $language_direction);
}
// Assemble list of multiple buttons that may be added multiple times.
$variables['multiple_buttons'] = array();
foreach ($multiple_buttons as $button) {
- $variables['multiple_buttons'][] = $build_button_item($button, $rtl);
+ $variables['multiple_buttons'][] = $build_button($button, $language_direction);
}
}
diff --git a/core/modules/ckeditor/src/CKEditorPluginButtonsInterface.php b/core/modules/ckeditor/src/CKEditorPluginButtonsInterface.php
index 494e345..d1172d2 100644
--- a/core/modules/ckeditor/src/CKEditorPluginButtonsInterface.php
+++ b/core/modules/ckeditor/src/CKEditorPluginButtonsInterface.php
@@ -42,12 +42,27 @@
* Each button should by keyed by its CKEditor button name, and should
* contain an array of button properties, including:
* - label: A human-readable, translated button name.
- * - image: An image for the button to be used in the toolbar.
- * - image_rtl: If the image needs to have a right-to-left version, specify
- * an alternative file that will be used in RTL editors.
- * - image_alternative: If this button does not render as an image, specify
- * an HTML string representing the contents of this button.
- * - image_alternative_rtl: Similar to image_alternative, but a
+ * - text_button: A button that only supplies the name of the button in the
+ * plugin declaration which to be used in the toolbar. If used with
+ * "text_button_alt_label" key then the value in the "text_button_alt_label" is
+ * displayed instead of "label" in the front end CKEditor toolbar.
+ * - text_button_rtl: A flag that sets as TRUE or FALSE to tell the system
+ * about the language direction. If TRUE then system loades the RTL
+ * version of the button too.
+ * - text_button_alt_label: An alternative button label. This can be used if a
+ * plugin wants to show a different button label instead of the actual
+ * "label".
+ * - is_dropdown: Flag to specify if the button is a type of a drop-down
+ * button. If set to TRUE then "ckeditor-button-dropdown" class is added to
+ * the button's HTML.
+ * - image_button: An image for the button to be used in the toolbar.
+ * - image_button_rtl: If the image needs to have a right-to-left version, specify
+ * an alternative file that will be used in RTL editors else the default
+ * "image_button" is loaded.
+ * - html_button: If the button doesn't render as an text button or an image
+ * button then this can be used. Basically designed for those plugins which
+ * supply raw HTML for their buttons to be displayed in the editor toolbar.
+ * - html_button_rtl: Similar to html_button, but a
* right-to-left version.
* - attributes: An array of HTML attributes which should be added to this
* button when rendering the button in the administrative section for
diff --git a/core/modules/ckeditor/src/Plugin/CKEditorPlugin/DrupalImage.php b/core/modules/ckeditor/src/Plugin/CKEditorPlugin/DrupalImage.php
index b0c88bf..3c265e2 100644
--- a/core/modules/ckeditor/src/Plugin/CKEditorPlugin/DrupalImage.php
+++ b/core/modules/ckeditor/src/Plugin/CKEditorPlugin/DrupalImage.php
@@ -56,7 +56,7 @@ public function getButtons() {
return array(
'DrupalImage' => array(
'label' => t('Image'),
- 'image' => drupal_get_path('module', 'ckeditor') . '/js/plugins/drupalimage/image.png',
+ 'image_button' => drupal_get_path('module', 'ckeditor') . '/js/plugins/drupalimage/image.png',
),
);
}
diff --git a/core/modules/ckeditor/src/Plugin/CKEditorPlugin/DrupalLink.php b/core/modules/ckeditor/src/Plugin/CKEditorPlugin/DrupalLink.php
index 8ce0c7a..14e91c7 100644
--- a/core/modules/ckeditor/src/Plugin/CKEditorPlugin/DrupalLink.php
+++ b/core/modules/ckeditor/src/Plugin/CKEditorPlugin/DrupalLink.php
@@ -55,11 +55,11 @@ public function getButtons() {
return array(
'DrupalLink' => array(
'label' => t('Link'),
- 'image' => $path . '/link.png',
+ 'image_button' => $path . '/link.png',
),
'DrupalUnlink' => array(
'label' => t('Unlink'),
- 'image' => $path . '/unlink.png',
+ 'image_button' => $path . '/unlink.png',
),
);
}
diff --git a/core/modules/ckeditor/src/Plugin/CKEditorPlugin/Internal.php b/core/modules/ckeditor/src/Plugin/CKEditorPlugin/Internal.php
index c405c7f..0a8f420 100644
--- a/core/modules/ckeditor/src/Plugin/CKEditorPlugin/Internal.php
+++ b/core/modules/ckeditor/src/Plugin/CKEditorPlugin/Internal.php
@@ -126,163 +126,161 @@ public function getConfig(Editor $editor) {
* Implements \Drupal\ckeditor\Plugin\CKEditorPluginButtonsInterface::getButtons().
*/
public function getButtons() {
- $button = function($name, $direction = 'ltr') {
- return '' . $name . '';
- };
-
return array(
// "basicstyles" plugin.
'Bold' => array(
'label' => t('Bold'),
- 'image_alternative' => $button('bold'),
+ 'text_button' => 'bold',
),
'Italic' => array(
'label' => t('Italic'),
- 'image_alternative' => $button('italic'),
+ 'text_button' => 'italic',
),
'Underline' => array(
'label' => t('Underline'),
- 'image_alternative' => $button('underline'),
+ 'text_button' => 'underline',
),
'Strike' => array(
'label' => t('Strike-through'),
- 'image_alternative' => $button('strike'),
+ 'text_button' => 'strike',
),
'Superscript' => array(
'label' => t('Superscript'),
- 'image_alternative' => $button('super script'),
+ 'text_button' => 'super script',
),
'Subscript' => array(
'label' => t('Subscript'),
- 'image_alternative' => $button('sub script'),
+ 'text_button' => 'sub script',
),
// "removeformat" plugin.
'RemoveFormat' => array(
'label' => t('Remove format'),
- 'image_alternative' => $button('remove format'),
+ 'text_button' => 'remove format',
),
// "justify" plugin.
'JustifyLeft' => array(
'label' => t('Align left'),
- 'image_alternative' => $button('justify left'),
+ 'text_button' => 'justify left',
),
'JustifyCenter' => array(
'label' => t('Align center'),
- 'image_alternative' => $button('justify center'),
+ 'text_button' => 'justify center',
),
'JustifyRight' => array(
'label' => t('Align right'),
- 'image_alternative' => $button('justify right'),
+ 'text_button' => 'justify right',
),
'JustifyBlock' => array(
'label' => t('Justify'),
- 'image_alternative' => $button('justify block'),
+ 'text_button' => 'justify block',
),
// "list" plugin.
'BulletedList' => array(
'label' => t('Bullet list'),
- 'image_alternative' => $button('bulleted list'),
- 'image_alternative_rtl' => $button('bulleted list', 'rtl'),
+ 'text_button' => 'bulleted list',
+ 'text_button_rtl' => TRUE,
),
'NumberedList' => array(
'label' => t('Numbered list'),
- 'image_alternative' => $button('numbered list'),
- 'image_alternative_rtl' => $button('numbered list', 'rtl'),
+ 'text_button' => 'numbered list',
+ 'text_button_rtl' => TRUE,
),
// "indent" plugin.
'Outdent' => array(
'label' => t('Outdent'),
- 'image_alternative' => $button('outdent'),
- 'image_alternative_rtl' => $button('outdent', 'rtl'),
+ 'text_button' => 'outdent',
+ 'text_button_rtl' => TRUE,
),
'Indent' => array(
'label' => t('Indent'),
- 'image_alternative' => $button('indent'),
- 'image_alternative_rtl' => $button('indent', 'rtl'),
+ 'text_button' => 'indent',
+ 'text_button_rtl' => TRUE,
),
// "undo" plugin.
'Undo' => array(
'label' => t('Undo'),
- 'image_alternative' => $button('undo'),
- 'image_alternative_rtl' => $button('undo', 'rtl'),
+ 'text_button' => 'undo',
+ 'text_button_rtl' => TRUE,
),
'Redo' => array(
'label' => t('Redo'),
- 'image_alternative' => $button('redo'),
- 'image_alternative_rtl' => $button('redo', 'rtl'),
+ 'text_button' => 'redo',
+ 'text_button_rtl' => TRUE,
),
// "blockquote" plugin.
'Blockquote' => array(
'label' => t('Blockquote'),
- 'image_alternative' => $button('blockquote'),
+ 'text_button' => 'blockquote',
),
// "horizontalrule" plugin
'HorizontalRule' => array(
'label' => t('Horizontal rule'),
- 'image_alternative' => $button('horizontal rule'),
+ 'text_button' => 'horizontal rule',
),
// "clipboard" plugin.
'Cut' => array(
'label' => t('Cut'),
- 'image_alternative' => $button('cut'),
- 'image_alternative_rtl' => $button('cut', 'rtl'),
+ 'text_button' => 'cut',
+ 'text_button_rtl' => TRUE,
),
'Copy' => array(
'label' => t('Copy'),
- 'image_alternative' => $button('copy'),
- 'image_alternative_rtl' => $button('copy', 'rtl'),
+ 'text_button' => 'copy',
+ 'text_button_rtl' => TRUE,
),
'Paste' => array(
'label' => t('Paste'),
- 'image_alternative' => $button('paste'),
- 'image_alternative_rtl' => $button('paste', 'rtl'),
+ 'text_button' => 'paste',
+ 'text_button_rtl' => TRUE,
),
// "pastetext" plugin.
'PasteText' => array(
'label' => t('Paste Text'),
- 'image_alternative' => $button('paste text'),
- 'image_alternative_rtl' => $button('paste text', 'rtl'),
+ 'text_button' => 'paste text',
+ 'text_button_rtl' => TRUE,
),
// "pastefromword" plugin.
'PasteFromWord' => array(
'label' => t('Paste from Word'),
- 'image_alternative' => $button('paste from word'),
- 'image_alternative_rtl' => $button('paste from word', 'rtl'),
+ 'text_button' => 'paste from word',
+ 'text_button_rtl' => TRUE,
),
// "specialchar" plugin.
'SpecialChar' => array(
'label' => t('Character map'),
- 'image_alternative' => $button('special char'),
+ 'text_button' => 'special char',
),
'Format' => array(
'label' => t('HTML block format'),
- 'image_alternative' => '' . t('Format') . '',
+ 'text_button' => 'format',
+ 'text_button_alt_label' => t('Format'),
+ 'is_dropdown' => TRUE,
),
// "table" plugin.
'Table' => array(
'label' => t('Table'),
- 'image_alternative' => $button('table'),
+ 'text_button' => 'table',
),
// "showblocks" plugin.
'ShowBlocks' => array(
'label' => t('Show blocks'),
- 'image_alternative' => $button('show blocks'),
- 'image_alternative_rtl' => $button('show blocks', 'rtl'),
+ 'text_button' => 'show blocks',
+ 'text_button_rtl' => TRUE,
),
// "sourcearea" plugin.
'Source' => array(
'label' => t('Source code'),
- 'image_alternative' => $button('source'),
+ 'text_button' => 'source',
),
// "maximize" plugin.
'Maximize' => array(
'label' => t('Maximize'),
- 'image_alternative' => $button('maximize'),
+ 'text_button' => 'maximize',
),
// No plugin, separator "button" for toolbar builder UI use only.
'-' => array(
'label' => t('Separator'),
- 'image_alternative' => '',
+ 'html_button' => '',
'attributes' => array(
'class' => array('ckeditor-button-separator'),
'data-drupal-ckeditor-type' => 'separator',
diff --git a/core/modules/ckeditor/src/Plugin/CKEditorPlugin/StylesCombo.php b/core/modules/ckeditor/src/Plugin/CKEditorPlugin/StylesCombo.php
index d569930..b70c184 100644
--- a/core/modules/ckeditor/src/Plugin/CKEditorPlugin/StylesCombo.php
+++ b/core/modules/ckeditor/src/Plugin/CKEditorPlugin/StylesCombo.php
@@ -59,7 +59,7 @@ public function getButtons() {
return array(
'Styles' => array(
'label' => t('Font style'),
- 'image_alternative' => '' . t('Styles') . '',
+ 'html_button' => '' . t('Styles') . '',
),
);
}
diff --git a/core/modules/ckeditor/src/Tests/CKEditorLanguageDirectionTest.php b/core/modules/ckeditor/src/Tests/CKEditorLanguageDirectionTest.php
new file mode 100644
index 0000000..53126e6
--- /dev/null
+++ b/core/modules/ckeditor/src/Tests/CKEditorLanguageDirectionTest.php
@@ -0,0 +1,77 @@
+ 'full_html',
+ 'name' => 'Full HTML',
+ 'weight' => 1,
+ 'filters' => array(),
+ ))->save();
+ Editor::create(array(
+ 'format' => 'full_html',
+ 'editor' => 'ckeditor',
+ ))->save();
+
+ // Create a new user with admin rights.
+ $this->admin_user = $this->drupalCreateUser(array(
+ 'administer languages',
+ 'access administration pages',
+ 'administer site configuration',
+ 'administer filters',
+ ));
+ }
+
+ /**
+ * Tests that CKEditor RTL classes are being added.
+ */
+ public function testLanguageDirectionChange() {
+ $this->drupalLogin($this->admin_user);
+
+ // Install the Arabic language (which is RTL) and configure as the default.
+ $edit = array();
+ $edit['predefined_langcode'] = 'ar';
+ $this->drupalPostForm('admin/config/regional/language/add', $edit, t('Add language'));
+
+ $edit = array('site_default_language' => 'ar');
+ $this->drupalPostForm('admin/config/regional/settings', $edit, t('Save configuration'));
+
+ // Once the default language is changed, go to the tested text format
+ // configuration page.
+ $this->drupalGet('admin/config/content/formats/manage/full_html');
+ $this->assertPattern('|cke_rtl|', 'Correct language direction classes are being added.');
+ }
+
+}
diff --git a/core/modules/ckeditor/templates/ckeditor-settings-toolbar.html.twig b/core/modules/ckeditor/templates/ckeditor-settings-toolbar.html.twig
index 4f5f43b..8d33e52 100644
--- a/core/modules/ckeditor/templates/ckeditor-settings-toolbar.html.twig
+++ b/core/modules/ckeditor/templates/ckeditor-settings-toolbar.html.twig
@@ -3,7 +3,23 @@
* @file
* Default theme implementation for the CKEditor settings toolbar.
*
+ * This template uses Twig macro to create the CKEditor buttons.
+ * @see http://twig.sensiolabs.org/doc/tags/macro.html
+ *
* Available variables:
+ * - button: A list containing the CKEditor buttons.
+ * - text_button: Indentifier of a text only button.
+ * - is_dropdown: Flag for showing a dropdown type button (Optional). If the
+ * value is true then a dropdown button is generated.
+ * - is_separator: Flag for showing a separator "button" (Optional). If the
+ * value is true then a separator button is generated for the toolbar UI.
+ * - label: A human-readable, translated button name.
+ * - text_button_alt_label: Same as label but this can be used as a custom button name.
+ * - language_direction: The direction, left-to-right, or right-to-left.
+ * - image_url: Image URL for the button. If the button is an image, then
+ * this has to be used.
+ * - html_button_safemarkup: Generated from the html_button or html_button_rtl as
+ * a safe markup HTML.
* - multiple_buttons: A list of buttons that may be added multiple times.
* - disabled_buttons: A list of disabled buttons.
* - active_buttons: A list of active button rows.
@@ -13,6 +29,43 @@
* @ingroup themeable
*/
#}
+{% macro button(button) %}
+ {# Buttons with text as labels #}
+ {% if button.text_button %}
+ {# Set the button's title provided by the plugin #}
+ {% set button_text = not button.text_button_alt_label ? button.label : button.text_button_alt_label %}
+ {# Dropdown Buttons. #}
+ {% if button.is_dropdown %}
+
+ {{ button_text }}
+
+ {# Separator Buttons. #}
+ {% elseif button.is_separator %}
+
+ {# Normal Buttons. #}
+ {% else %}
+
+ {{ button_text }}
+
+ {% endif %}
+ {# Buttons with image as labels. #}
+ {% elseif button.image_url %}
+
+
+ 
+
+
+ {% elseif button.html_button_safemarkup %}
+ {{ button.html_button_safemarkup }}
+ {% endif %}
+
+{% endmacro %}
+
+{#
+ Reference the defined macro to be used in the same template.
+ @see http://twig.sensiolabs.org/doc/templates.html#global-variables
+#}
+{% import _self as ckeditor %}
{% spaceless %}