From d963c70580d15bc0bfc1b6cf2a23a297121b8a51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 25 Sep 2019 15:38:05 +0200 Subject: [PATCH 1/6] using a timeout to ensure that placeholder element has been appended to document --- .../views/propertyeditors/rte/rte.controller.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) 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 f78eedab33..3bd26ab095 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 @@ -77,13 +77,17 @@ angular.module("umbraco") model: $scope.model, currentForm: angularHelper.getCurrentForm($scope) }); - + }; - + angular.extend(baseLineConfigObj, standardConfig); - /** Loads in the editor */ - tinymce.init(baseLineConfigObj); - + + //we need to add a timeout here, to wait for a redraw so TinyMCE can find its placeholder element. + $timeout(function () { + tinymce.init(baseLineConfigObj); + }, 150, false); + + //listen for formSubmitting event (the result is callback used to remove the event subscription) var unsubscribe = $scope.$on("formSubmitting", function () { if (tinyMceEditor !== undefined && tinyMceEditor != null && !$scope.isLoading) { From 351323ea20d48e6ee51a3579da6b6188d02bdcc7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 25 Sep 2019 15:55:50 +0200 Subject: [PATCH 2/6] Fixed toolbar to go on multiple lines in narrow spaces --- src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less index ba0b32bb0d..852f4411d5 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less @@ -654,6 +654,11 @@ overflow-y: hidden!important; } +// had to overwrite defaults from TinyMCE, needed for buttons panel to float to new line in narrow space. +.umb-grid .mce-container > div { + white-space: normal; +} + // MEDIA EDITOR // ------------------------- From 1bc7728b6951566008bf4064ccc775b72574a82d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 26 Sep 2019 10:39:20 +0200 Subject: [PATCH 3/6] Test for Bjarke --- .../src/views/propertyeditors/rte/rte.controller.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) 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 3bd26ab095..2de3618ddc 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 @@ -28,6 +28,13 @@ angular.module("umbraco") $scope.containerOverflow = editorConfig.mode === "distraction-free" ? (height ? "auto" : "inherit") : "inherit"; var promises = []; + + // we need to make sure that the element is initialized before we can init TinyMCE, because we find the placeholder by ID, so it needs to be appended to document before. + var initPromise = new Promise((resolve, reject) => { + this.$onInit = resolve; + }); + + promises.push(initPromise); //queue file loading tinyMceAssets.forEach(function (tinyJsAsset) { @@ -82,11 +89,7 @@ angular.module("umbraco") angular.extend(baseLineConfigObj, standardConfig); - //we need to add a timeout here, to wait for a redraw so TinyMCE can find its placeholder element. - $timeout(function () { - tinymce.init(baseLineConfigObj); - }, 150, false); - + tinymce.init(baseLineConfigObj); //listen for formSubmitting event (the result is callback used to remove the event subscription) var unsubscribe = $scope.$on("formSubmitting", function () { From 36914a1d710d073cf0892e581d59f738973d56fe Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Thu, 26 Sep 2019 10:17:26 +0100 Subject: [PATCH 4/6] Remove the old initEvents that is no longer used --- .../src/common/services/tinymce.service.js | 58 ------------------- 1 file changed, 58 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 9fa4167b65..87b440cd2b 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 @@ -217,64 +217,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(' { - var blobSrcUri = editor.dom.getAttrib(imageElement, "src"); - - // Find the same image uploaded (Should be in LocalStorage) - // May already exist in the editor as duplicate image - // OR added to the RTE, deleted & re-added again - // So lets fetch the tempurl out of localstorage for that blob URI item - var tmpLocation = localStorageService.get(`tinymce__${blobSrcUri}`) - - if(tmpLocation){ - sizeImageInEditor(editor, imageElement); - editor.dom.setAttrib(imageElement, "data-tmpimg", tmpLocation); - } - }); - - } - }); - } - function cleanupPasteData(plugin, args) { // Remove spans From b81b92ac640be2f062fb2d1c93f9e1657d2217fb Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Thu, 26 Sep 2019 10:19:23 +0100 Subject: [PATCH 5/6] Fixes up image upload bug - as this got refactored to an event. editor is now args.editor * Also adds in the code that was in the initEvent function that got missed in merge/refactor * Fix to use localStorageService & not native browser one --- .../src/common/services/tinymce.service.js | 35 ++++++++++++++++--- 1 file changed, 30 insertions(+), 5 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 87b440cd2b..a91e3d6ecc 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 @@ -1253,7 +1253,7 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s // Upload BLOB images (dragged/pasted ones) if(content.indexOf(' { + var blobSrcUri = args.editor.dom.getAttrib(imageElement, "src"); + + // Find the same image uploaded (Should be in LocalStorage) + // May already exist in the editor as duplicate image + // OR added to the RTE, deleted & re-added again + // So lets fetch the tempurl out of localstorage for that blob URI item + var tmpLocation = localStorageService.get(`tinymce__${blobSrcUri}`) + + if(tmpLocation){ + sizeImageInEditor(args.editor, imageElement); + args.editor.dom.setAttrib(imageElement, "data-tmpimg", tmpLocation); + } + }); + } }); From cb441389202f655e5e5c9fcb14a69516d32fa685 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 26 Sep 2019 11:23:19 +0200 Subject: [PATCH 6/6] using angular promise instead --- .../src/views/propertyeditors/rte/rte.controller.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 2de3618ddc..8ca698060a 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 @@ -30,12 +30,12 @@ angular.module("umbraco") var promises = []; // we need to make sure that the element is initialized before we can init TinyMCE, because we find the placeholder by ID, so it needs to be appended to document before. - var initPromise = new Promise((resolve, reject) => { + var initPromise = $q((resolve, reject) => { this.$onInit = resolve; }); promises.push(initPromise); - + //queue file loading tinyMceAssets.forEach(function (tinyJsAsset) { promises.push(assetsService.loadJs(tinyJsAsset, $scope));