IE 11でのテキストエリアの選択が最後の行で適切に機能していない

Question

私は、Markdownを記述するためのテキストエリアと、テキストエリアに書式設定を挿入するボタンで構成されるAngularディレクティブを構築しています。クリックするとテキストが現在選択されていない場合、（例えば、太字）ボタンには、以下を追加する必要があります

テキストが選択されている置き換え

**replace text**

。

すべてのシナリオで期待どおりに機能しています。次の情報を保存します。IE 11では、最終行で選択が行われたが、最初の行ではありません。他のすべてのブラウザでは正常に動作し、IE 11ではこの条件を除いて正常に動作します。ここで

が選択を実行するためのディレクティブからのコードです：

var editor = element.find('textarea')[0]; 

function createWrappingMarkdown(symbol) { 

    // If text is selected, wrap that text in the provided symbol 
    // After doing so, set the cursor at the end of the highlight, 
    // but before the ending symbol(s) 

    /* This section works fine */ 

    if (editor.selectionStart < editor.selectionEnd) { 
     var start = editor.selectionStart, 
      end = editor.selectionEnd; 

     var value = editor.value.substring(0, start) + symbol + 
      editor.value.substring(start, end) + symbol + 
      editor.value.substring(end, editor.value.length); 

     scope.$evalAsync(function() { 
      editor.value = value; 
      editor.focus(); 
      editor.selectionStart = end + symbol.length; 
      editor.selectionEnd = end + symbol.length; 
     }); 

    // If no text is highlighted, insert {symbol}replace text{symbol} 
    // at the current cursor position. 
    // After inserting, select the text "replace text" 

    /* This is where the selection is broken in IE 11 */ 

    } else if (editor.selectionStart || editor.selectionStart === 0) { 
     var start = editor.selectionStart, 
      message = "replace text"; 

     var value = editor.value.substring(0, start) + symbol + 
      message + symbol + editor.value.substring(start, editor.value.length); 

     scope.$evalAsync(function() { 
      editor.value = value; 
      setCursorSelect(start + symbol.length, start + symbol.length + message.length); 
     }); 
    } 
} 

function setCursorSelect(start, end) { 
    editor.focus(); 
    if (editor.setSelectionRange) { 
     editor.setSelectionRange(start, end); 
    } else { 
     editor.selectionStart = start; 
     editor.selectionEnd = end; 
    } 
} 

が更新

この問題に対する修正のための答えを参照してください。この修正を示すためにPlunkが改訂されました。

Answer 1

IEでさらにデバッグした後、カーソルがテキストエリアの最後の使用可能な位置にあるときはいつも、より大きい値にeditor.selectionStartが設定されていました。これはIEでのみ起こり、他のブラウザでは起こりませんでした。

scope.$evalAsync(function() { 
    if (editor.value.length < editor.selectionStart) { 
     start = editor.value.length; 
    } 

    editor.value = value; 
    setCursorSelect(start + symbol.length, start + symbol.length + message.length); 
}); 

plunkは、上記のこの修正を反映するために更新されました。このことを念頭に、私は選択がボタンを押して、次の必要があるときは、次の解決策を考え出すことができました。