如何在Tinymce 5.3.1中实现可拖拽的自定义对话框

嘿，我之前也遇到过TinyMCE对话框拖拽失效的问题，结合你提到的4.8.1版本默认支持拖拽的情况，给你几个实用的解决思路：

1. 检查并启用openUrl的拖拽配置 #

很多时候，新版本的TinyMCE可能默认关闭了openUrl对话框的拖拽功能。你可以在调用openUrl时显式添加draggable: true参数，强制开启拖拽：

tinymce.activeEditor.windowManager.openUrl({
  url: '你的目标URL',
  title: '对话框标题',
  width: 800,
  height: 600,
  draggable: true // 关键配置，启用拖拽
});

这个参数在大多数TinyMCE版本中都是支持的，旧版本4.8.1默认就是true，新版本可能改成了默认false，手动开启即可。

2. 改用自定义对话框嵌入URL #

如果openUrl的默认配置无法满足需求，你可以直接用TinyMCE的windowManager.open()创建自定义对话框，嵌入iframe加载目标URL，同时强制开启拖拽：

tinymce.activeEditor.windowManager.open({
  title: '自定义可拖拽对话框',
  draggable: true, // 开启拖拽
  width: 800,
  height: 600,
  body: {
    type: 'panel',
    items: [
      {
        type: 'iframe',
        url: '你的目标URL',
        sandboxed: false // 根据需求决定是否启用沙箱模式
      }
    ]
  },
  buttons: [
    {
      type: 'cancel',
      text: '关闭'
    }
  ]
});

这种方式更灵活，完全由你控制对话框的所有属性，包括拖拽功能。

3. 检查CSS样式是否阻止了拖拽 #

有时候自定义主题或皮肤的CSS会覆盖TinyMCE默认的对话框样式，导致拖拽区域失效。你需要检查对话框头部的样式：

找到对话框头部的类.mce-window-header，确保它有以下样式：

.mce-window-header {
  cursor: move; /* 显示拖拽光标 */
  pointer-events: auto; /* 确保可以触发鼠标事件 */
}

如果存在pointer-events: none或者cursor: default这类样式，会直接阻止拖拽行为，修改回来即可。

4. 手动实现拖拽逻辑（兜底方案） #

如果以上方法都不生效，你可以用原生JS给对话框添加拖拽事件。监听对话框打开事件，然后给头部区域绑定拖拽逻辑：

// 监听对话框打开事件
tinymce.activeEditor.on('OpenWindow', function(e) {
  const dialog = e.target.getWin();
  const dialogEl = dialog.getEl();
  if (!dialogEl) return;

  const header = dialogEl.querySelector('.mce-window-header');
  if (!header) return;

  let isDragging = false;
  let startX, startY, initialLeft, initialTop;

  // 鼠标按下时记录初始位置
  header.addEventListener('mousedown', function(e) {
    isDragging = true;
    startX = e.clientX;
    startY = e.clientY;
    initialLeft = parseInt(dialogEl.style.left) || 0;
    initialTop = parseInt(dialogEl.style.top) || 0;
    e.preventDefault(); // 防止选中头部文本
  });

  // 鼠标移动时更新对话框位置
  document.addEventListener('mousemove', function(e) {
    if (!isDragging) return;
    const offsetX = e.clientX - startX;
    const offsetY = e.clientY - startY;
    dialogEl.style.left = `${initialLeft + offsetX}px`;
    dialogEl.style.top = `${initialTop + offsetY}px`;
  });

  // 鼠标松开时停止拖拽
  document.addEventListener('mouseup', function() {
    isDragging = false;
  });
});

这个方案不依赖TinyMCE的内置配置，完全自己实现拖拽逻辑，兼容性更好。

内容的提问来源于stack exchange，提问作者sunil20000