Initial commit

This commit is contained in:
Senad Uka
2018-06-11 11:09:35 +02:00
commit ed7df7b11f
1954 changed files with 483354 additions and 0 deletions

View File

@@ -0,0 +1,35 @@
{
"name": "angular-ui-tinymce",
"version": "0.0.19",
"description": "This directive allows you to TinyMCE in your form.",
"author": "https://github.com/angular-ui/ui-tinymce/graphs/contributors",
"license": "MIT",
"homepage": "http://angular-ui.github.com",
"main": "./src/tinymce.js",
"ignore": [
"**/.*",
"node_modules",
"components",
"test*",
"demo*",
"gruntFile.js",
"package.json"
],
"dependencies": {
"angular": ">=1.4.0",
"tinymce": "~4.5.1"
},
"devDependencies": {
"angular-mocks": "~1.4.x"
},
"_release": "0.0.19",
"_resolution": {
"type": "version",
"tag": "v0.0.19",
"commit": "30434e227768c47cdcf97b552cdbc4f12fad86da"
},
"_source": "https://github.com/angular-ui/ui-tinymce.git",
"_target": "^0.0.19",
"_originalSource": "angular-ui-tinymce",
"_direct": true
}

View File

@@ -0,0 +1,45 @@
## Got a question or problem?
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`.
StackOverflow is a much better place to ask questions since:
* there are hundreds of people willing to help on StackOverflow
* questions and answers stay available for public viewing so your question / answer might help someone else
* SO voting system assures that the best answers are prominently visible.
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.
## You think you've found a bug?
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:
* version of AngularJS used
* version of this library that you are using
* 3rd-party libraries used, if any
* and most importantly - a use-case that fails
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.
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.
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.
## You want to contribute some code?
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:
* Please open all pull requests against the `master` branch.
* Please assure that you are submitting quality code, specifically make sure that:
* You have accompanying tests and all the tests are passing. See testing below.
* 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
* You are using 2 space indentation
* Your commits conform to the conventions established [here](https://github.com/stevemao/conventional-changelog-angular/blob/master/convention.md)
## Testing
To run tests:
```bash
$ npm install
$ bower install
$ grunt
```

View File

@@ -0,0 +1,21 @@
The MIT License
Copyright (c) 2012 the AngularUI Team, http://angular-ui.github.com
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

View File

@@ -0,0 +1,150 @@
# UI Tinymce - [AngularJS](http://angularjs.org/) directive for [TinyMCE](http://tinymce.com).
[![Build Status](https://travis-ci.org/angular-ui/ui-tinymce.png)](https://travis-ci.org/angular-ui/ui-tinymce)
[![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)
# Call for Maintainer
This library is looking for a maintainer. If you feel up to the task please open an issue indicating so.
# Requirements
- AngularJS 1.4.x or higher and it has been tested with Angular 1.4.8.
- TinyMCE 4
# Testing
We use karma and jshint to ensure the quality of the code. The easiest way to run these checks is to use grunt:
```
npm install -g grunt-cli
npm install
bower install
grunt
```
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`
# Usage
We use [bower](http://twitter.github.com/bower/) for dependency management. Add
```
dependencies: {
"angular-ui-tinymce": "latest"
}
```
To your `bower.json` file. Then run
```
bower install
```
This will copy the ui-tinymce files into your `components` folder, along with its dependencies. Load the script files in your application:
```html
<script type="text/javascript" src="app/bower_components/tinymce/tinymce.js"></script>
<script type="text/javascript" src="app/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="app/bower_components/angular-ui-tinymce/src/tinymce.js"></script>
```
Add the tinymce module as a dependency to your application module:
```javascript
var myAppModule = angular.module('MyApp', ['ui.tinymce'])
```
Apply the directive to your form elements:
```html
<form method="post">
<textarea ui-tinymce ng-model="tinymceModel"></textarea>
</form>
```
**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.
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.
## Working with ng-model
The ui-tinymce directive plays nicely with the ng-model directive such as ng-required.
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.
_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`)._
**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.
> 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.
## Options
The directive supports all of the standard TinyMCE initialization options as listed [here](http://www.tinymce.com/wiki.php/Configuration).
Use the [setup](https://www.tinymce.com/docs/configure/integration-and-setup/#setup) function to bind different events:
```javascript
scope.tinymceOptions = {
setup: function(editor) {
//Focus the editor on load
$timeout(function(){ editor.focus(); });
editor.on("init", function() {
...
});
editor.on("click", function() {
...
});
}
};
```
By default all TinyMCE content that is set to `ngModel` will be whitelisted by `$sce`.
In addition, it supports these additional optional options
- `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)
- `baseURL` This will set [baseURL property on the EditorManager](https://www.tinymce.com/docs/api/class/tinymce.editormanager/)
- `debounce` This will debounce the model update which helps with performance of editors with large text. Defaults to true.
This option is only supported when present on the `uiTinymceConfig` global injectable - this injectable needs to be an object.
- `baseUrl` Sets the base url used by tinymce asset loading
```javascript
myAppModule.controller('MyController', function($scope) {
$scope.tinymceOptions = {
onChange: function(e) {
// put logic here for keypress and cut/paste changes
},
inline: false,
plugins : 'advlist autolink link image lists charmap print preview',
skin: 'lightgray',
theme : 'modern'
};
});
```
```html
<form method="post">
<textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea>
</form>
```
## Testing your Application (Protractor)
If you are testing your application using Protractor and you wish to be able to automate the
contribution of rich text content as part of the tests, use the TinyMCE API method `insertContent`
in conjunction with the WebDriver's `executeScript` method, like this:
```javascript
browser.driver.executeScript("tinyMCE.activeEditor.insertContent('This is <em>RICH</em> content')");
```
Note that if you use the TinyMCE API method `setContent`, this will fail to update the Angular model
with the entered content, so use `insertContent` instead.
----
# Contributing to the project
We are always looking for the quality contributions! Please check the [CONTRIBUTING.md](CONTRIBUTING.md) for the contribution guidelines.

View File

@@ -0,0 +1,25 @@
{
"name": "angular-ui-tinymce",
"version": "0.0.18",
"description": "This directive allows you to TinyMCE in your form.",
"author": "https://github.com/angular-ui/ui-tinymce/graphs/contributors",
"license": "MIT",
"homepage": "http://angular-ui.github.com",
"main": "./src/tinymce.js",
"ignore": [
"**/.*",
"node_modules",
"components",
"test*",
"demo*",
"gruntFile.js",
"package.json"
],
"dependencies": {
"angular": ">=1.4.0",
"tinymce": "~4.5.1"
},
"devDependencies": {
"angular-mocks": "~1.4.x"
}
}

View File

@@ -0,0 +1 @@
angular.module("ui.tinymce",[]).value("uiTinymceConfig",{}).directive("uiTinymce",["$rootScope","$compile","$timeout","$window","$sce","uiTinymceConfig","uiTinymceService",function(a,b,c,d,e,f,g){return f=f||{},f.baseUrl&&(tinymce.baseURL=f.baseUrl),{require:["ngModel","^?form"],priority:599,link:function(h,i,j,k){function l(a){a?(m(),o&&o.getBody().setAttribute("contenteditable",!1)):(m(),o&&!o.settings.readonly&&o.getDoc()&&o.getBody().setAttribute("contenteditable",!0))}function m(){o||(o=tinymce.get(j.id))}if(d.tinymce){var n,o,p=k[0],q=k[1]||null,r={debounce:!0},s=function(b){var c=b.getContent({format:r.format}).trim();c=e.trustAsHtml(c),p.$setViewValue(c),a.$$phase||h.$digest()},t=g.getUniqueId();j.$set("id",t),n={},angular.extend(n,h.$eval(j.uiTinymce));var u=function(a){var b;return function(d){c.cancel(b),b=c(function(){return function(a){a.isDirty()&&(a.save(),s(a))}(d)},a)}}(400),v={setup:function(b){b.on("init",function(){p.$render(),p.$setPristine(),p.$setUntouched(),q&&q.$setPristine()}),b.on("ExecCommand change NodeChange ObjectResized",function(){return r.debounce?void u(b):(b.save(),void s(b))}),b.on("blur",function(){i[0].blur(),p.$setTouched(),a.$$phase||h.$digest()}),b.on("remove",function(){i.remove()}),f.setup&&f.setup(b,{updateView:s}),n.setup&&n.setup(b,{updateView:s})},format:n.format||"html",selector:"#"+j.id};angular.extend(r,f,n,v),c(function(){r.baseURL&&(tinymce.baseURL=r.baseURL);var a=tinymce.init(r);a&&"function"==typeof a.then?a.then(function(){l(h.$eval(j.ngDisabled))}):l(h.$eval(j.ngDisabled))}),p.$formatters.unshift(function(a){return a?e.trustAsHtml(a):""}),p.$parsers.unshift(function(a){return a?e.getTrustedHtml(a):""}),p.$render=function(){m();var a=p.$viewValue?e.getTrustedHtml(p.$viewValue):"";o&&o.getDoc()&&(o.setContent(a),o.fire("change"))},j.$observe("disabled",l),h.$on("$tinymce:refresh",function(a,c){var d=j.id;if(angular.isUndefined(c)||c===d){var e=i.parent(),f=i.clone();f.removeAttr("id"),f.removeAttr("style"),f.removeAttr("aria-hidden"),tinymce.execCommand("mceRemoveEditor",!1,d),e.append(b(f)(h))}}),h.$on("$destroy",function(){m(),o&&(o.remove(),o=null)})}}}}]).service("uiTinymceService",[function(){var a=function(){var a="ui-tinymce",b=0,c=function(){return b++,a+"-"+b};return{getUniqueId:c}};return new a}]);

View File

@@ -0,0 +1,235 @@
/**
* Binds a TinyMCE widget to <textarea> elements.
*/
angular.module('ui.tinymce', [])
.value('uiTinymceConfig', {})
.directive('uiTinymce', ['$rootScope', '$compile', '$timeout', '$window', '$sce', 'uiTinymceConfig', 'uiTinymceService', function($rootScope, $compile, $timeout, $window, $sce, uiTinymceConfig, uiTinymceService) {
uiTinymceConfig = uiTinymceConfig || {};
if (uiTinymceConfig.baseUrl) {
tinymce.baseURL = uiTinymceConfig.baseUrl;
}
return {
require: ['ngModel', '^?form'],
priority: 599,
link: function(scope, element, attrs, ctrls) {
if (!$window.tinymce) {
return;
}
var ngModel = ctrls[0],
form = ctrls[1] || null;
var expression, options = {
debounce: true
}, tinyInstance,
updateView = function(editor) {
var content = editor.getContent({format: options.format}).trim();
content = $sce.trustAsHtml(content);
ngModel.$setViewValue(content);
if (!$rootScope.$$phase) {
scope.$digest();
}
};
function toggleDisable(disabled) {
if (disabled) {
ensureInstance();
if (tinyInstance) {
tinyInstance.getBody().setAttribute('contenteditable', false);
}
} else {
ensureInstance();
if (tinyInstance && !tinyInstance.settings.readonly && tinyInstance.getDoc()) {
tinyInstance.getBody().setAttribute('contenteditable', true);
}
}
}
// fetch a unique ID from the service
var uniqueId = uiTinymceService.getUniqueId();
attrs.$set('id', uniqueId);
expression = {};
angular.extend(expression, scope.$eval(attrs.uiTinymce));
//Debounce update and save action
var debouncedUpdate = (function(debouncedUpdateDelay) {
var debouncedUpdateTimer;
return function(ed) {
$timeout.cancel(debouncedUpdateTimer);
debouncedUpdateTimer = $timeout(function() {
return (function(ed) {
if (ed.isDirty()) {
ed.save();
updateView(ed);
}
})(ed);
}, debouncedUpdateDelay);
};
})(400);
var setupOptions = {
// Update model when calling setContent
// (such as from the source editor popup)
setup: function(ed) {
ed.on('init', function() {
ngModel.$render();
ngModel.$setPristine();
ngModel.$setUntouched();
if (form) {
form.$setPristine();
}
});
// Update model when:
// - a button has been clicked [ExecCommand]
// - the editor content has been modified [change]
// - the node has changed [NodeChange]
// - an object has been resized (table, image) [ObjectResized]
ed.on('ExecCommand change NodeChange ObjectResized', function() {
if (!options.debounce) {
ed.save();
updateView(ed);
return;
}
debouncedUpdate(ed);
});
ed.on('blur', function() {
element[0].blur();
ngModel.$setTouched();
if (!$rootScope.$$phase) {
scope.$digest();
}
});
ed.on('remove', function() {
element.remove();
});
if (uiTinymceConfig.setup) {
uiTinymceConfig.setup(ed, {
updateView: updateView
});
}
if (expression.setup) {
expression.setup(ed, {
updateView: updateView
});
}
},
format: expression.format || 'html',
selector: '#' + attrs.id
};
// extend options with initial uiTinymceConfig and
// options from directive attribute value
angular.extend(options, uiTinymceConfig, expression, setupOptions);
// Wrapped in $timeout due to $tinymce:refresh implementation, requires
// element to be present in DOM before instantiating editor when
// re-rendering directive
$timeout(function() {
if (options.baseURL){
tinymce.baseURL = options.baseURL;
}
var maybeInitPromise = tinymce.init(options);
if(maybeInitPromise && typeof maybeInitPromise.then === 'function') {
maybeInitPromise.then(function() {
toggleDisable(scope.$eval(attrs.ngDisabled));
});
} else {
toggleDisable(scope.$eval(attrs.ngDisabled));
}
});
ngModel.$formatters.unshift(function(modelValue) {
return modelValue ? $sce.trustAsHtml(modelValue) : '';
});
ngModel.$parsers.unshift(function(viewValue) {
return viewValue ? $sce.getTrustedHtml(viewValue) : '';
});
ngModel.$render = function() {
ensureInstance();
var viewValue = ngModel.$viewValue ?
$sce.getTrustedHtml(ngModel.$viewValue) : '';
// instance.getDoc() check is a guard against null value
// when destruction & recreation of instances happen
if (tinyInstance &&
tinyInstance.getDoc()
) {
tinyInstance.setContent(viewValue);
// Triggering change event due to TinyMCE not firing event &
// becoming out of sync for change callbacks
tinyInstance.fire('change');
}
};
attrs.$observe('disabled', toggleDisable);
// This block is because of TinyMCE not playing well with removal and
// recreation of instances, requiring instances to have different
// selectors in order to render new instances properly
var unbindEventListener = scope.$on('$tinymce:refresh', function(e, id) {
var eid = attrs.id;
if (angular.isUndefined(id) || id === eid) {
var parentElement = element.parent();
var clonedElement = element.clone();
clonedElement.removeAttr('id');
clonedElement.removeAttr('style');
clonedElement.removeAttr('aria-hidden');
tinymce.execCommand('mceRemoveEditor', false, eid);
parentElement.append($compile(clonedElement)(scope));
unbindEventListener();
}
});
scope.$on('$destroy', function() {
ensureInstance();
if (tinyInstance) {
tinyInstance.remove();
tinyInstance = null;
}
});
function ensureInstance() {
if (!tinyInstance) {
tinyInstance = tinymce.get(attrs.id);
}
}
}
};
}])
.service('uiTinymceService', [
/**
* A service is used to create unique ID's, this prevents duplicate ID's if there are multiple editors on screen.
*/
function() {
var UITinymceService = function() {
var ID_ATTR = 'ui-tinymce';
// uniqueId keeps track of the latest assigned ID
var uniqueId = 0;
// getUniqueId returns a unique ID
var getUniqueId = function() {
uniqueId ++;
return ID_ATTR + '-' + uniqueId;
};
// return the function as a public method of the service
return {
getUniqueId: getUniqueId
};
};
// return a new instance of the service
return new UITinymceService();
}
]);