diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js index a9d1cd1234..f1edb06f96 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js @@ -14,9 +14,14 @@ angular.module("umbraco") var alreadyDirty = false; function syncContent(editor){ editor.save(); + + //stop watching before we update the value + stopWatch(); angularHelper.safeApply($scope, function () { $scope.model.value = editor.getContent(); }); + //re-watch the value + startWatch(editor); if (!alreadyDirty) { //make the form dirty manually so that the track changes works, setting our model doesn't trigger @@ -27,6 +32,33 @@ angular.module("umbraco") } } + var unwatch = null; + + /** + * Starts a watch on the model value so that we can update TinyMCE if the model changes behind the scenes or from the server + * @param {any} editor + */ + function startWatch(editor) { + unwatch = $scope.$watch("model.value", function (newVal, oldVal) { + if (newVal !== oldVal) { + //update the display val again if it has changed from the server; + //uses an empty string in the editor when the value is null + editor.setContent(newVal || "", { format: 'raw' }); + + //we need to manually fire this event since it is only ever fired based on loading from the DOM, this + // is required for our plugins listening to this event to execute + editor.fire('LoadContent', null); + } + }); + } + + /** Stops the watch on model.value which is done anytime we are manually updating the model.value */ + function stopWatch() { + if (unwatch) { + unwatch(); + } + } + tinyMceService.configuration().then(function (tinyMceConfig) { //config value from general tinymce.config file @@ -341,6 +373,8 @@ angular.module("umbraco") }; }); + + startWatch(editor); }; /** Loads in the editor */ @@ -354,25 +388,11 @@ angular.module("umbraco") $scope.isLoading = false; - }, 200, false); + }, 200); } - - - loadTinyMce(); - - //here we declare a special method which will be called whenever the value has changed from the server - //this is instead of doing a watch on the model.value = faster - $scope.model.onValueChanged = function (newVal, oldVal) { - //update the display val again if it has changed from the server; - //uses an empty string in the editor when the value is null - tinyMceEditor.setContent(newVal || "", { format: 'raw' }); - //we need to manually fire this event since it is only ever fired based on loading from the DOM, this - // is required for our plugins listening to this event to execute - tinyMceEditor.fire('LoadContent', null); - }; - + //listen for formSubmitting event (the result is callback used to remove the event subscription) var unsubscribe = $scope.$on("formSubmitting", function () { //TODO: Here we should parse out the macro rendered content so we can save on a lot of bytes in data xfer @@ -389,6 +409,7 @@ angular.module("umbraco") tinyMceEditor.destroy() } }); + }); });