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 class-检查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;
}