Skip to content

Commit ee2e19e

Browse files
thijswthijsw
committed
Merge branch 'SpinGo-master'
2 parents 1683d0f + 9ee98f0 commit ee2e19e

File tree

6 files changed

+102
-129
lines changed

6 files changed

+102
-129
lines changed

‎bower.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"name": "angular-medium-editor",
3-
"version": "0.1.1",
3+
"version": "1.1.0",
44
"dependencies": {
55
"angular": "1.3.*",
6-
"medium-editor": "4.4.*"
6+
"medium-editor": "5.*"
77
},
88
"main": "./dist/angular-medium-editor.js"
99
}

‎demo/interactive.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html ng-app="demo">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>angularjs medium editor | demo</title>
6+
<link rel="stylesheet" href="css/normalize.css">
7+
<link rel="stylesheet" href="css/demo.css">
8+
<link rel="stylesheet" href="../bower_components/medium-editor/dist/css/medium-editor.css">
9+
<link rel="stylesheet" href="../bower_components/medium-editor/dist/css/themes/default.css">
10+
<style>
11+
</style>
12+
</head>
13+
<body>
14+
<div id="container" ng-controller="demo">
15+
<h1>Medium Editor for AngularJS</h1>
16+
<h2>Type Here:</h2>
17+
<form name="demo">
18+
<div name="text" ng-model="text" required medium-editor bind-options="{'placeholder': {text: 'This is a placeholder'},
19+
'buttons': ['bold', 'italic', 'underline', 'header1', 'header2', 'quote', 'orderedlist', 'unorderedlist']}"></div>
20+
</form>
21+
<button type="button" ng-click="text=''">Clear</button>
22+
<h2>Validation:</h2>
23+
<pre>{{demo.text.$error}}</pre>
24+
<h2>Model:</h2>
25+
<pre>{{text}}</pre>
26+
</div>
27+
28+
<script src="../bower_components/angular/angular.js"></script>
29+
<script src="../bower_components/medium-editor/dist/js/medium-editor.js"></script>
30+
<script src="../dist/angular-medium-editor.js"></script>
31+
<script >
32+
angular.module('demo', ['angular-medium-editor'])
33+
.controller('demo', ['$scope', function($scope) {
34+
$scope.text = 'This text gets is shown via .$render()';
35+
}]);
36+
37+
</script>
38+
</body>
39+
</html>

‎dist/angular-medium-editor.js

Lines changed: 29 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,51 @@
1+
/*global MediumEditor */
12
'use strict';
23

34
angular.module('angular-medium-editor', [])
45

