yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Gets tinymce syncing with the view model

Browse Source
This commit is contained in:
Shannon
2018-08-23 18:11:16 +10:00
parent 7f734f19f0
commit e0610fc85d
1 changed files with 37 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js
View File

@@ -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()
}
});
});
});