From 12fd9baf3b33955ff1ad197f67d8b0cf3e982e56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Fri, 20 Sep 2019 09:08:28 +0200
Subject: [PATCH] clean up init + move editor.uploadImages to service instead
 of specific implementation

---
 .../src/common/services/tinymce.service.js    | 88 ++++++++++---------
 .../propertyeditors/rte/rte.controller.js     | 37 ++++----
 2 files changed, 66 insertions(+), 59 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js
index a28318519c..1b346a3bc6 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js
@@ -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);
         }
 
     };
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 16fa79f667..948a96df15 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
@@ -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 () {