blob42
/
angular-contenteditable
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

make non-editable sub-elements selectable by a single click

Browse Source
fix-space-nbsp 0.2.0
Dmitri Akatov 11 years ago
parent 0858496a7b
commit 4e42e4d74c
6 changed files with 73 additions and 4 deletions
Show Stats Download Patch File Download Diff File

12
README.md
Unescape Escape View File

@ -10,8 +10,18 @@ bower install angular-contenteditable
## Usage
```javascript
angular.module('myapp', ['contenteditable'])
.controller('Ctrl', function($scope){
$scope.model="<i>interesting</i> stuff" })
```
```html
<div contenteditable ng-model="model"></div>
<div ng-controller="Ctrl">
<span contenteditable="true"
ng-model="model"
strip-br="true"
select-non-editable="true"></span></div>
```
## Development

16
angular-contenteditable.js vendored
Unescape Escape View File

@ -15,7 +15,7 @@
});
});
old_render = ngModel.$render;
return ngModel.$render = function() {
ngModel.$render = function() {
var el, el2, range, sel;
if (old_render != null) {
old_render();
@ -34,6 +34,20 @@
sel.removeAllRanges();
return sel.addRange(range);
};
if (attrs.selectNonEditable && attrs.selectNonEditable !== "false") {
return elmt.click(function(e) {
var range, sel, target;
target = e.toElement;
if (target !== this && angular.element(target).attr('contenteditable') === 'false') {
range = document.createRange();
sel = window.getSelection();
range.setStartBefore(target);
range.setEndAfter(target);
sel.removeAllRanges();
return sel.addRange(range);
}
});
}
}
};
});

2
bower.json
Unescape Escape View File

@ -1,5 +1,5 @@
{ "name": "angular-contenteditable"
, "version": "0.1.0"
, "version": "0.2.0"
, "main": "angular-contenteditable.js"
, "ignore":
[ ".*"

2
package.json
Unescape Escape View File

@ -1,6 +1,6 @@
{
"name": "angular-contenteditable",
"version": "0.1.0",
"version": "0.2.0",
"description": "angular extensions",
"main": "angular-contenteditable.js",
"directories": {

12
src/contenteditable.coffee
Unescape Escape View File

@ -26,4 +26,16 @@ angular.module('contenteditable', [])
range.collapse(true)
sel.removeAllRanges()
sel.addRange(range)
# select whole sub-span if it has contenteditable="false"
if attrs.selectNonEditable && attrs.selectNonEditable != "false"
elmt.click (e) ->
target = e.toElement
if target != @ && angular.element(target).attr('contenteditable') == 'false'
range = document.createRange()
sel = window.getSelection()
range.setStartBefore(target)
range.setEndAfter(target)
sel.removeAllRanges()
sel.addRange(range)
)

33
test/fixtures/select-non-editable.html vendored
Unescape Escape View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html ng-app="simple">
<head>
<title>Simple</title>
<!-- we need jquery for e2e testing -->
<script src="../../components/jquery/jquery.js"></script>
<script src="../../components/angular-unstable/angular.js"></script>
<script src="../../angular-contenteditable.js"></script>
<script>
angular.module('simple', ['contenteditable'])
.controller('Ctrl', function($scope) {
// $scope.model2 = 'hello'
$scope.model = "Initial stuff <b>with bold</b> <em>and italic</em> and <span contenteditable='false'>non-editable</span> stuff"
})
.controller('Ctrl2', function($scope) {})
angular.bootstrap(document, ['simple'])
</script>
</head>
<body>
<div ng-controller="Ctrl">
<label>Contenteditable (View):</label>
<div id="input" contenteditable="true" ng-model="model" strip-br="true" select-non-editable="true">
something
</div>
<hr>
<div>
<label>Model:</label>
<pre id="output" onclick="console.log('clicked the output')">{{ model }}</pre>
</div>
</div>
</body>
</html>