Skip to content

Commit 10d584d

Browse files
committed
Merge remote-tracking branch 'upstream/master'
# Conflicts: # bower.json
2 parents ac30bf3 + 30434e2 commit 10d584d

File tree

12 files changed

+471
-144
lines changed

12 files changed

+471
-144
lines changed

.gitignore

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
bower_components/
2-
node_modules/
2+
node_modules/
3+
/*.iml
4+
/.idea

CONTRIBUTING.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
## Got a question or problem?
2+
3+
Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on [StackOverflow](http://stackoverflow.com/questions/tagged/angular-ui-tinymce) where maintainers are looking at questions questions tagged with `angular-ui-tinymce`.
4+
5+
StackOverflow is a much better place to ask questions since:
6+
* there are hundreds of people willing to help on StackOverflow
7+
* questions and answers stay available for public viewing so your question / answer might help someone else
8+
* SO voting system assures that the best answers are prominently visible.
9+
10+
To save your and our time we will be systematically closing all the issues that are requests for general support and redirecting people to StackOverflow.
11+
12+
## You think you've found a bug?
13+
14+
Oh, we are ashamed and want to fix it asap! But before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs we will systematically ask you to provide a _minimal_ reproduce scenario using http://plnkr.co/. Having a live reproduce scenario gives us wealth of important information without going back & forth to you with additional questions like:
15+
* version of AngularJS used
16+
* version of this library that you are using
17+
* 3rd-party libraries used, if any
18+
* and most importantly - a use-case that fails
19+
20+
A minimal reproduce scenario using http://plnkr.co/ allows us to quickly confirm a bug (or point out coding problem) as well as confirm that we are fixing the right problem.
21+
22+
We will be insisting on a minimal reproduce scenario in order to save maintainers time and ultimately be able to fix more bugs. Interestingly, from our experience users often find coding problems themselves while preparing a minimal plunk. We understand that sometimes it might be hard to extract essentials bits of code from a larger code-base but we really need to isolate the problem before we can fix it.
23+
24+
Unfortunately we are not able to investigate / fix bugs without a minimal reproduce scenario using http://plnkr.co/, so if we don't hear back from you we are going to close an issue that don't have enough info to be reproduced.
25+
26+
27+
## You want to contribute some code?
28+
29+
We are always looking for the quality contributions and will be happy to accept your Pull Requests as long as those adhere to some basic rules:
30+
31+
* Please open all pull requests against the `master` branch.
32+
* Please assure that you are submitting quality code, specifically make sure that:
33+
* You have accompanying tests and all the tests are passing. See testing below.
34+
* Your PR doesn't break the build; check the Travis-CI build status after opening a PR and push corrective commits if anything goes wrong
35+
* You are using 2 space indentation
36+
* Your commits conform to the conventions established [here](https://github.com/stevemao/conventional-changelog-angular/blob/master/convention.md)
37+
38+
39+
## Testing
40+
To run tests:
41+
```bash
42+
$ npm install
43+
$ bower install
44+
$ grunt
45+
```

README.md

Lines changed: 83 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
1-
# ui-tinymce directive [![Build Status](https://travis-ci.org/angular-ui/ui-tinymce.png)](https://travis-ci.org/angular-ui/ui-tinymce)
1+
# UI Tinymce - [AngularJS](http://angularjs.org/) directive for [TinyMCE](http://tinymce.com).
22

3-
This directive allows you to add a TinyMCE editor to your form elements.
3+
[![Build Status](https://travis-ci.org/angular-ui/ui-tinymce.png)](https://travis-ci.org/angular-ui/ui-tinymce)
4+
[![Join the chat at https://gitter.im/angular-ui/ui-tinymce](https://badges.gitter.im/angular-ui/ui-tinymce.svg)](https://gitter.im/angular-ui/ui-tinymce?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
5+
6+
# Call for Maintainer
7+
8+
This library is looking for a maintainer. If you feel up to the task please open an issue indicating so.
49

510
# Requirements
611

7-
- AngularJS
12+
- AngularJS 1.4.x or higher and it has been tested with Angular 1.4.8.
813
- TinyMCE 4
914

1015
# Testing
@@ -17,7 +22,7 @@ bower install
1722
grunt
1823
```
1924

20-
The karma task will try to open Chrome as a browser in which to run the tests. Make sure this is available or change the configuration in `test\test.config.js`
25+
The karma task will try to open Chrome as a browser in which to run the tests. Make sure this is available or change the configuration in `test\test.config.js`
2126

2227
# Usage
2328

@@ -40,7 +45,7 @@ This will copy the ui-tinymce files into your `components` folder, along with it
4045
```html
4146
<script type="text/javascript" src="app/bower_components/tinymce/tinymce.js"></script>
4247
<script type="text/javascript" src="app/bower_components/angular/angular.js"></script>
43-
<script type="text/javascript" src="app/bower_components/angular-ui-tinymce/tinymce.js"></script>
48+
<script type="text/javascript" src="app/bower_components/angular-ui-tinymce/src/tinymce.js"></script>
4449
```
4550

4651
Add the tinymce module as a dependency to your application module:
@@ -53,33 +58,93 @@ Apply the directive to your form elements:
5358

5459
```html
5560
<form method="post">
56-
<textarea ui-tinymce ng-model="tinymceModel"></textarea>
61+
<textarea ui-tinymce ng-model="tinymceModel"></textarea>
5762
</form>
5863
```
64+
65+
**Be sure not to set an `id` attribute**. This is because the directive needs to maintain selector knowledge in order to handle buggy behavior in TinyMCE when DOM manipulation is involved, such as in a reordering of HTML through ng-repeat or DOM destruction/recreation through ng-if.
66+
67+
When using other directives which do DOM manipulation involving elements with `ui-tinymce`, you may need to re-render the editor due to this buggy behavior with TinyMCE. For those situations, it is recommended to use the `$tinymce:refresh` event, which will handle re-rendering the editor to fix this problem.
68+
69+
## Working with ng-model
70+
71+
The ui-tinymce directive plays nicely with the ng-model directive such as ng-required.
72+
73+
If you add the ng-model directive to same the element as ui-tinymce then the text in the editor is automatically synchronized with the model value.
74+
75+
_The ui-tinymce directive stores the configuration options as specified in the [TinyMCE documentation](http://www.tinymce.com/wiki.php/Configuration) and expects the model value to be a html string or raw text, depending on whether `raw` is `true` (default value is `false`)._
76+
77+
**Note:** Make sure you using scopes correctly by following [this wiki page](https://github.com/angular/angular.js/wiki/Understanding-Scopes). If you are having issues with your model not updating, make sure you have a '.' in your model.
78+
79+
> This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models – watch 3 minutes worth. Misko demonstrates the primitive binding issue with ng-switch.
80+
5981
## Options
6082

61-
All the TinyMCE options can be passed through the directive.
83+
The directive supports all of the standard TinyMCE initialization options as listed [here](http://www.tinymce.com/wiki.php/Configuration).
84+
85+
Use the [setup](https://www.tinymce.com/docs/configure/integration-and-setup/#setup) function to bind different events:
86+
87+
```javascript
88+
scope.tinymceOptions = {
89+
setup: function(editor) {
90+
//Focus the editor on load
91+
$timeout(function(){ editor.focus(); });
92+
editor.on("init", function() {
93+
...
94+
});
95+
editor.on("click", function() {
96+
...
97+
});
98+
}
99+
};
100+
```
101+
By default all TinyMCE content that is set to `ngModel` will be whitelisted by `$sce`.
102+
103+
In addition, it supports these additional optional options
104+
105+
- `format` Format to get content as, i.e. 'raw' for raw HTML, or 'text' for text only. Defaults to 'html'. Documentation [here](http://www.tinymce.com/wiki.php/api4:method.tinymce.Editor.getContent)
106+
- `baseURL` This will set [baseURL property on the EditorManager](https://www.tinymce.com/docs/api/class/tinymce.editormanager/)
107+
- `debounce` This will debounce the model update which helps with performance of editors with large text. Defaults to true.
108+
109+
This option is only supported when present on the `uiTinymceConfig` global injectable - this injectable needs to be an object.
110+
111+
- `baseUrl` Sets the base url used by tinymce asset loading
62112

63113
```javascript
64114
myAppModule.controller('MyController', function($scope) {
65-
$scope.tinymceOptions = {
66-
handle_event_callback: function (e) {
67-
// put logic here for keypress
68-
}
69-
};
115+
$scope.tinymceOptions = {
116+
onChange: function(e) {
117+
// put logic here for keypress and cut/paste changes
118+
},
119+
inline: false,
120+
plugins : 'advlist autolink link image lists charmap print preview',
121+
skin: 'lightgray',
122+
theme : 'modern'
123+
};
70124
});
71125
```
72126
```html
73127
<form method="post">
74-
<textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea>
128+
<textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea>
75129
</form>
76-
```
130+
```
77131

78-
## Working with ng-model
132+
## Testing your Application (Protractor)
79133

80-
The ui-tinymce directive plays nicely with the ng-model directive such as ng-required.
134+
If you are testing your application using Protractor and you wish to be able to automate the
135+
contribution of rich text content as part of the tests, use the TinyMCE API method `insertContent`
136+
in conjunction with the WebDriver's `executeScript` method, like this:
137+
138+
```javascript
139+
browser.driver.executeScript("tinyMCE.activeEditor.insertContent('This is <em>RICH</em> content')");
140+
```
141+
142+
Note that if you use the TinyMCE API method `setContent`, this will fail to update the Angular model
143+
with the entered content, so use `insertContent` instead.
144+
145+
----
81146

82-
If you add the ng-model directive to same the element as ui-tinymce then the text in the editor is automatically synchronized with the model value.
83147

84-
_The ui-tinymce directive stores and expects the model value to be a standard javascript tinymce object._
148+
# Contributing to the project
85149

150+
We are always looking for the quality contributions! Please check the [CONTRIBUTING.md](CONTRIBUTING.md) for the contribution guidelines.

bower.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-ui-tinymce",
3-
"version": "0.0.5",
3+
"version": "0.0.18",
44
"description": "This directive allows you to TinyMCE in your form.",
55
"author": "https://github.com/angular-ui/ui-tinymce/graphs/contributors",
66
"license": "MIT",
@@ -16,10 +16,10 @@
1616
"package.json"
1717
],
1818
"dependencies": {
19-
"angular": "~1.x",
20-
"tinymce": "https://github.com/jozzhart/tinymce.git#4.0.25"
19+
"angular": ">=1.4.0",
20+
"tinymce": "~4.5.1"
2121
},
2222
"devDependencies": {
23-
"angular-mocks": "~1.x"
23+
"angular-mocks": "~1.4.x"
2424
}
2525
}

demo/demo.html

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,14 @@
1010
<script type="text/javascript" src="../bower_components/tinymce/tinymce.min.js"></script>
1111
<script type="text/javascript" src="../bower_components/angular/angular.js"></script>
1212
<script type="text/javascript" src="../src/tinymce.js"></script>
13+
<script type="text/javascript" src="demo.js"></script>
1314
</head>
14-
<body ng-app="ui.tinymce">
15+
<body ng-app="ui.tinymce" ng-controller="DemoCtrl as demo">
1516
<form method="post">
16-
<textarea id="tinymce" ui-tinymce ng-model="tinymce"></textarea>
17+
<textarea ui-tinymce
18+
ng-model="demo.tinymce"
19+
ng-change="demo.updateHtml()"></textarea>
1720
</form>
18-
<div>{{tinymce}}</div>
21+
<div ng-bind-html="demo.tinymceHtml"></div>
1922
</body>
20-
</html>
23+
</html>

demo/demo.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
angular.module('ui.tinymce')
2+
.controller('DemoCtrl', function($sce) {
3+
var ctrl = this;
4+
5+
this.updateHtml = function() {
6+
ctrl.tinymceHtml = $sce.trustAsHtml(ctrl.tinymce);
7+
};
8+
});

dist/tinymce.min.js

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

gruntFile.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ module.exports = function (grunt) {
33
require('load-grunt-tasks')(grunt);
44

55
// Default task.
6-
grunt.registerTask('default', ['jshint', 'karma']);
6+
grunt.registerTask('default', ['jshint', 'karma', 'uglify']);
77

88
var karmaConfig = function(configFile, customOptions) {
99
var options = { configFile: configFile, singleRun: true };
@@ -22,7 +22,6 @@ module.exports = function (grunt) {
2222
curly:true,
2323
eqeqeq:true,
2424
immed:true,
25-
latedef:true,
2625
newcap:true,
2726
noarg:true,
2827
sub:true,
@@ -35,6 +34,13 @@ module.exports = function (grunt) {
3534
options: {
3635
dest: 'CHANGELOG.md'
3736
}
37+
},
38+
uglify: {
39+
dist: {
40+
files: {
41+
'dist/tinymce.min.js': ['src/tinymce.js']
42+
}
43+
}
3844
}
3945
});
4046

package.json

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
11
{
22
"name": "angular-ui-tinymce",
3-
"version": "0.0.5",
4-
"description": "This directive allows you to add a tinymce to your form elements.",
3+
"version": "0.0.19",
4+
"descriptin": "This directive allows you to add a tinymce to your form elements.",
55
"author": "https://github.com/angular-ui/ui-tinymce/graphs/contributors",
66
"license": "MIT",
77
"homepage": "http://angular-ui.github.com",
88
"main": "src/tinymce.js",
99
"dependencies": {},
1010
"devDependencies": {
11-
"grunt": "~0.4.4",
12-
"grunt-karma": "~0.8.2",
13-
"grunt-contrib-jshint": "~0.10.0",
11+
"grunt": "~1.0.1",
12+
"grunt-contrib-jshint": "1.0.0",
13+
"grunt-contrib-uglify": "~0.11.1",
1414
"grunt-conventional-changelog": "~1.0.0",
15-
"karma-jasmine": "~0.2.2",
15+
"grunt-karma": "2.0.0",
16+
"jasmine-core": "~2.3.4",
17+
"karma": "0.13.22",
1618
"karma-chrome-launcher": "~0.1.3",
1719
"karma-firefox-launcher": "~0.1.3",
20+
"karma-jasmine": "~0.3.5",
1821
"load-grunt-tasks": "~0.2.0"
1922
},
2023
"scripts": {},

0 commit comments

Comments
 (0)