概览 - 框架 - 集成 - 构建文档 - ckeditor5中文文档

CKEditor 5是否与框架XYZ兼容？

是。 CKEditor 5与我们目前所听到的每个JavaScript框架兼容。 CKEditor 5是一个JavaScript富文本编辑组件（相当复杂但仍然如此），它不需要使用任何不常见的技术或技术。 因此，除非您使用的框架具有非常典型的限制，否则CKEditor 5与之兼容。

如何在框架中使用CKEditor 5？

虽然CKEditor 5与您的框架兼容并且初始化它需要单个方法调用，但将CKEditor 5与您的框架集成可能需要使用现有的或编写一个新的适配器（集成层）来与CKEditor 5通信您的框架。

在检查如何将CKEditor 5与您的框架集成时，您可以按照以下步骤操作：

官方WYSIWYG编辑器集成

到目前为止，有三个官方集成：

• Angular 2+
• React
• Vue.js

请参阅他们的文档以了解如何使用它们。

我们计划了时间来提供更多集成。 我们希望听到您的想法，我们下一步应该做些什么。

与Electron的兼容性

从版本11.0.0开始，CKEditor 5与Electron兼容。 在Electron应用程序中使用CKEditor 5不需要任何额外的步骤。

观看CKEditor 5的精彩截屏视频，并在Electron中进行实时协作编辑。

与Bootstrap的兼容性

要在Bootstrap模式中显示CKEditor 5，您需要按以下步骤操作：

• 配置CKEditor 5浮动气球的z-index，使它们显示在Bootstrap叠加层上方。
• 配置Bootstrap以不从富文本编辑器字段中窃取焦点。

通过添加此CSS可以确保以上内容：

/*

    You need to add this custom CSS property to the body instead of :root

    because of CSS specificity.

*/

body {

    --ck-z-default: 100;

    --ck-z-modal: calc( var(--ck-z-default) + 999 );

}

/*

    Override Bootstrap's CSS.

    Note: This will not be necessary once the following issue is fixed and released:

    https://github.com/ckeditor/ckeditor5-theme-lark/issues/189

*/

.ck.ck-button {

    -webkit-appearance: none;

}

并将focus: false选项传递给Boostrap的modal()函数：

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

查看https://codepen.io/ckeditor/pen/vzvgOe上的演示。

CKEditor 5提供了现成的构建，可以公开丰富的JavaScript API，您可以使用它来创建编辑器并控制它们。

如果不存在，请自行将CKEditor 5与您的框架集成。

如果没有，请搜索社区驱动的集成。其中大部分都是在npm上提供的。

到目前为止，有三种官方集成：React，Angular 2+和Vue.js.

检查是否存在官方集成。

文章作者ianzhi,原文地址：https://cloud.tencent.com/developer/article/1476867

文章版权归作者所有，转载请保留此声明。