4

I have a page with multiple textareas to be replaced with TinyMCE. Some of the Textareas take arabic text, some english text. The textareas have the dir-attribute set correctly according to the input they should receive.

How can I set the directionality of the different Editors according to their textareas? I can set the directionality for all instances like this:

$('textarea.advanced_editor').tinymce({
    ⋮
    plugins : "…,directionality,…",
    directionality: "rtl",
    ⋮
});

But how can I set different direction for each editor?

fragmentedreality
  • 1,287
  • 9
  • 31

3 Answers3

6

In this case you will need different tinymce configurations - one with directionality set to rtl the other with the default.

UPDATE:

This is possible. You need to call this using the correct editor id

tinymce.get('my_editor_id').getBody().dir ="rtl";
Thariama
  • 50,002
  • 13
  • 138
  • 166
  • This seems very awkward to me. Everything is the same but the direction? Is there no way to insert the direction dynamically or set it afterwards? – fragmentedreality Apr 18 '12 at 09:34
  • Allright, I will dig into this as that is not sufficient, yet. Thank you. – fragmentedreality Apr 18 '12 at 09:47
  • 2
    you could give the textareas a css class arabic and depending on that class change the directionality onInit using a tinymce setting – Thariama Apr 18 '12 at 09:54
  • No, it's not a must to get or know the correct id. I'm catching like this: `for (var i = 0; i < tinymce.editors.length; i++) { tinymce.editors[i].getBody().dir = "rtl"; }` – Arda Apr 23 '14 at 12:56
  • @Arda: this will only work if you want to change the directionality of all your editors. In case a single one stays with "ltr" you got a problem. – Thariama Apr 23 '14 at 13:30
  • @Thariama With a simple if clause inside for loop, OP can easily filter for a specific editor (something like 3rd loaded editor should be rtl etc.) That's my approach though. – Arda Apr 24 '14 at 07:24
4

In the end I came up with this:

$('textarea.advanced_editor').tinymce({
    ⋮
    plugins : "…,directionality,…",
    directionality: "ltr",
    ⋮
    setup: function (ed) {
        ed.onInit.add(function(ed) {
            var direction = $('[name="'+ed.id+'"]').attr('dir');
            ed.getBody().dir = direction;
        });
    },
    ⋮
});

I used the events-based solution like @Thariama supposed and referenced back to the dir-attribute, which I know to be always set correctly.

fragmentedreality
  • 1,287
  • 9
  • 31
4

I edited toolbar of TinyMCE toolbar editor and there I gave both the options ltr and rtl over there to use.

Did like toolbar1: "ltr rtl | undo redo" in the function LoadTinyMCE()

So here user has both the options of writing as ltr and rtl comes as a toolbar. Did it in version 4.1.7.

NGupta
  • 77
  • 8