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
文章版权归作者所有，转载请保留此声明。
