Yii2框架下ui-sortable表格内Imperavi编辑器点击无法获焦求助

I’ve run into similar conflicts between sortable components and rich text editors before, so let’s break down what’s happening and how to fix this cleanly:

The Root Cause #

The SortableGridView (from yii2-sortable-behavior) binds mousedown, mouseup, and click events to elements in sortable rows to handle drag-and-drop functionality. These events propagate down to the Imperavi editor’s .redactor-box container, interfering with the editor’s ability to capture focus and process user input. When you removed those events manually in Chrome DevTools, you eliminated the conflict directly.

Solutions (Ordered by Elegance & Reliability) #

1. Exclude Editor Elements from Sortable Interaction

The cleanest fix is to tell the Sortable component to ignore clicks on the Imperavi editor entirely. Most sortable libraries (including the one powering yii2-sortable-behavior) have a cancel option that lets you specify selectors for elements that shouldn’t trigger sorting.

Update your SortableGridView widget configuration to add this option:

<?= SortableGridView::widget([
    'dataProvider' => $dataProvider,
    'orderUrl' => ['order'],
    'options' => ['class' => 'table'],
    // Add this to exclude editor containers from sortable events
    'sortableOptions' => [
        'cancel' => '.redactor-box, .redactor-editor',
    ],
    'columns' => [
        // ... your existing column definitions ...
    ],
]); ?>

This way, the Sortable component won’t bind its interfering events to the editor’s containers, letting the editor handle focus and input normally.

2. Stop Event Propagation on the Editor Container

If adjusting the Sortable options doesn’t work, you can prevent the editor’s mouse events from bubbling up to the Sortable row. Add this JavaScript to your view:

$(document).on('mousedown mouseup click', '.redactor-box', function(e) {
    // Block the event from reaching the Sortable's row handlers
    e.stopPropagation();
});

This ensures that when you interact with the editor, the Sortable’s drag-and-drop logic doesn’t fire, so the editor can capture focus without interference.

3. Manually Remove Conflicting Events (Last Resort)

If the above methods fail, you can replicate what you did in DevTools by removing the conflicting events after the page loads. Note this is less reliable (the Sortable component might re-bind events later), but it works as a quick fix:

$(document).ready(function() {
    // Add a small delay to ensure both Sortable and Imperavi are fully initialized
    setTimeout(function() {
        $('.redactor-box').off('mousedown mouseup click');
    }, 100);
});

Why These Work #

All three approaches target the core conflict: the Sortable component’s mouse events were overriding the editor’s ability to capture focus. By either excluding the editor from Sortable’s scope, stopping event propagation, or removing the conflicting events, you let the Imperavi editor handle user input as intended.

内容的提问来源于stack exchange，提问作者white-imp