clean up init + move editor.uploadImages to service instead of specific implementation
This commit is contained in:
Niels Lyngsø
@@ -205,38 +205,6 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
|
||||
xhr.send(formData);
|
||||
}
|
||||
|
||||
function initEvents(editor){
|
||||
|
||||
editor.on('SetContent', function (e) {
|
||||
var content = e.content;
|
||||
|
||||
// Upload BLOB images (dragged/pasted ones)
|
||||
if(content.indexOf('<img src="blob:') > -1){
|
||||
|
||||
editor.uploadImages(function(data) {
|
||||
// Once all images have been uploaded
|
||||
data.forEach(function(item) {
|
||||
// Select img element
|
||||
var img = item.element;
|
||||
|
||||
// Get img src
|
||||
var imgSrc = img.getAttribute("src");
|
||||
var tmpLocation = localStorage.getItem(`tinymce__${imgSrc}`);
|
||||
|
||||
// Select the img & add new attr which we can search for
|
||||
// When its being persisted in RTE property editor
|
||||
// To create a media item & delete this tmp one etc
|
||||
tinymce.activeEditor.$(img).attr({ "data-tmpimg": tmpLocation });
|
||||
|
||||
// We need to remove the image from the cache, otherwise we can't handle if we upload the exactly
|
||||
// same image twice
|
||||
tinymce.activeEditor.editorUpload.blobCache.removeByUri(imgSrc);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
/**
|
||||
@@ -259,7 +227,7 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
|
||||
|
||||
var tinyMceConfig = result[0];
|
||||
var styles = result[1];
|
||||
|
||||
|
||||
var toolbars = getToolbars(args.toolbar, tinyMceConfig);
|
||||
|
||||
var plugins = _.map(tinyMceConfig.plugins, function (plugin) {
|
||||
@@ -300,7 +268,7 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
|
||||
|
||||
//create a baseline Config to exten upon
|
||||
var config = {
|
||||
selector: "#" + args.htmlId,
|
||||
//selector: "#" + args.htmlId,
|
||||
theme: modeTheme,
|
||||
//skin: "umbraco",
|
||||
inline: modeInline,
|
||||
@@ -333,10 +301,17 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
|
||||
|
||||
images_upload_handler: uploadImageHandler,
|
||||
automatic_uploads: false,
|
||||
images_replace_blob_uris: false,
|
||||
init_instance_callback: initEvents
|
||||
images_replace_blob_uris: false
|
||||
};
|
||||
|
||||
|
||||
if (args.htmlId) {
|
||||
config.selector = "#" + args.htmlId;
|
||||
} else if (args.target) {
|
||||
config.target = args.target;
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (tinyMceConfig.customConfig) {
|
||||
|
||||
//if there is some custom config, we need to see if the string value of each item might actually be json and if so, we need to
|
||||
@@ -372,7 +347,7 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
|
||||
angular.extend(config, tinyMceConfig.customConfig);
|
||||
}
|
||||
|
||||
return $q.when(config);
|
||||
return config;
|
||||
|
||||
});
|
||||
|
||||
@@ -1209,13 +1184,46 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
|
||||
startWatch();
|
||||
}
|
||||
|
||||
args.editor.on('init', function (e) {
|
||||
args.editor.on('SetContent', function (e) {
|
||||
var content = e.content;
|
||||
|
||||
// Upload BLOB images (dragged/pasted ones)
|
||||
if(content.indexOf('<img src="blob:') > -1){
|
||||
|
||||
editor.uploadImages(function(data) {
|
||||
// Once all images have been uploaded
|
||||
data.forEach(function(item) {
|
||||
// Select img element
|
||||
var img = item.element;
|
||||
|
||||
// Get img src
|
||||
var imgSrc = img.getAttribute("src");
|
||||
var tmpLocation = localStorage.getItem(`tinymce__${imgSrc}`);
|
||||
|
||||
// Select the img & add new attr which we can search for
|
||||
// When its being persisted in RTE property editor
|
||||
// To create a media item & delete this tmp one etc
|
||||
tinymce.activeEditor.$(img).attr({ "data-tmpimg": tmpLocation });
|
||||
|
||||
// We need to remove the image from the cache, otherwise we can't handle if we upload the exactly
|
||||
// same image twice
|
||||
tinymce.activeEditor.editorUpload.blobCache.removeByUri(imgSrc);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
args.editor.on('init', function (e) {
|
||||
|
||||
if (args.model.value) {
|
||||
args.editor.setContent(args.model.value);
|
||||
}
|
||||
|
||||
//enable browser based spell checking
|
||||
args.editor.getBody().setAttribute('spellcheck', true);
|
||||
|
||||
//start watching the value
|
||||
startWatch();
|
||||
});
|
||||
|
||||
args.editor.on('Change', function (e) {
|
||||
@@ -1360,8 +1368,6 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
|
||||
editorService.open(aceEditor);
|
||||
});
|
||||
|
||||
//start watching the value
|
||||
startWatch(args.editor);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
angular.module("umbraco")
|
||||
.controller("Umbraco.PropertyEditors.RTEController",
|
||||
function ($scope, $q, assetsService, $timeout, tinyMceService, angularHelper, tinyMceAssets) {
|
||||
function ($scope, $q, assetsService, $timeout, tinyMceService, angularHelper, tinyMceAssets, $element) {
|
||||
|
||||
// TODO: A lot of the code below should be shared between the grid rte and the normal rte
|
||||
|
||||
$scope.isLoading = true;
|
||||
|
||||
var editorNode = $element[0].querySelector('.umb-rte-editor');
|
||||
|
||||
//To id the html textarea we need to use the datetime ticks because we can have multiple rte's per a single property alias
|
||||
// because now we have to support having 2x (maybe more at some stage) content editors being displayed at once. This is because
|
||||
@@ -38,7 +40,7 @@ angular.module("umbraco")
|
||||
var tinyMceEditor = null;
|
||||
|
||||
promises.push(tinyMceService.getTinyMceEditorConfig({
|
||||
htmlId: $scope.textAreaHtmlId,
|
||||
target: editorNode,
|
||||
stylesheets: editorConfig.stylesheets,
|
||||
toolbar: editorConfig.toolbar,
|
||||
mode: editorConfig.mode
|
||||
@@ -46,7 +48,7 @@ angular.module("umbraco")
|
||||
|
||||
//wait for queue to end
|
||||
$q.all(promises).then(function (result) {
|
||||
|
||||
|
||||
var standardConfig = result[promises.length - 1];
|
||||
|
||||
if (height !== null) {
|
||||
@@ -57,10 +59,7 @@ angular.module("umbraco")
|
||||
var baseLineConfigObj = {
|
||||
maxImageSize: editorConfig.maxImageSize,
|
||||
width: width,
|
||||
height: height,
|
||||
init_instance_callback: function(editor){
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
height: height
|
||||
};
|
||||
|
||||
angular.extend(baseLineConfigObj, standardConfig);
|
||||
@@ -69,7 +68,18 @@ angular.module("umbraco")
|
||||
|
||||
//set the reference
|
||||
tinyMceEditor = editor;
|
||||
|
||||
|
||||
//$scope.isLoading = false;
|
||||
|
||||
tinyMceEditor.on('init', function (e) {
|
||||
$timeout(function () {
|
||||
console.log(editor);
|
||||
//editor.editorContainer.style.display = 'block'
|
||||
//editorNode.style.display = 'block'
|
||||
$scope.isLoading = false;
|
||||
}, 1000)
|
||||
});
|
||||
|
||||
//initialize the standard editor functionality for Umbraco
|
||||
tinyMceService.initializeEditor({
|
||||
editor: editor,
|
||||
@@ -80,16 +90,7 @@ angular.module("umbraco")
|
||||
};
|
||||
|
||||
/** Loads in the editor */
|
||||
function loadTinyMce() {
|
||||
|
||||
//we need to add a timeout here, to force a redraw so TinyMCE can find
|
||||
//the elements needed
|
||||
$timeout(function () {
|
||||
tinymce.init(baseLineConfigObj);
|
||||
}, 200);
|
||||
}
|
||||
|
||||
loadTinyMce();
|
||||
tinymce.init(baseLineConfigObj);
|
||||
|
||||
//listen for formSubmitting event (the result is callback used to remove the event subscription)
|
||||
var unsubscribe = $scope.$on("formSubmitting", function () {
|
||||
|
||||
Reference in New Issue
Block a user