AngularJS contenteditble div - 需要獲取插入位置

我從http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/editing-text-in-place-using-html5-content-editable.html中提取的這個指令非常好用。AngularJS contenteditble div - 需要獲取插入位置

這是我的代碼。

angular 
.module('app') 
.directive("formulaEditor", function() { 
return { 
    restrict: "A", 
    require: "ngModel", 
    link: function(scope, element, attrs, ngModel) { 
     function read() { 
      ngModel.$setViewValue(element.html()); 
     } 
     ngModel.$render = function() { 
      element.html(ngModel.$viewValue || ""); 
     }; 
     element.bind("blur keyup change", function() { 
      scope.$apply(read); 
     }); 
    } 
}; 
}); 

<div formula-editor id="editor" contenteditable="true" ng-model="kpiForm.formula"></div>

我需要讓我的div上的光標位置。我不知道如何實現我發現的代碼（不使用角度）：Get caret position in contenteditable div including tags

有人可以幫忙嗎？ ty！

來源

2017-05-09 Marco Jr

嗨，我正在尋找類似的東西。你有沒有找到解決方案？ – AshD

-1

var app = angular.module("myApp", []); 
 
app.directive("formulaEditor", function() { 
 
return { 
 
    restrict: "A", 
 
    require: "ngModel", 
 
    link: function(scope, element, attrs, ngModel) { 
 
     function read() { 
 
      ngModel.$setViewValue(element.html()); 
 
     } 
 
     ngModel.$render = function() { 
 
      debugger; 
 
      document.getElementById('editor').focus(); 
 
      element.html(ngModel.$viewValue || ""); 
 
     }; 
 
     element.bind("blur keyup change", function() { 
 
      scope.$apply(read); 
 
     }); 
 
    } 
 
}; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body ng-app="myApp"> 
 

 
<div formula-editor id="editor" contenteditable="true" ng-model="kpiForm.formula" style="border:2px solid black;" tabindex="-1"></div> 
 

 
</body>

嗨，我已經更新了代碼集中光標在「格」。這對你有幫助嗎？

來源

2017-05-09 15:27:04

我很欣賞，@praveen，但我試圖找出一種方法來獲得插入位置。如果光標實際上位於第5個字符上，例如... –

@MarcoJr U表示window.getSelection（），其中u可以找到給出光標的插入位置的focusOffset值。 –

AngularJS contenteditble div - 需要獲取插入位置

回答

相關問題