深入了解小部件内部

该 WidgetTypeAround 插件允许用户在小部件周围键入，在通常由于 Web 浏览器限制而无法放置光标的地方。虽然此功能提高了生产力和易于键入，但某些集成可能不需要或不需要它，例如

当功能的 UI 与集成冲突时。
当在小部件外部键入应该是不可能的（内容完全由小部件组成）时。
当某些小部件在文档中具有固定的位置，并且该位置永远不会改变时。

在接下来的部分中，您将了解如何配置 CKEditor 5 WYSIWYG 编辑器以满足这些特定需求。

# 隐藏插入小部件周围段落的按钮

摆脱围绕小部件类型按钮的最简单方法是使用 CSS 隐藏它们。将以下代码段放在应用程序中的任何位置，按钮将不再显示

.ck.ck-editor__editable .ck-widget .ck-widget__type-around__button {
    display: none;
}

如果您只想自定义围绕小部件类型的按钮，可以使用相同的 CSS 选择器来修改它们的外观或位置。

隐藏围绕小部件类型的按钮不会禁用该功能。用户仍然可以使用箭头键在单个小部件之前或之后激活光标并键入。了解如何禁用整个功能.

# 禁用整个功能

尽管 WidgetTypeAround 插件是小部件子系统的组成部分，并且每当编辑器功能使用小部件时（例如，对于图像或表格）默认情况下都会加载，您仍然可以动态禁用它。关闭此功能将隐藏小部件按钮并禁用其他行为，例如

当用户使用箭头键导航文档时，光标不会在小部件之前或之后呈现。
如果在选择小部件时按 Enter 和 Shift+Enter 键，将不再插入段落。

使用 forceDisabled() 插件的方法在动态情况下禁用它，如下面的代码段所示

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // The editor's configuration.
        // ...
    } )
    .then( editor => {
        const widgetTypeAroundPlugin = editor.plugins.get( 'WidgetTypeAround' );

        // Disable the widget type around plugin.
        widgetTypeAroundPlugin.forceDisabled( 'MyApplication' );
    } )
    .catch( err => {
        console.error( err.stack );
    } );

您始终可以使用以下代码段重新启用插件

widgetTypeAroundPlugin.clearForceDisabled( 'MyApplication' );

请参阅 API 文档以了解更多信息。

# 从默认处理程序中排除 DOM 事件

有时阻止默认处理程序处理事件可能很有用，例如在小部件中的 UIElement 中使用 React 组件，默认情况下，小部件本身想要控制所有内容。为了实现这一点，唯一要做的就是在元素或其祖先上添加一个 data-cke-ignore-events 属性，然后从该元素中的任何子元素触发的所有事件都将在默认处理程序中被忽略。

让我们看一个简短的示例

<div data-cke-ignore-events="true">
    <button>Click!</button>
</div>

在上面的模板中，从放置在包含 data-cke-ignore-events 属性的 <div> 中的按钮发出的事件将被默认事件处理程序忽略。

我们每天都在努力使我们的文档保持完整。您是否发现了过时的信息？是否缺少某些内容？请通过我们的问题跟踪器报告。

随着 42.0.0 版本的发布，我们重新编写了大部分文档以反映新的导入路径和功能。感谢您的反馈，帮助我们确保文档的准确性和完整性。

深入了解小部件内部

# 禁用围绕功能的小部件类型

# 隐藏插入小部件周围段落的按钮

# 禁用整个功能

# 从默认处理程序中排除 DOM 事件