56
.directive('mediumEditor', function() {
67

8+
function toInnerText(value) {
9+
var tempEl = document.createElement('div'),
10+
text;
11+
tempEl.innerHTML = value;
12+
text = tempEl.textContent || '';
13+
return text.trim();
14+
}
15+
716
return {
817
require: 'ngModel',
918
restrict: 'AE',
1019
scope: { bindOptions: '=' },
11-
link: function(scope, iElement, iAttrs, ctrl) {
20+
link: function(scope, iElement, iAttrs, ngModel) {
1221

1322
angular.element(iElement).addClass('angular-medium-editor');
1423

15-
// Parse options
16-
var opts = {},
17-
placeholder = '';
18-
var prepOpts = function() {
19-
if (iAttrs.options) {
20-
opts = scope.$eval(iAttrs.options);
21-
}
22-
var bindOpts = {};
23-
if (scope.bindOptions !== undefined) {
24-
bindOpts = scope.bindOptions;
25-
}
26-
opts = angular.extend(opts, bindOpts);
27-
};
28-
prepOpts();
29-
placeholder = opts.placeholder;
30-
scope.$watch('bindOptions', function() {
31-
// in case options are provided after mediumEditor directive has been compiled and linked (and after $render function executed)
32-
// we need to re-initialize
33-
if (ctrl.editor) {
34-
ctrl.editor.destroy();
35-
}
36-
prepOpts();
37-
// Hide placeholder when the model is not empty
38-
if (!ctrl.$isEmpty(ctrl.$viewValue)) {
39-
opts.placeholder = '';
40-
}
41-
ctrl.editor = new MediumEditor(iElement, opts);
42-
});
43-
44-
var onChange = function() {
45-
46-
scope.$apply(function() {
24+
// Global MediumEditor
25+
ngModel.editor = new MediumEditor(iElement, scope.bindOptions);
4726

48-
// If user cleared the whole text, we have to reset the editor because MediumEditor
49-
// lacks an API method to alter placeholder after initialization
50-
if (iElement.html() === '<p><br></p>' || iElement.html() === '') {
51-
opts.placeholder = placeholder;
52-
var editor = new MediumEditor(iElement, opts);
53-
}
54-
55-
ctrl.$setViewValue(iElement.html());
56-
});
27+
ngModel.$render = function() {
28+
iElement.html(ngModel.$viewValue || "");
29+
ngModel.editor.getExtensionByName('placeholder').updatePlaceholder(iElement[0]);
5730
};
5831

59-
// view -> model
60-
iElement.on('blur', onChange);
61-
iElement.on('input', onChange);
62-
iElement.on('paste', onChange);
63-
64-
// model -> view
65-
ctrl.$render = function() {
66-
67-
if (!this.editor) {
68-
// Hide placeholder when the model is not empty
69-
if (!ctrl.$isEmpty(ctrl.$viewValue)) {
70-
opts.placeholder = '';
71-
}
72-
73-
this.editor = new MediumEditor(iElement, opts);
32+
ngModel.$isEmpty = function(value) {
33+
if (/[<>]/.test(value)) {
34+
return toInnerText(value).length === 0;
35+
} else if (value) {
36+
return value.length === 0;
37+
} else {
38+
return true;
7439
}
75-
76-
iElement.html(ctrl.$isEmpty(ctrl.$viewValue) ? '' : ctrl.$viewValue);
77-
78-
// hide placeholder when view is not empty
79-
if(!ctrl.$isEmpty(ctrl.$viewValue)) angular.element(iElement).removeClass('medium-editor-placeholder');
8040
};
8141

42+
ngModel.editor.subscribe('editableInput', function (event, editable) {
43+
ngModel.$setViewValue(editable.innerHTML.trim());
44+
});
45+
46+
scope.$watch('bindOptions', function(bindOptions) {
47+
ngModel.editor.init(iElement, bindOptions);
48+
});
8249
}
8350
};
8451

‎dist/angular-medium-editor.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-medium-editor",
3-
"version": "0.1.1",
3+
"version": "1.1.0",
44
"description": "AngularJS directive for Medium.com editor clone",
55
"keywords": [
66
"angular",

‎src/angular-medium-editor.js

Lines changed: 29 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,51 @@
1+
/*global MediumEditor */
12
'use strict';
23

34
angular.module('angular-medium-editor', [])
45

56
.directive('mediumEditor', function() {
67

8+
function toInnerText(value) {
9+
var tempEl = document.createElement('div'),
10+
text;
11+
tempEl.innerHTML = value;
12+
text = tempEl.textContent || '';
13+
return text.trim();
14+
}
15+
716
return {
817
require: 'ngModel',
918
restrict: 'AE',
1019
scope: { bindOptions: '=' },
11-
link: function(scope, iElement, iAttrs, ctrl) {
20+
link: function(scope, iElement, iAttrs, ngModel) {
1221

1322
angular.element(iElement).addClass('angular-medium-editor');
1423

15-
// Parse options
16-
var opts = {},
17-
placeholder = '';
18-
var prepOpts = function() {
19-
if (iAttrs.options) {
20-
opts = scope.$eval(iAttrs.options);
21-
}
22-
var bindOpts = {};
23-
if (scope.bindOptions !== undefined) {
24-
bindOpts = scope.bindOptions;
25-
}
26-
opts = angular.extend(opts, bindOpts);
27-
};
28-
prepOpts();
29-
placeholder = opts.placeholder;
30-
scope.$watch('bindOptions', function() {
31-
// in case options are provided after mediumEditor directive has been compiled and linked (and after $render function executed)
32-
// we need to re-initialize
33-
if (ctrl.editor) {
34-
ctrl.editor.destroy();
35-
}
36-
prepOpts();
37-
// Hide placeholder when the model is not empty
38-
if (!ctrl.$isEmpty(ctrl.$viewValue)) {
39-
opts.placeholder = '';
40-
}
41-
ctrl.editor = new MediumEditor(iElement, opts);
42-
});
43-
44-
var onChange = function() {
45-
46-
scope.$apply(function() {
24+
// Global MediumEditor
25+
ngModel.editor = new MediumEditor(iElement, scope.bindOptions);
4726

48-
// If user cleared the whole text, we have to reset the editor because MediumEditor
49-
// lacks an API method to alter placeholder after initialization
50-
if (iElement.html() === '<p><br></p>' || iElement.html() === '') {
51-
opts.placeholder = placeholder;
52-
var editor = new MediumEditor(iElement, opts);
53-
}
54-
55-
ctrl.$setViewValue(iElement.html());
56-
});
27+
ngModel.$render = function() {
28+
iElement.html(ngModel.$viewValue || "");
29+
ngModel.editor.getExtensionByName('placeholder').updatePlaceholder(iElement[0]);
5730
};
5831

59-
// view -> model
60-
iElement.on('blur', onChange);
61-
iElement.on('input', onChange);
62-
iElement.on('paste', onChange);
63-
64-
// model -> view
65-
ctrl.$render = function() {
66-
67-
if (!this.editor) {
68-
// Hide placeholder when the model is not empty
69-
if (!ctrl.$isEmpty(ctrl.$viewValue)) {
70-
opts.placeholder = '';
71-
}
72-
73-
this.editor = new MediumEditor(iElement, opts);
32+
ngModel.$isEmpty = function(value) {
33+
if (/[<>]/.test(value)) {
34+
return toInnerText(value).length === 0;
35+
} else if (value) {
36+
return value.length === 0;
37+
} else {
38+
return true;
7439
}
75-
76-
iElement.html(ctrl.$isEmpty(ctrl.$viewValue) ? '' : ctrl.$viewValue);
77-
78-
// hide placeholder when view is not empty
79-
if(!ctrl.$isEmpty(ctrl.$viewValue)) angular.element(iElement).removeClass('medium-editor-placeholder');
8040
};
8141

42+
ngModel.editor.subscribe('editableInput', function (event, editable) {
43+
ngModel.$setViewValue(editable.innerHTML.trim());
44+
});
45+
46+
scope.$watch('bindOptions', function(bindOptions) {
47+
ngModel.editor.init(iElement, bindOptions);
48+
});
8249
}
8350
};
8451

0 commit comments

Comments
 (0)