angular-contenteditable
An AngularJS directive to bind html tags with the contenteditable
attribute to models.
Install
bower install angular-contenteditable
Usage
angular.module('myapp', ['contenteditable'])
.controller('Ctrl', ['$scope', 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>
Notice
The directive currently does not work in any version of Internet Explorer or Opera < 15.
Both browsers don't fire the input
event for contenteditable fields.
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
display
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.
Development
npm install
bower install
grunt