Contribute to this guideReport an issue

Creating Multilingual Content

CKEditor is well-suited for multilingual environment. Its UI is translated into over 60 languages and by default it is displayed in user's language. Additionally, it makes working with multilingual content very convenient by providing the ability to set the text direction as well as mark the language of selected text fragments.

Setting Text Direction

The optional BiDi (Text Direction) plugin (which by default is only available in the Full distribution package) makes it possible to assign the text direction to any block-level content (like a paragraph, header, table or list) by using the dedicated   and   buttons. Some editor features such as indenting will adapt to the text direction setting.

The default text direction in the editor is the same as the editor UI direction (in classic editor) or the editable element direction (in inline editor), but you can also explicitely set it to left-to-right or right-to-left with the config.contentsLangDirection option. The editor instance below, for example, has the default content direction set to RTL to accomodate its Hebrew and Arabic content.

Setting Text Part Language

The optional Language plugin, introduced in CKEditor 4.3, implements the WCAG 3.1.2 Language of Parts specification.

When it is enabled, the   button is automatically added to the toolbar. Once clicked, it opens the dedicated drop-down list that lets you assign one of the pre-configured languages to a text selection.

Related Features

Get Sample Source Code

  • Setting text direction
                    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="robots" content="noindex, nofollow">
      <title>Setting text direction</title>
      <script src="https://cdn.ckeditor.com/4.11.1/standard-all/ckeditor.js"></script>
    </head>
    
    <body>
      <textarea cols="80" id="editor1" name="editor1" rows="10">
    &lt;h3&gt;&lt;strong&gt;&#x5E9;&#x5E4;&#x5D4;&lt;/strong&gt;&lt;/h3&gt;
    
    &lt;p&gt;&#x5E9;&#x5E4;&#x5D4; &#x5D4;&#x5D9;&#x5D0; &#x5D3;&#x5E8;&#x5DA; &#x5EA;&#x5E7;&#x5E9;&#x5D5;&#x5E8;&#x5EA; &#x5D4;&#x5DE;&#x5D1;&#x5D5;&#x5E1;&#x5E1;&#x5EA; &#x5E2;&#x5DC; &#x5DE;&#x5E2;&#x5E8;&#x5DB;&#x5EA; &#x5E1;&#x5DE;&#x5DC;&#x5D9;&#x5DD; &#x5DE;&#x5D5;&#x5E8;&#x5DB;&#x5D1;&#x5EA; &#x5D1;&#x5E2;&#x5DC;&#x5EA; &#x5D7;&#x5D5;&#x5E7;&#x5D9;&#x5D5;&#x5EA;, &#x5D4;&#x5DE;&#x5D0;&#x5E4;&#x5E9;&#x5E8;&#x5EA; &#x5DC;&#x5E7;&#x5D5;&#x5D3;&#x5D3; &#x5D5;&#x5DC;&#x5D0;&#x5E8;&#x5D2;&#x5DF; &#x5DE;&#x5D9;&#x5D3;&#x5E2; &#x5D1;&#x5E2;&#x5DC; &#x5DE;&#x5E9;&#x5DE;&#x5E2;&#x5D5;&#x5D9;&#x5D5;&#x5EA; &#x5E8;&#x5D1;&#x5D5;&#x5EA; &#x5D5;&#x5DE;&#x5D2;&#x5D5;&#x5D5;&#x5E0;&#x5D5;&#x5EA;. &#x5E0;&#x5D4;&#x5D5;&#x5D2; &#x5DC;&#x5D4;&#x5D1;&#x5D3;&#x5D9;&#x5DC; &#x5D1;&#x5D9;&#x5DF; &#x5D4;&#x5E1;&#x5DE;&#x5DC; &#x5D4;&#x5E9;&#x5E4;&#x5EA;&#x5D9; &#x5D4;&#x5DE;&#x5E1;&#x5DE;&#x5DF; &#x5DC;&#x5D1;&#x5D9;&#x5DF; &#x5D4;&#x5DE;&#x5D5;&#x5E9;&#x5D2; &#x5D0;&#x5D5; &#x5D4;&#x5EA;&#x5D5;&#x5DB;&#x5DF; &#x5D4;&#x5DE;&#x5E1;&#x5D5;&#x5DE;&#x5DF; &#x5D1;&#x5D5;, &#x5D0;&#x5E9;&#x5E8; &#x5D9;&#x5DB;&#x5D5;&#x5DC; &#x5DC;&#x5D4;&#x5D9;&#x5D5;&#x5EA; &#x5DE;&#x5E6;&#x5D9;&#x5D0;&#x5D5;&#x5EA;&#x5D9; &#x5D0;&#x5D5; &#x5DE;&#x5D5;&#x5E4;&#x5E9;&#x5D8;.&lt;/p&gt;
    
    &lt;p&gt;&#x5D4;&#x5D1;&#x5DC;&#x5E9;&#x5E0;&#x5D5;&#x5EA; &#x5E2;&#x5D5;&#x5E1;&#x5E7;&#x5EA; &#x5D1;&#x5D7;&#x5E7;&#x5E8; &#x5D4;&#x5E9;&#x5E4;&#x5D4; &#x5D5;&#x5D4;&#x5E9;&#x5D9;&#x5DE;&#x5D5;&#x5E9; &#x5D1;&#x5D4;. &#x5E1;&#x5DE;&#x5E0;&#x5D8;&#x5D9;&#x5E7;&#x5D4;&amp;lrm; &#x5D4;&#x5D9;&#x5D0; &#x5E2;&#x5E0;&#x5E3; &#x5D4;&#x5DC;&#x5E9;&#x5D5;&#x5DF; &#x5D4;&#x5DE;&#x5EA;&#x5DE;&#x5E7;&#x5D3; &#x5D1;&#x5D7;&#x5E7;&#x5E8; &#x5D4;&#x5DE;&#x5E9;&#x5DE;&#x5E2;&#x5D5;&#x5EA; &#x5E9;&#x5DC; &#x5D4;&#x5E9;&#x5E4;&#x5D4;&amp;rlm;. &#x5DE;&#x5DB;&#x5DC;&#x5D5;&#x5DC; &#x5D0;&#x5D5;&#x5E6;&#x5E8; &#x5D4;&#x5DE;&#x5D9;&#x5DC;&#x5D9;&#x5DD; &#x5E9;&#x5DC; &#x5E9;&#x5E4;&#x5D4; &#x5DE;&#x5E1;&#x5D5;&#x5D9;&#x5DE;&#x5EA; &#x5DE;&#x5DB;&#x5D5;&#x5E0;&#x5D4; &#x5DC;&#x5E7;&#x5E1;&#x5D9;&#x5E7;&#x5D5;&#x5DF;. &#x5DB;&#x5DC;&#x5D9; &#x5DC;&#x5D0;&#x5D9;&#x5E1;&#x5D5;&#x5E3; &#x5D5;&#x5D1;&#x5D9;&#x5D0;&#x5D5;&#x5E8; &#x5E9;&#x5DC; &#x5E4;&#x5E8;&#x5D8;&#x5D9;&#x5DD; &#x5D1;&#x5DC;&#x5E7;&#x5E1;&#x5D9;&#x5E7;&#x5D5;&#x5DF; &#x5DE;&#x5DB;&#x5D5;&#x5E0;&#x5D4; &#x5DE;&#x5D9;&#x5DC;&#x5D5;&#x5DF;.&lt;/p&gt;
    
    &lt;hr /&gt;
    &lt;h3&gt;&lt;strong&gt;&#x644;&#x63A;&#x629;&lt;/strong&gt;&lt;/h3&gt;
    
    &lt;p&gt;&#x627;&#x644;&#x644;&#x63A;&#x629; &#x646;&#x633;&#x642; &#x645;&#x646; &#x627;&#x644;&#x625;&#x634;&#x627;&#x631;&#x627;&#x62A; &#x648;&#x627;&#x644;&#x631;&#x645;&#x648;&#x632;&#x60C; &#x64A;&#x634;&#x643;&#x644; &#x623;&#x62F;&#x627;&#x629; &#x645;&#x646; &#x623;&#x62F;&#x648;&#x627;&#x62A; &#x627;&#x644;&#x645;&#x639;&#x631;&#x641;&#x629;&#x60C; &#x648;&#x62A;&#x639;&#x62A;&#x628;&#x631; &#x627;&#x644;&#x644;&#x63A;&#x629; &#x623;&#x647;&#x645; &#x648;&#x633;&#x627;&#x626;&#x644; &#x627;&#x644;&#x62A;&#x641;&#x627;&#x647;&#x645; &#x648;&#x627;&#x644;&#x627;&#x62D;&#x62A;&#x643;&#x627;&#x643; &#x628;&#x64A;&#x646; &#x623;&#x641;&#x631;&#x627;&#x62F; &#x627;&#x644;&#x645;&#x62C;&#x62A;&#x645;&#x639; &#x641;&#x64A; &#x62C;&#x645;&#x64A;&#x639; &#x645;&#x64A;&#x627;&#x62F;&#x64A;&#x646; &#x627;&#x644;&#x62D;&#x64A;&#x627;&#x629;. &#x648;&#x628;&#x62F;&#x648;&#x646; &#x627;&#x644;&#x644;&#x63A;&#x629; &#x64A;&#x62A;&#x639;&#x630;&#x631; &#x646;&#x634;&#x627;&#x637; &#x627;&#x644;&#x646;&#x627;&#x633; &#x627;&#x644;&#x645;&#x639;&#x631;&#x641;&#x64A;. &#x648;&#x62A;&#x631;&#x62A;&#x628;&#x637; &#x627;&#x644;&#x644;&#x63A;&#x629; &#x628;&#x627;&#x644;&#x62A;&#x641;&#x643;&#x64A;&#x631; &#x627;&#x631;&#x62A;&#x628;&#x627;&#x637;&#x64B;&#x627; &#x648;&#x62B;&#x64A;&#x642;&#x64B;&#x627;&#x61B; &#x641;&#x623;&#x641;&#x643;&#x627;&#x631; &#x627;&#x644;&#x625;&#x646;&#x633;&#x627;&#x646; &#x62A;&#x635;&#x627;&#x63A; &#x62F;&#x648;&#x645;&#x64B;&#x627; &#x641;&#x64A; &#x642;&#x627;&#x644;&#x628; &#x644;&#x63A;&#x648;&#x64A;&#x60C; &#x62D;&#x62A;&#x649; &#x641;&#x64A; &#x62D;&#x627;&#x644; &#x62A;&#x641;&#x643;&#x64A;&#x631;&#x647; &#x627;&#x644;&#x628;&#x627;&#x637;&#x646;&#x64A;. &#x648;&#x645;&#x646; &#x62E;&#x644;&#x627;&#x644; &#x627;&#x644;&#x644;&#x63A;&#x629; &#x641;&#x642;&#x637; &#x62A;&#x62D;&#x635;&#x644; &#x627;&#x644;&#x641;&#x643;&#x631;&#x629; &#x639;&#x644;&#x649; &#x648;&#x62C;&#x648;&#x62F;&#x647;&#x627; &#x627;&#x644;&#x648;&#x627;&#x642;&#x639;&#x64A;. &#x643;&#x645;&#x627; &#x62A;&#x631;&#x645;&#x632; &#x627;&#x644;&#x644;&#x63A;&#x629; &#x625;&#x644;&#x649; &#x627;&#x644;&#x623;&#x634;&#x64A;&#x627;&#x621; &#x627;&#x644;&#x645;&#x646;&#x639;&#x643;&#x633;&#x629; &#x641;&#x64A;&#x647;&#x627;.&lt;/p&gt;
    
    </textarea>
      <script>
        CKEDITOR.replace('editor1', {
          extraPlugins: 'bidi',
          // Setting default language direction to right-to-left.
          contentsLangDirection: 'rtl',
          height: 270
        });
      </script>
    </body>
    
    </html>
  • Setting text part language
                    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="robots" content="noindex, nofollow">
      <title>Setting text part language</title>
      <script src="https://cdn.ckeditor.com/4.11.1/standard-all/ckeditor.js"></script>
    </head>
    
    <body>
      <textarea cols="80" id="editor2" name="editor2" rows="10">
    &lt;p&gt;&lt;strong&gt;Language&lt;/strong&gt;&amp;nbsp;is the&amp;nbsp;&lt;a href=&quot;http://en.wikipedia.org/wiki/Human&quot;&gt;human&lt;/a&gt;&amp;nbsp;ability to acquire and use complex systems of&amp;nbsp;&lt;a href=&quot;http://en.wikipedia.org/wiki/Communication&quot;&gt;communication&lt;/a&gt;, and&amp;nbsp;&lt;strong&gt;a language&lt;/strong&gt;&amp;nbsp;is any specific example of such a system. The scientific study of language is called&amp;nbsp;&lt;a href=&quot;http://en.wikipedia.org/wiki/Linguistics&quot;&gt;linguistics&lt;/a&gt;.&lt;/p&gt;
    
    &lt;p&gt;&lt;span dir=&quot;rtl&quot; lang=&quot;he&quot;&gt;&lt;strong&gt;&#x5E9;&#x5E4;&#x5D4;&lt;/strong&gt;&amp;nbsp;&#x5D4;&#x5D9;&#x5D0; &#x5D3;&#x5E8;&#x5DA;&amp;nbsp;&lt;a href=&quot;http://he.wikipedia.org/wiki/%D7%AA%D7%A7%D7%A9%D7%95%D7%A8%D7%AA&quot;&gt;&#x5EA;&#x5E7;&#x5E9;&#x5D5;&#x5E8;&#x5EA;&lt;/a&gt;&amp;nbsp;&#x5D4;&#x5DE;&#x5D1;&#x5D5;&#x5E1;&#x5E1;&#x5EA; &#x5E2;&#x5DC;&amp;nbsp;&lt;a href=&quot;http://he.wikipedia.org/wiki/%D7%9E%D7%A2%D7%A8%D7%9B%D7%AA&quot;&gt;&#x5DE;&#x5E2;&#x5E8;&#x5DB;&#x5EA;&lt;/a&gt;&amp;nbsp;&lt;a href=&quot;http://he.wikipedia.org/wiki/%D7%A1%D7%9E%D7%9C&quot;&gt;&#x5E1;&#x5DE;&#x5DC;&#x5D9;&#x5DD;&lt;/a&gt;&amp;nbsp;&#x5DE;&#x5D5;&#x5E8;&#x5DB;&#x5D1;&#x5EA; &#x5D1;&#x5E2;&#x5DC;&#x5EA; &#x5D7;&#x5D5;&#x5E7;&#x5D9;&#x5D5;&#x5EA;, &#x5D4;&#x5DE;&#x5D0;&#x5E4;&#x5E9;&#x5E8;&#x5EA; &#x5DC;&#x5E7;&#x5D5;&#x5D3;&#x5D3;&amp;nbsp;&lt;a href=&quot;http://he.wikipedia.org/wiki/%D7%90%D7%A8%D7%92%D7%95%D7%9F_(%D7%A4%D7%A2%D7%95%D7%9C%D7%94)&quot;&gt;&#x5D5;&#x5DC;&#x5D0;&#x5E8;&#x5D2;&#x5DF;&lt;/a&gt;&amp;nbsp;&lt;a href=&quot;http://he.wikipedia.org/wiki/%D7%9E%D7%99%D7%93%D7%A2&quot;&gt;&#x5DE;&#x5D9;&#x5D3;&#x5E2;&lt;/a&gt;&amp;nbsp;&#x5D1;&#x5E2;&#x5DC;&amp;nbsp;&lt;a href=&quot;http://he.wikipedia.org/wiki/%D7%9E%D7%A9%D7%9E%D7%A2%D7%95%D7%AA&quot;&gt;&#x5DE;&#x5E9;&#x5DE;&#x5E2;&#x5D5;&#x5D9;&#x5D5;&#x5EA;&lt;/a&gt;&amp;nbsp;&#x5E8;&#x5D1;&#x5D5;&#x5EA; &#x5D5;&#x5DE;&#x5D2;&#x5D5;&#x5D5;&#x5E0;&#x5D5;&#x5EA;. &#x5E0;&#x5D4;&#x5D5;&#x5D2; &#x5DC;&#x5D4;&#x5D1;&#x5D3;&#x5D9;&#x5DC; &#x5D1;&#x5D9;&#x5DF; &#x5D4;&#x5E1;&#x5DE;&#x5DC; &#x5D4;&#x5E9;&#x5E4;&#x5EA;&#x5D9; &#x5D4;&lt;a href=&quot;http://he.wikipedia.org/wiki/%D7%9E%D7%A1%D7%9E%D7%9F&quot;&gt;&#x5DE;&#x5E1;&#x5DE;&#x5DF;&lt;/a&gt;&amp;nbsp;&#x5DC;&#x5D1;&#x5D9;&#x5DF; &#x5D4;&#x5DE;&#x5D5;&#x5E9;&#x5D2; &#x5D0;&#x5D5; &#x5D4;&#x5EA;&#x5D5;&#x5DB;&#x5DF; &#x5D4;&lt;a href=&quot;http://he.wikipedia.org/wiki/%D7%9E%D7%A1%D7%95%D7%9E%D7%9F&quot;&gt;&#x5DE;&#x5E1;&#x5D5;&#x5DE;&#x5DF;&lt;/a&gt;&amp;nbsp;&#x5D1;&#x5D5;, &#x5D0;&#x5E9;&#x5E8; &#x5D9;&#x5DB;&#x5D5;&#x5DC; &#x5DC;&#x5D4;&#x5D9;&#x5D5;&#x5EA;&amp;nbsp;&lt;a href=&quot;http://he.wikipedia.org/wiki/%D7%9E%D7%A6%D7%99%D7%90%D7%95%D7%AA&quot;&gt;&#x5DE;&#x5E6;&#x5D9;&#x5D0;&#x5D5;&#x5EA;&#x5D9;&lt;/a&gt;&amp;nbsp;&#x5D0;&#x5D5;&amp;nbsp;&lt;a href=&quot;http://he.wikipedia.org/wiki/%D7%94%D7%A4%D7%A9%D7%98%D7%94&quot;&gt;&#x5DE;&#x5D5;&#x5E4;&#x5E9;&#x5D8;&lt;/a&gt;.&lt;/span&gt;&lt;/p&gt;
    
    &lt;p&gt;&lt;span dir=&quot;ltr&quot; lang=&quot;es&quot;&gt;Un&amp;nbsp;&lt;strong&gt;lenguaje&lt;/strong&gt;&amp;nbsp;(del&amp;nbsp;&lt;a href=&quot;http://es.wikipedia.org/wiki/Idioma_occitano&quot;&gt;provenzal&lt;/a&gt;&amp;nbsp;&lt;em&gt;lenguatge&lt;/em&gt;&amp;nbsp;y este del&amp;nbsp;&lt;a href=&quot;http://es.wikipedia.org/wiki/Lat%C3%ADn&quot;&gt;lat&amp;iacute;n&lt;/a&gt;&amp;nbsp;&lt;em&gt;lingua&lt;/em&gt;) es un sistema de&amp;nbsp;&lt;a href=&quot;http://es.wikipedia.org/wiki/Comunicaci%C3%B3n&quot;&gt;comunicaci&amp;oacute;n&lt;/a&gt;&amp;nbsp;estructurado para el que existe un&amp;nbsp;&lt;a href=&quot;http://es.wikipedia.org/wiki/Significado&quot;&gt;contexto&lt;/a&gt;&amp;nbsp;de uso y ciertos principios combinatorios formales. Existen contextos tanto naturales como artificiales.&lt;/span&gt;&lt;/p&gt;
    
    &lt;p&gt;&lt;span dir=&quot;rtl&quot; lang=&quot;ar&quot;&gt;&lt;strong&gt;&#x627;&#x644;&#x644;&#x63A;&#x629;&lt;/strong&gt;&amp;nbsp;&#x646;&#x633;&#x642; &#x645;&#x646; &#x627;&#x644;&#x625;&#x634;&#x627;&#x631;&#x627;&#x62A; &#x648;&#x627;&#x644;&#x631;&#x645;&#x648;&#x632;&#x60C; &#x64A;&#x634;&#x643;&#x644; &#x623;&#x62F;&#x627;&#x629; &#x645;&#x646; &#x623;&#x62F;&#x648;&#x627;&#x62A;&amp;nbsp;&lt;a href=&quot;http://ar.wikipedia.org/wiki/%D8%A7%D9%84%D9%85%D8%B9%D8%B1%D9%81%D8%A9&quot;&gt;&#x627;&#x644;&#x645;&#x639;&#x631;&#x641;&#x629;&lt;/a&gt;&#x60C; &#x648;&#x62A;&#x639;&#x62A;&#x628;&#x631; &#x627;&#x644;&#x644;&#x63A;&#x629; &#x623;&#x647;&#x645; &#x648;&#x633;&#x627;&#x626;&#x644; &#x627;&#x644;&#x62A;&#x641;&#x627;&#x647;&#x645; &#x648;&#x627;&#x644;&#x627;&#x62D;&#x62A;&#x643;&#x627;&#x643; &#x628;&#x64A;&#x646; &#x623;&#x641;&#x631;&#x627;&#x62F; &#x627;&#x644;&#x645;&#x62C;&#x62A;&#x645;&#x639; &#x641;&#x64A; &#x62C;&#x645;&#x64A;&#x639; &#x645;&#x64A;&#x627;&#x62F;&#x64A;&#x646; &#x627;&#x644;&#x62D;&#x64A;&#x627;&#x629;. &#x648;&#x628;&#x62F;&#x648;&#x646; &#x627;&#x644;&#x644;&#x63A;&#x629; &#x64A;&#x62A;&#x639;&#x630;&#x631; &#x646;&#x634;&#x627;&#x637; &#x627;&#x644;&#x646;&#x627;&#x633; &#x627;&#x644;&#x645;&#x639;&#x631;&#x641;&#x64A;.&lt;/span&gt;&lt;/p&gt;
    
    </textarea>
      <script>
        CKEDITOR.replace('editor2', {
          extraPlugins: 'language',
          // Customizing list of languages available in the Language drop-down.
          language_list: ['ar:Arabic:rtl', 'fr:French', 'he:Hebrew:rtl', 'es:Spanish'],
          height: 270
        });
      </script>
    </body>
    
    </html>