fix: iframe - "resizing" controller position

JiHong88 · Oct 30, 2020 · 1195ec5 · 1195ec5
1 parent 810d83b
commit 1195ec5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/src/assets/css/suneditor.css b/src/assets/css/suneditor.css
@@ -353,7 +353,7 @@
 
 /* controller - resizing(image, iframe) */
 .sun-editor .se-controller-resizing {margin-top:-50px !important; padding:0; font-size:14px; font-style:normal; font-weight:normal; line-height:1.42857143;}
-.sun-editor .se-controller-resizing .se-btn-group .se-btn-group-sub.se-resizing-align-list {left:57px; width:74px;}
+.sun-editor .se-controller-resizing .se-btn-group .se-btn-group-sub.se-resizing-align-list {width:74px;}
 .sun-editor .se-resizing-container {position:absolute; display:none; outline:1px solid #3f9dff; background-color:transparent;}
 .sun-editor .se-resizing-container .se-modal-resize {position:absolute; display:inline-block; background-color:#3f9dff; opacity:0.3;}
 .sun-editor .se-resizing-container .se-resize-dot {position:absolute; top:0px; left:0px; width:100%; height:100%}

diff --git a/src/plugins/modules/resizing.js b/src/plugins/modules/resizing.js
@@ -473,7 +473,14 @@
             if (this.currentControllerName !== plugin) {
                 this.util.setDisabledButtons(true, this.resizingDisabledButtons);
                 resizeContainer.style.display = 'block';
-                this.setControllerPosition(contextResizing.resizeButton, resizeContainer, 'bottom', {left: 0, top: 50});
+
+                const addOffset = {left: 0, top: 50};
+                if (this.context.options.iframe) {
+                    addOffset.left -= this.context.element.wysiwygFrame.parentElement.offsetLeft;
+                    addOffset.top -= this.context.element.wysiwygFrame.parentElement.offsetTop;
+                }
+
+                this.setControllerPosition(contextResizing.resizeButton, resizeContainer, 'bottom', addOffset);
                 this.controllersOn(resizeContainer, contextResizing.resizeButton, this.util.setDisabledButtons.bind(this, false, this.resizingDisabledButtons), targetElement, plugin);
             }
 
@@ -498,7 +505,10 @@
          * @description Open align submenu of module
          */
         openAlignMenu: function () {
-            this.util.addClass(this.context.resizing.alignButton, 'on');
+            const alignButton = this.context.resizing.alignButton;
+            this.util.addClass(alignButton, 'on');
+            this.context.resizing.alignMenu.style.top = (alignButton.offsetTop + alignButton.offsetHeight) + 'px';
+            this.context.resizing.alignMenu.style.left = (alignButton.offsetLeft - alignButton.offsetWidth / 2) + 'px';
             this.context.resizing.alignMenu.style.display = 'block';
 
             this.plugins.resizing._closeAlignMenu = function () {