(旧版) CKEditor 5 中的 TypeScript 支持

CKEditor 5 是使用 TypeScript 构建的，并且具有原生类型定义。所有使用 NPM 和 CDN 分发的官方包和构建都包含类型定义。由 **在线构建器** 生成的自定义构建和 CKEditor 5 提供的包的 **DLL** 版本尚未提供内置类型。

# 为什么将 CKEditor 5 与 TypeScript 结合使用

使用 TypeScript 有以下一些优点

• 它有助于生成简洁且易于维护的代码
• 它为 CKEditor 5 API 引入了代码自动完成和类型建议
• 如果您正在开发自定义插件并大量使用 CKEditor 5 框架，TypeScript 编译器将帮助您捕获常见的类型错误并提高代码质量

# CKEditor 5 TypeScript 设置

与 JavaScript 环境相比，使用 TypeScript 运行 CKEditor 5 并没有太大区别。您可以考虑使用类型断言或类型转换来满足 TypeScript 编译器的要求。

# 运行编辑器

以下是如何初始化经典编辑器构建的示例

import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

const editorPlaceholder = document.querySelector( '#editor' ) as HTMLElement;

ClassicEditor.create( editorPlaceholder ).catch( error => {
    console.error( error );
} );

# 安装插件

使用 TypeScript 时，您需要使用包入口点而不是模块路径来导入 CKEditor 5 提供的所有模块。

// Instead of:
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';

// Do:
import { Bold } from '@ckeditor/ckeditor5-basic-styles';

这种方法可确保 TypeScript 正确加载所有必要的模块增强代码，以便某些类型能够正常工作。以前的方法（通过 `@ckeditor/ckeditor5-*/src/*` 导入）在大多数情况下仍然有效，但 它可能随机中断。

# 在 TypeScript 项目中从源代码集成 CKEditor 5

如果您想将 CKEditor 5 直接集成到 TypeScript 项目中，请按照使用 webpack 和 Vite 从源代码集成的说明进行操作

• 使用 webpack 从源代码集成
• 使用 Vite 从源代码集成

# 用于 Angular、React 和 Vue 3 组件的类型

我们针对 Angular、React 和 Vue 3 的官方组件的最新版本已迁移到 TypeScript，并使用 CKEditor 5 的原生类型定义。您不再需要提供自定义定义。您可以使用以下指南

• Angular 组件
• React 组件
• Vue.js 3+ 组件

# 使用 TypeScript 开发插件

CKEditor 5 的 API 非常广泛且复杂，但使用 TypeScript 可以让您更轻松地使用它。

您可以使用 包生成器 来构建基于 TypeScript 的插件。