AngularJS選択を開始して終了するには、テキストを選択してhtmlを追加します。

Question

ここには少しのジレンマがあります。私は角度のjsのテキストエディタを構築しています。私が持っている問題は、ユーザーが段落や見出し内のテキストの一部を選択したときに、その部分のテキストのスタイルを太字/斜体などに変更する必要があるということです。<strong></strong>または<em></em>に選択したテキストをラップする必要があります。 。

Plunker

私は、テキスト選択の開始位置と終了位置を取得するディレクティブ

editorApp.directive('watchSelection', function() { 
    return function(scope, elem) { 
     elem.on('mouseup', function() { 
      scope.startPosition = elem[0].selectionStart; 
      scope.endPosition = elem[0].selectionEnd; 
      // scope.selected = elem[0].value.substring(start, end); 
      scope.$apply(); 
     }); 
    }; 
}); 

を持っています。ボタンの上に私は、この機能を実現するために望んでいる特定のタグにその選択をラップする必要がありますクリックしてください：角度に私は比較的新しい

$scope.boldText = function(startPosition, endPosition) { 
     $scope.start = startPosition; 
     $scope.end = endPosition; 
     var htmlStart = angular.element('<strong>'); 
     var htmlEnd = angular.element('</strong>'); 

     $scope.start.append(htmlStart); 
     $scope.end.append(htmlEnd); 
    }; 

と私は、私が扱うことができるより大きな一口を取っている場合があります:)

問題タグの内側を囲むように選択できません。

Answer 1

あなたは何も見る必要はありません。

$scope.boldText = function() { 
    document.execCommand('bold'); 
}; 

これは、選択したテキストを太字にします。