javascript - 選択および範囲オブジェクト Contenteditable div

Question

ここで与えられたものと同様の要件があります. アムハラ語と呼ばれるエチオピア語に関連するプロジェクトに取り組んでいます。このプロジェクトでは、キーを押すとラテン文字がエチオピア文字に自動的に翻訳されます。アムハラ語では、t、m、n などのラテン文字はそれぞれ、少なくとも 7 文字にマップされます。たとえば、文字 t は、エチオピア語の ተ 文字 (ተ ቱ ቲ ታ ቴ ት ቶ) の 7 つのファミリにマッピングできます。ここで単に t を押すと ት にマッピングされ、文字 t の後に e を押すと ተ にマッピングされます。文字 t の後に i を押すと、ቲ などにマップされます。私はティム・ダウンの答えを試しましたが、私の場合は部分的に機能しています。少なくとも、テキストはカーソルに対して適切な位置に挿入されています。でも、提供されたソリューションは、最初の文字 (t など​​) を押した場合にのみ機能しますが、t を押してから母音 (a、e、i、o、u) を押しようとすると、最初にコアマップ文字 (t 付き) が表示され、次に、t および a でマッピングされた文字。これは textarea では完璧に機能していますが、contentEditable div では機能しませんでした。私のプロジェクトは与えられたものに似ていますここに。

次のように回答を変更しようとしましたが、カーソルを最後まで移動できません。

function insertTextAtCursor(text, value, stepback) {
    var sel, range, textNode;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            textNode = document.createTextNode(text);
            range.insertNode(textNode);
            // Move caret to the end of the newly inserted text node   
             range.setStart(textNode, textNode.length-stepback+value);
            range.setEnd(textNode, textNode.length);                
            //range.collapse(false);
            // range.setStart(textNode, textNode.length);
            //range.setEnd(textNode, textNode.length);
            sel.removeAllRanges();
            sel.addRange(range);     

        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.pasteHTML(text);
    }
}

ティムが提供したソリューションを問題に合わせて変更する方法を教えてください。