React-Bootstrap拖拽模态框内嵌CKEditor文本选中异常问题求解

方法一：利用react-draggable的cancel属性（推荐） #

react-draggable本身提供了cancel配置项，用来指定哪些元素区域内不触发拖拽行为。直接把CKEditor的容器选择器传给它就能解决问题：

修改Modal的dialogAs配置，给Draggable添加cancel属性：

<Modal 
  className="no-transition" 
  dialogAs={ p => (
    <Draggable cancel=".ck-editor">
      <ModalDialog { ...p }></ModalDialog>
    </Draggable>
  )} 
  show={ props.show } 
  size="lg"
>
  ...
  <CKEditor 
    config={{ height: '500px' }} 
    editor={ ClassicEditor } 
    data={ editorState } 
    onReady={ editor => onEditorReady(editor) }
  />
  ...
</Modal>

这里用.ck-editor作为取消拖拽的选择器，CKEditor的根容器默认带有这个类，能确保鼠标在编辑器区域内操作时，不会触发模态框拖拽。如果这个选择器不生效，可以换成更精确的.ck-content（编辑器的内容区域类）。

方法二：在CKEditor区域阻止mousedown事件冒泡 #

如果方法一没效果，直接在CKEditor的内容容器上阻止mousedown事件冒泡也能解决问题——因为react-draggable是通过监听mousedown来启动拖拽逻辑的，阻止这个事件传递就能避免触发拖拽：

修改你的onEditorReady函数：

function onEditorReady(editor) {        
  const ckContentEl = editor.ui.view.editable.element; // 直接从editor实例获取内容元素，比querySelector更可靠
  
  if (ckContentEl) {
    // 阻止mousedown事件冒泡，不影响文本选中
    ckContentEl.addEventListener("mousedown", (e) => {
      e.stopPropagation();
    });
  }

  editorRef.current = editor;
}

这里直接通过editor实例获取编辑区域元素，比document.querySelector更准确，能避免DOM结构变化导致选择器失效的问题。

为什么你的原方法无效？ #

你之前监听的dragstart是**元素拖拽（比如拖入图片）**的事件，而文本选中的拖拽属于鼠标选择行为，触发的是mousedown、mousemove这类鼠标事件，所以dragstart根本不会被触发，自然无法阻止模态框拖拽。

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