TinyMCE：编辑器中的居中对话框 window (WindowManager.open)

Question

当我在 tinyMce 中使用 editor.WindowManager.open 打开对话框 window 时，它位于屏幕中央。我希望它在编辑器中居中。

如何解决这个问题？我可以控制 window 位置吗？

Answer 1

我找到了一个解决方案，方法是在表单打开时将居中 CSS 动态添加到网页 Head。

在对话框的"editor.windowManager.open"函数中，我添加了这段代码：

id: 'xxx-dialog',                           
onopen: function() {                                
   // Forcibly center dialog                                
   if ($("head #added-xxx-dialog-CSS").length == 0) // only once
   {
      $("#xxx-dialog .mce-dragh").remove(); // disable dragging of dialog
      var mceHeight=$(".mce-tinymce").height();
      var mceTop=$(".mce-tinymce").position().top;
      var thisHeight=$("#xxx-dialog").height();
      var newTop=mceHeight/2+mceTop-thisHeight/2;
      $("head").append('<style id="added-xxx-dialog-CSS"
      type="text/css">#xxx-dialog {top:'+newTop+'px !important;}</style>');                                 
    }
}, // etc...

此代码仅使对话框垂直居中，因为在我的应用程序中，对话框无论如何都会自动水平居中，但很容易以相同的方式添加更多行以使其水平居中。

TinyMCE：编辑器中的居中对话框 window (WindowManager.open)

TinyMCE: Center dialog window (WindowManager.open) in Editor

html

javascript

tinymce

typescript

tinymce-4