less flickering on init of TinyMCE

src/Umbraco.Web.UI.Client/src/less/rte.less

@@ -9,12 +9,20 @@
 
 .umb-rte .mce-tinymce {
     box-shadow: none;
-    
 }
 
-.umb-rte .umb-rte-editor{
+.umb-rte .umb-rte-editor-con {
+    height: 24px;
+    visibility: hidden;
+}
+.umb-rte .umb-rte-editor {
     min-height: 100px;
 }
+.umb-rte.--initialized .umb-rte-editor-con {
+    height:auto;
+    min-height: 100px;
+    visibility: visible;
+}
 
 .umb-rte .mce-content-body {
     background-color: @white;

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

@@ -45,7 +45,7 @@ angular.module("umbraco")
                 toolbar: editorConfig.toolbar,
                 mode: editorConfig.mode
             }));
-
+            
             //wait for queue to end
             $q.all(promises).then(function (result) {
                 
@@ -61,23 +61,16 @@ angular.module("umbraco")
                     width: width,
                     height: height
                 };
-
-                angular.extend(baseLineConfigObj, standardConfig);
-
+                
                 baseLineConfigObj.setup = function (editor) {
-
+                    
                     //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
@@ -86,9 +79,10 @@ angular.module("umbraco")
                         model: $scope.model,
                         currentForm: angularHelper.getCurrentForm($scope)
                     });
-
+    
                 };
 
+                angular.extend(baseLineConfigObj, standardConfig);
                 /** Loads in the editor */
                 tinymce.init(baseLineConfigObj);
 

src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.html

@@ -1,6 +1,7 @@
-<div ng-controller="Umbraco.PropertyEditors.RTEController" class="umb-property-editor umb-rte">
+<div ng-controller="Umbraco.PropertyEditors.RTEController" class="umb-property-editor umb-rte" ng-class="{'--initialized': !isLoading}">
     <umb-load-indicator ng-if="isLoading"></umb-load-indicator>
 
-    <div ng-style="{ visibility :  isLoading ? 'hidden' : 'visible', width :containerWidth, height: containerHeight, overflow: containerOverflow}"
-         id="{{textAreaHtmlId}}" class="umb-rte-editor"></div>
+    <div class="umb-rte-editor-con">
+        <div class="umb-rte-editor"></div>
+    </div>
 </div>