Javascript Angularjs：添加html链接后，光标跳入contenteditable

如果将链接添加到绑定到contenteditable div的ng模型，则任何输入都会强制光标反弹：

例如：

是什么导致了这个问题？ 我理解当元素的html被重新绘制时，第一次创建链接时光标是否会反弹。然而，在这里，每当用户写入任何字符时，它都会改变位置

HTML:

<div contenteditable
      name="myWidget" 
      ng-bind-html="userContent"
      ng-model="userContent"
      strip-br="true"
      required></div>

app.directive('contenteditable', ['$sce', function($sce) {
    return {
      restrict: 'A', // only activate on element attribute
      require: '?ngModel', // get a hold of NgModelController
      link: function(scope, element, attrs, ngModel) {
        if (!ngModel) return; // do nothing if no ng-model

        // Specify how UI should be updated
        ngModel.$render = function() {
          element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
        };

        // Listen for change events to enable binding
        element.on('blur keyup change', function() {
          scope.$evalAsync(read);
        });
        read(); // initialize

        // Write data to the model
        function read() {
          var html = element.html();
          // When we clear the content editable the browser leaves a <br> behind
          // If strip-br attribute is provided then we strip this out
          if ( attrs.stripBr && html == '<br>' ) {
            html = '';
          }
          ngModel.$setViewValue(html);
        }
      }
    };
  }]);

  app.controller('testController', ['$scope','$timeout', function($scope,$timeout) {

      $timeout(function(){
        $scope.userContent = '<a href="something.com">something.com</a>';
      });

  }]);

JavaScript:

<div contenteditable
      name="myWidget" 
      ng-bind-html="userContent"
      ng-model="userContent"
      strip-br="true"
      required></div>

app.directive('contenteditable', ['$sce', function($sce) {
    return {
      restrict: 'A', // only activate on element attribute
      require: '?ngModel', // get a hold of NgModelController
      link: function(scope, element, attrs, ngModel) {
        if (!ngModel) return; // do nothing if no ng-model

        // Specify how UI should be updated
        ngModel.$render = function() {
          element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
        };

        // Listen for change events to enable binding
        element.on('blur keyup change', function() {
          scope.$evalAsync(read);
        });
        read(); // initialize

        // Write data to the model
        function read() {
          var html = element.html();
          // When we clear the content editable the browser leaves a <br> behind
          // If strip-br attribute is provided then we strip this out
          if ( attrs.stripBr && html == '<br>' ) {
            html = '';
          }
          ngModel.$setViewValue(html);
        }
      }
    };
  }]);

  app.controller('testController', ['$scope','$timeout', function($scope,$timeout) {

      $timeout(function(){
        $scope.userContent = '<a href="something.com">something.com</a>';
      });

  }]);

app.directive（'contenteditable'，['$sce'，function（$sce）{
返回{
restrict:'A'，//仅在元素属性上激活
require:“？ngModel”，//获取NgModelController
链接：功能（范围、元素、属性、模型）{
if（！ngModel）return；//如果没有ng模型，则不执行任何操作
//指定应如何更新UI
ngModel.$render=function（）{
html（$sce.getTrustedHtml（ngModel.$viewValue | |''）；
};
//侦听更改事件以启用绑定
on（'blur keyup change'，function（）{
范围$evalAsync（读取）；
});
read（）；//初始化
//将数据写入模型
函数read（）{
var html=element.html（）；
//清除可编辑内容后，浏览器会留下一个

//如果提供了strip br属性，那么我们将其去掉
如果（attrs.stripBr&&html='
'）{
html=''；
}
ngModel.$setViewValue（html）；
}
}
};
}]);
app.controller（'testController'，['$scope'，'$timeout'，函数（$scope，$timeout）{
$timeout（函数（）{
$scope.userContent=''；
});
}]);

---

更新：我可以利用Rangy库保存光标位置，但是，算法确实需要一些时间来恢复位置，从而导致拼写错误。检查此项

在

渲染中替换html

以使浏览器丢失选择点。您试图对此指令执行什么操作？通常可以通过使用

元素[0]解决此类问题。选择Start

捕获光标位置，然后选择

元素[0]。设置SelectionRange（）

在更新值后重置光标。但是，通过使用

contenteditable

我认为它使该解决方案不可用。@charlietfl@Lex请查看问题中的更新。您在

render

中替换了html，因此浏览器失去了选择点。您试图对此指令执行什么操作？通常可以通过使用

元素[0]解决此类问题。选择Start

捕获光标位置，然后选择

元素[0]。设置SelectionRange（）

在更新值后重置光标。但是，通过使用

contenteditable

我认为这会使该解决方案不可用。@charlietfl@Lex请查看问题中的更新。