no-line-breaks attribute to prevent line breaks

fix-space-nbsp 0.3.0
Dmitri Akatov 11 years ago
parent b939d4f9ac
commit dab97313db

@ -6,12 +6,24 @@
var old_render;
elmt.bind('input', function(e) {
return scope.$apply(function() {
var html;
var html, rerender;
html = elmt.html();
if (attrs.stripBr && attrs.stripBr !== "false" && html === '<br>') {
html = '';
rerender = false;
if (attrs.stripBr && attrs.stripBr !== "false") {
html = html.replace(/<br>$/, '');
}
if (attrs.noLineBreaks && attrs.noLineBreaks !== "false") {
html = html.replace(/<div>/g, '').replace(/<br>/g, '').replace(/<\/div>/g, '');
rerender = true;
}
ngModel.$setViewValue(html);
if (rerender) {
ngModel.$render();
}
if (html === '') {
elmt.blur();
return elmt.focus();
}
return ngModel.$setViewValue(html);
});
});
old_render = ngModel.$render;

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

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

@ -6,8 +6,17 @@ angular.module('contenteditable', [])
elmt.bind 'input', (e) ->
scope.$apply ->
html = elmt.html()
html = '' if attrs.stripBr && attrs.stripBr != "false" && html == '<br>'
rerender = false
if attrs.stripBr && attrs.stripBr != "false"
html = html.replace /<br>$/, ''
if attrs.noLineBreaks && attrs.noLineBreaks != "false"
html = html.replace(/<div>/g, '').replace(/<br>/g, '').replace(/<\/div>/g, '')
rerender = true
ngModel.$setViewValue(html)
ngModel.$render() if rerender
if html == '' # the cursor if the contents is emty, so need to refocus
elmt.blur()
elmt.focus()
# model -> view
old_render = ngModel.$render # save for later

@ -0,0 +1,34 @@
<!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> yay"
window.scope = $scope
})
.controller('Ctrl2', function($scope) {})
angular.bootstrap(document, ['simple'])
</script>
</head>
<body>
<div ng-controller="Ctrl">
<label>Contenteditable (View):</label>
<span id="input" contenteditable="true" ng-model="model" no-line-breaks="true" style="display:block">
something
</span>
<hr>
<div>
<label>Model:</label>
<pre id="output" onclick="console.log('clicked the output')">{{ model }}</pre>
</div>
</div>
</body>
</html>