时间戳

首页 > 解决方案 > TinyMCE：编辑器中的中心对话框窗口 (WindowManager.open)

javascript - TinyMCE：编辑器中的中心对话框窗口 (WindowManager.open)

问题描述

当我使用 editor.WindowManager.open 在 tinyMce 中打开对话框窗口时，它以屏幕为中心。我希望它在编辑器中居中。

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

标签： javascripthtmltypescripttinymcetinymce-4

解决方案

我通过在表单打开时将居中 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...

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

推荐阅读