AngularJS获取文本选择并附加html以开始和结束选择

时间:2016-03-22 11:30:57

标签: angularjs angularjs-scope

这里有点困境。我在角度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);
    };

我相对较新的棱角分明,我可能会采取比我能处理的更大的一口:)

问题是我无法选择在其中包装标签。

1 个答案:

答案 0 :(得分:0)

您无需观看任何内容。

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

这会加粗选定的文字。