CKEditor (5) - Как удалить выбранный виджет таблицы?

Question

Мне нужно удалить виджет, который используется для выбора таблицы, чтобы предотвратить выбор и, возможно, удаление всей таблицы впоследствии.

Я просто хочу показать и отредактировать данные таблицы, которые я получаю в необработанной HTML-строке, без каких-либо других функций, панелей инструментов, виджетов, ...

Скрыть этот виджет можно, удалив классимена, но я надеюсь, что есть лучший способ сделать это.

Я предполагаю, что этот виджет является частью плагина Table.

Я хочу получить более четкий вид, например:

Я использую "react": "^16.8.3" и "@ckeditor/ckeditor5-react": "^1.1.3".

Это моя конфигурация компонента CKEditor React.

import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
...

<CKEditor
    editor={ClassicEditor}
    config={{
        toolbar: null          // To remove default CKEditor toolbar
    }}
    data={tableContent}
    disabled={disabled}
/>

Answer 1

Мы не поддерживаем эту функциональность (это невозможно сделать с помощью конфигурации редактора), однако есть два направления / идеи, на которые мы могли бы указать, если вы хотите попробовать написать это самостоятельно.

1. Когда таблица будет выбрана, вы можете включить режим только для чтения. Это должно предотвратить любые изменения, кроме перемещения выбора в другое место. Выключите режим только для чтения при изменении выбора.

2. Аналогично, когда таблица выбрана, вы можете отключить DeleteCommand.

Чтобы проверить, выбрана ли таблица, необходимо проверить, содержит ли выбор модели именно элемент таблицы.

Ниже я приведу ссылку на важную часть документации по API:

• editor.model.document.selection
• editor.isReadOnly
• Command класс - проверка forceDisabled и clearForceDisabled методы
• editor.commands - чтобы получить команду

Answer 2

В конце концов, я просто спрятал виджет.Это не полностью предотвращает выбор, но выглядит чище, а пространство для «выбора» очень узкое.

.ck.ck-widget__selection-handler {
  display: none;
}

.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred > figure,
.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-focused > figure {
  margin: 16px 0;
}