带有CK编辑器的可拖式模态

Question

我有一个反应引导模式，其中包含一个CK编辑器组件(使用经典编辑器)。我想要使模式可拖，所以我使用的反应-拖拽库。

那部分运作得很好。问题是，当我试图通过拖动鼠标来选择CK编辑器中的文本时，文本不会被选中。相反，模式开始移动。

我需要弄清楚如何防止拖动事件为CK编辑器到达反应拖放组件。

我已经建立了这样的模式：

<Modal className="no-transition" dialogAs={ p => <Draggable><ModalDialog { ...p }></ModalDialog></Draggable> } show={ props.show } size="lg">

...
<CKEditor config={{ height: '500px' }} editor={ ClassicEditor } data={ editorState } onReady={ editor => onEditorReady(editor) }/>
...
</Modal>

在onEditorReady事件处理程序中，我试图拦截，然后停止拖动事件

function onEditorReady(editor) {        
    let el = document.querySelector(".ck-content");
        
    if(el) {
    el.addEventListener("dragstart", (e) => e.stopPropagation());
    }

    editorRef.current = editor;
}

然而，dragstart事件似乎从未真正触发过。在编辑器中选择文本时，是否有更好的方法来防止模式拖放？

Answer 1

好的，在发布这个问题的几分钟内，我看到可拖放组件的cancel属性可以设置为一个css类，当它匹配时，它将阻止它启动拖放。

我将cancel属性设置为.ck-editor，现在它允许选择文本。

Answer 2

您可以使用鼠标悬停在ckeditor上的焦点事件，生成一个防止响应拖放的标志。