CODEWITHSUNDEEP
javascripthtmlwysiwygright-to-left
Ahmad
Ahmad

Reputation: 9658

Change text direction (ltr and rtl) of wysiwyg on fly

I use nicEdit as wysiwig editor on a website in Persian language.

The text of the contents are sometimes mix of Persian and English words,

Persian is an right to left language, so the default direction of the editor is right to left. Then when one types an English word in the middle of the text the rtl directionality applies on it and causes misreading for example C# will be written as #C

a solution for it is to surround the word (for example C#) with an span tag which its direction be ltr C#

but how can i achieve it? I thought in the editor keypress event, check if the entered key is English replace it with the span mentioned above, but I dont know how to do it

in other words you can think of this problem as changing the background color of the typed text on fly

in the following I wrote what I am trying however it doesnt work yet

    $('body').on('keypress','.nicEdit-main', function(e) {
        var c= String.fromCharCode(e.which);
        var isWordcharacter = c.match(/\w/);        
        if (isWordcharacter && !en)                                                
        {           
            en = true;
            nicEditor.nicCommand('insertHTML', '<span dir="ltr" style="direction:ltr; background-color:#eee">');
        }
        else if (!isWordcharacter)
        {
            en = false;
// need to close or escape the current span or create a new one with the opposite direction but nor works
            nicEditor.nicCommand('insertHTML', '<span dir="rtl" style="direction:rtl;>');
        }
    });

the problem is in the else I should escape the current span

Upvotes: 2

Views: 1657

Answers (1)

Arius
Arius

Reputation: 1387

I prepared small fiddle: http://jsfiddle.net/br8qt320/

This is pretty rough example that shows different background for letters and numbers. You need to fine-tune it a little bit but it should work quite well. Note that I do not know NicEditor and maybe there is a better approach for this library.

Code from fiddle:

$(document).ready(function() {
    nicEditors.allTextAreas();

    var ltrSpan = $('<span style="background-color:#00ff00">');
    var rtlSpan = $('<span style="background-color:#ff0000">');

    var currentSpan = null;
    var isLtr = true;

    $('body').on('keydown','.nicEdit-main', function(e) {
        var editorArea = $(this);
        var currentChar = String.fromCharCode(e.keyCode || e.which);
        var isNumeric = currentChar.match(/\d/);

        if (isNumeric) {
            if (!isLtr) {
                isLtr = true;
                currentSpan = ltrSpan.clone();
                currentSpan.appendTo(editorArea);
            }
        } else {
            if (isLtr) {
                isLtr = false;
                currentSpan = rtlSpan.clone();
                currentSpan.appendTo(editorArea);
            }
        }

        currentSpan.append(currentChar);
        return false;
    });
});

Upvotes: 1

Related Questions