angular model for the "contenteditable" attribute
test | ||
util | ||
.bowerrc | ||
.editorconfig | ||
.gitattributes | ||
.gitignore | ||
.jshintrc | ||
.travis.yml | ||
angular-contenteditable-scenario.js | ||
angular-contenteditable.js | ||
bower.json | ||
Gruntfile.coffee | ||
karma.coffee | ||
LICENSE | ||
package.json | ||
README.md |
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