Drupal 8 CKeditor behaves LTR in an RTL site

Question

I've installed Drupal 8.0.2 in a standard installation process and in English.

I later changed The site's default language to Hebrew (Which is an RTL language) and my content type is now setted to the site's default language - Hebrew. I even determined my user's administration account, called "admin", to Hebrew (a new Drupal 8 feature that let's you pick a specific front-end language to a certain user).

After that I've organized the CKeditor full-profile edit-bar in an RTL manner at it's configuration page (and flushed all caches afterwards):

---

You saw - I did everything by the book, and yet:

I encounter two issues that comprise my whole problem:

1. The CKeditor edit-bar appears the opposite from how I arranged it (as can be seen one image up).

2. CKeditor input area typing cursor starts in the left instead of the right (I could easily manually flip the Edit-bar but the cursor will still appear in the left).

When I installed a test site in Hebrew from the start (instead of installing first in English and then add Hebrew and make it default), I didn't encounter that problem, and the edit-bar was RTL. I have no clue how to explain this! Maybe you can!

Answer 1

The default CKEditor text language direction is LTR. To change it to RTL, you can try setting the JS config setting:

config.contentsLangDirection = 'rtl';

Reference: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.contentsLangDirection

In D7, there was a config textarea that can be set:

In D8, you can set the CKEditor config settings in:

hook_editor_js_settings_alter

Something like:

/**
 * Implements hook_editor_js_settings_alter
 */
function MYMODULE_editor_js_settings_alter(array &$settings) {
  foreach ($settings['editor']['formats'] as $name => $value) {
    $settings['editor']['formats'][$name]['editorSettings']['contentsLangDirection'] = 'rtl';
  }
}

More info on creating Drupal 8 modules here: https://www.drupal.org/developing/modules/8

You can also set the config in JS, for example your theme

Something like:

(function ($, Drupal) {
  Drupal.behaviors.customCKEditorConfig = {
    attach: function (context, settings) {
      if (typeof CKEDITOR !== "undefined") {
        CKEDITOR.config.contentsLangDirection = 'rtl';
      }
    }
  }
})(jQuery, Drupal);

More info on adding theme assets here: https://www.drupal.org/theme-guide/8/assets

For your other question on the toolbar button ordering. That appears to work, just make sure you set the toolbar button order on all the "Text formats" that you want to use it with (e.g "Basic HTML", "Restricted HTML" and "Full HTML") in the CKEditor admin settings.

Answer 2

Also CKEditor BiDi Buttons module provides the bi directional text flow buttons, RTL and LTR.

Integrates the CKEditor BiDi plugin with CKEditor for Drupal 8. This plugin provides the bi directional text flow buttons, RTL and LTR .

The CKEditor BiDi plugin makes it possible to change the text direction for an HTML block-level elements like paragraphs and lists. This ability is essential for authoring content in languages that are written Right to Left like those with Arabic and , Hebrew writing systems.