text direction in CK Editor

Question

How can I set text direction [rtl] on load editor?

Answer 1

According to the docs, this should do it:

CKEDITOR.config.contentsLangDirection in the CKSource manual

Example taken from there:

config.contentsLangDirection = 'rtl';

Answer 2

Another way to do it is directly from your view file, the benefit of using replace() method is that you can use different direction and style for each of your view.

CKEDITOR.replace( 'article_area', {
    contentsLangDirection: 'rtl'
} );

By using replace() you can also do other filtering stuff like allowing/disallowing tags and removing buttons from the editor. for a detailed description visit:

http://ckeditor.com/ckeditor_4.1rc/samples/datafiltering.html

Answer 3

If you use CKEditor version 5, the config block is like:

language: {
  ui: 'en',
  content: 'ar'
}

Where in this example, the editor itself will remain in english (both headings and orientation) and the content will be edited in arabic (therefore right to left).

I chose this example to illustrate that it's possible to use different languages for these two purposes (say if you build a CMS with the text editor and admins want to add arabic or hebrew translations for different site content but interact with the editor itself in english). But you could also set ui: 'ar' in order to mirror the editor itself as well (note that to do this I think you have to bundle in the languages in one of several ways, see the links below for reference).

The support for bidirectional text seems to be good (aka type something in Arabic and then type in english and it automatically switches to left-to-right only while you type in english).

References: https://ckeditor.com/blog/CKEditor-5-v12.4.0-with-image-resizing-to-do-lists-RTL-language-support-and-more/ and the linked https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html#righttoleft-rtl-languages-support