即时更改所见即所得的文本方向（ltr 和 rtl）

Question

我在波斯语网站上使用 nicEdit 作为所见即所得的编辑器。

内容的文字有时是波斯语和英语的混合词，

波斯语是一种从右到左的语言，所以编辑器的默认方向是从右到左。然后，当一个人在文本中间键入一个英文单词时，rtl 方向性就会应用在它上面并导致误读 例如 C# 会写成#C

一个解决方案是用一个span标签包围单词（例如C#），它的方向是ltr C#

但是我该如何实现呢？ 我想在编辑器按键事件中，检查输入的键是否是英文的，用上面提到的span替换它，但我不知道该怎么做

换句话说，您可以将此问题视为即时更改键入文本的背景颜色

在下面我写了我正在尝试的内容，但它还不起作用

    $('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;>');
        }
    });

问题在于否则我应该逃避当前范围

Answer 1

我准备了小小提琴：http://jsfiddle.net/br8qt320/

这是一个非常粗略的示例，显示了字母和数字的不同背景。您需要对其进行微调，但它应该可以很好地工作。请注意，我不知道 NicEditor，也许这个库有更好的方法。

小提琴代码：

$(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;
    });
});