与 CSS 框架的兼容性

CKEditor 5 与大多数流行的 CSS 框架兼容。但是，要与其中一些框架正确集成，可能需要额外的调整。这主要是因为

• CSS 框架通常在其样式表中使用更高的 CSS 特定性 并覆盖默认的编辑器样式，从而扭曲用户界面。
• 各种 UI 框架的模态组件在其样式中使用高 z-index 值，并在 CKEditor 5 的 UI 上方渲染（覆盖）。
• 框架模态框使用积极的焦点管理策略，这会破坏富文本编辑器中的输入字段（例如，链接输入）。

在本指南中，您将学习如何解决这些集成问题，并将 CKEditor 5 所见即所得编辑器与最流行的前端框架一起使用。

# 与 Bootstrap 的兼容性

# Bootstrap 模态框

Bootstrap 模态框会覆盖富文本编辑器的 UI 并破坏输入字段。了解这一点后，您需要采取以下步骤才能使 CKEditor 5 在 Bootstrap 环境中正常工作

• 配置浮动编辑器 UI（例如，气球）的 z-index，使其显示在 Bootstrap 叠加层之上。
• 配置 Bootstrap，使其停止从富文本编辑器输入字段“窃取”焦点。

要解决第一个问题，请将以下样式添加到您的应用程序中

/*
 * Configure the z-index of the editor UI, so when inside a Bootstrap
 * modal, it will be rendered over the modal.
 */
:root {
    --ck-z-default: 100;
    --ck-z-panel: calc( var(--ck-z-default) + 999 );
}

将 focus: false 选项传递给 Bootstrap modal() 函数，以解决第二个问题

$( '#modal-container' ).modal( {
    focus: false
} );

查看 CKEditor 5 富文本编辑器与 Bootstrap 正确配合工作的演示.

# Bootstrap 表格样式

还有一个已知的 问题 涉及 Bootstrap 带来的表格样式，在编辑过程中会破坏表格（小部件）的布局。如果您在使用 Bootstrap 时不希望在已编辑的表格周围有任何额外的空间，请将以下样式添加到您的应用程序中

/*
 * Override the width of the table set by Bootstrap content styles.
 * See: https://github.com/ckeditor/ckeditor5/issues/3253.
 */
.ck-content .table {
    width: auto;
}

# 与 Foundation 的兼容性

CKEditor 5 需要对 UI 的 z-index 进行一些小的调整，才能与 Foundation（以及 Reveal 模态框）一起正常工作。

/*
 * Configure the z-index of the editor UI, so when inside a Reveal modal,
 * it will be rendered over the modal.
 */
:root {
    --ck-z-default: 100;
    --ck-z-panel: calc( var(--ck-z-default) + 999 );
}

查看 CKEditor 5 富文本编辑器与 Foundation 正确配合工作的演示.

# 与 Materialize 的兼容性

如果您想将 CKEditor 5 与 Materialize.css 一起使用，则需要采取以下步骤

• 配置浮动编辑器 UI 的基础 z-index，使其显示在 Materialize 模态框之上。
• 恢复默认的 .ck-input 类外观（因为 Materialize 会使用更高的特定性来覆盖它）。
• 恢复默认的 <ul> 和 <li> 外观（因为 Materialize 会覆盖它）。
• 配置模态框，使其停止从富文本编辑器输入字段“窃取”焦点。

使用以下 CSS 来解决 z-index 和选择器特定性问题

/*
 * Configure the z-index of the editor UI, so when inside a Materialize
 * modal, it will be rendered over the modal.
 */
:root {
    --ck-z-default: 100;
    --ck-z-panel: calc( var(--ck-z-default) + 999 );
}

/*
 * Bring back the default CKEditor 5 input appearance by overriding
 * high–specificity styles brought by materialize.css.
 *
 * See: https://github.com/Dogfalo/materialize/blob/v1-dev/sass/components/forms/_input-fields.scss#L10-L40
 */
.ck input.ck-input.ck-input-text {
    box-shadow: var(--ck-inner-shadow),0 0;
    background: var(--ck-color-input-background);
    border: 1px solid var(--ck-color-input-border);
    padding: var(--ck-spacing-extra-tiny) var(--ck-spacing-medium);
    transition-property: box-shadow,border;
    transition: .2s ease-in-out;

    height: inherit;
    width: inherit;
    font-size: inherit;
    margin: 0;
    box-sizing: border-box;
}

.ck input.ck-input.ck-input-text:focus {
    border: var(--ck-focus-ring);
    box-shadow: var(--ck-focus-outer-shadow),var(--ck-inner-shadow);
}

/*
 * Bring back the default <ul> and <li> appearance.
 *
 * See: https://github.com/Dogfalo/materialize/blob/v1-dev/sass/components/_global.scss#L28-L37
 */
.ck.ck-content ul,
.ck.ck-content ul li {
  list-style-type: inherit;
}

.ck.ck-content ul {
  /* Default user agent style sheet. You can change it to your needs. */
  padding-left: 40px;
}

要更改模态框的行为并防止它们“窃取”焦点，请使用 dismissible: false 选项。

M.Modal.init( modal, { dismissible: false } );

// Or "jQuery way":
$( '#modal-container' ).modal( {
    dismissible: false
} );

查看 CKEditor 5 富文本编辑器与 Materialize.css 正确配合工作的演示.

# 与 Semantic-UI 的兼容性

在进行少量 CSS 调整后，CKEditor 5 可以与 Semantic-UI 正确配合使用。要在模态框内使用 气球编辑器，需要配置浮动编辑器 UI 的 z-index 属性，使其渲染在模态框之上

/*
 * Configure the z-index of the editor UI, so when inside a Semantic-UI modal,
 * it will be rendered over the modal.
 */
:root {
    --ck-z-default: 100;
    --ck-z-panel: calc( var(--ck-z-default) + 999 );
}

查看 CKEditor 5 富文本编辑器与 Semantic-UI 正确配合工作的演示.