An AngularJS directive to bind html tags with the contenteditable
attribute to models.
bower install angular-contenteditable
angular.module('myapp', ['contenteditable'])
.controller('Ctrl', function($scope){
$scope.model="<i>interesting</i> stuff" })
<div ng-controller="Ctrl">
<span contenteditable="true"
ng-model="model"
strip-br="true"
select-non-editable="true"></span></div>
In Chrome, when a contenteditable element X contains a non-contenteditable element Y as the last element, then the behaviour of the caret is the following:
-
When X has style
dislay
set toblock
orinline-block
, then the caret moves to the very far right edge of X when it is immediately at the end of X (inserting spaces moves the caret back). -
When X has style
display
set toinline
, then the caret disappears instead.
npm install
grunt build
grunt karma:e2e