<!DOCTYPE html>
<html data-ng-app="testApp">
<head>
<script src="https://code.angularjs.org/1.5.5/angular.js" data-semver="1.5.5" data-require="angularjs@1.5.5"></script>
<script data-require="tinymce@*" data-semver="4.3.3" src="https://cdn.tinymce.com/4/tinymce.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="ui-tinymce.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div data-ng-controller="testController as tc">
<textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea>
</div>
</body>
</html>
// Code goes here
angular.module("testApp", ['ui.tinymce']);
angular.module('testApp').value('tinymceGlobalOptions', {
theme: "modern",
plugins: [
"advlist autolink anchor autosave autoresize lists link image charmap preview hr pagebreak",
"searchreplace wordcount visualblocks visualchars code codesample fullscreen",
"insertdatetime media nonbreaking table directionality",
"emoticons template paste textcolor colorpicker save textpattern imagetools"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
toolbar2: "preview media save | forecolor backcolor emoticons | anchor | code codesample visualblocks | fullscreen template",
image_advtab: true,
templates: [{
title: 'Code Block',
content: '<pre><code></code></pre>'
}],
valid_elements: "*[*]",
invalid_elements: "",
verify_html: false,
apply_source_formatting: true,
autoresize_bottom_margin: 50,
autoresize_min_height: 350,
autoresize_on_init: true,
autosave_ask_before_unload: true,
default_link_target: "_blank",
browser_spellcheck: true,
relative_urls: false,
remove_script_host: true,
convert_urls: true,
save_onsavecallback: function () { alert('Saved'); }
});
angular.module('testApp').controller('testController', ['$scope', 'tinymceGlobalOptions', function($scope, tinymceGlobalOptions) {
$scope.tinymceOptions = tinymceGlobalOptions;
}]);
/* Styles go here */
/**
* Binds a TinyMCE widget to <textarea> elements.
*/
angular.module('ui.tinymce', [])
.value('uiTinymceConfig', {})
.directive('uiTinymce', ['$rootScope', '$compile', '$timeout', '$window', '$sce', 'uiTinymceConfig', function($rootScope, $compile, $timeout, $window, $sce, uiTinymceConfig) {
uiTinymceConfig = uiTinymceConfig || {};
var generatedIds = 0;
var ID_ATTR = 'ui-tinymce';
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.getBody().setAttribute('contenteditable', true);
}
}
}
// generate an ID
attrs.$set('id', ID_ATTR + '-' + generatedIds++);
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;
}
tinymce.init(options);
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
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));
}
});
scope.$on('$destroy', function() {
ensureInstance();
if (tinyInstance) {
tinyInstance.remove();
tinyInstance = null;
}
});
function ensureInstance() {
if (!tinyInstance) {
tinyInstance = tinymce.get(attrs.id);
}
}
}
};
}]);