AngularJS Holen Sie sich Textauswahl und hängen Sie HTML an den Anfang und das Ende der Auswahl an

Question

Haben Sie ein kleines Dilemma hier. Ich baue Texteditor in eckigen js. Das Problem, das ich habe, ist, wenn der Benutzer einen Teil des Textes innerhalb eines Absatzes wählt oder Überschrift I Kursiv Styling jenes Teils der Text fett/usw.

Also im Grunde muss ich einpacken ausgewählten Text in <strong></strong> oder <em></em> ändern müssen .

Plunker

Ich habe eine Richtlinie

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

Das Textauswahl seine Startposition und Endposition wird. Auf Schaltfläche klicken Ich brauche diese Auswahl in bestimmten Tags zu setzen, das ich hoffe, mit dieser Funktion zu erfüllen:

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

I Winkel relativ neu und ich könnte einen größeren Bissen genommen habe als ich bewältigen kann :)

Problem ist, dass ich keine Auswahl erhalten kann, um innerhalb der Tags zu umbrechen.

Answer 1

Sie müssen nichts sehen.

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

Dies wird den ausgewählten Text fett formatieren.