CKEditor 生态系统文档
Search
首页/CKBox/入门

guide其他

CKBox 可以与任何前端框架集成，没有限制。以下代码片段将帮助您使用任何技术进行集成。

查看支持的配置选项列表，这些选项将帮助您设置 CKBox。

# ECMAScript 导出

使用 ECMAScript 模块的命名导入语法导入 CKBox。通过提供对 DOM 元素的引用来挂载 CKBox 的实例。

import * as CKBox from "ckbox";
import "ckbox/dist/styles/ckbox.css";

const app = document.querySelector("#app");

const { unmount } = CKBox.mount(app, {
    dialog: true,
    tokenUrl: "https://your.token.url",
});

// A cleanup function invoked at some point in the client app's lifecycle.
function cleanup() {
    // Unmount CKBox instance if it's not needed anymore.
    // Note that CKBox will unmount automagically on closing the dialog or on choosing an asset.
    unmount();
}

# UMD 文件

CKBox UMD 文件是一个独立的、包含所有必要依赖项和默认样式的完整构建。虽然通常 UMD 构建在 script 元素中直接引用，如此处所示，但它们也可以在其他场景中使用，例如使用 ECMAScript 模块时。

虽然 UMD 构建易于集成，但它可能不是从捆绑包大小角度来看的最佳选择。这是因为像 Webpack 或 Rollup 这样的捆绑器永远不会解析 CKBox 的依赖项，因此无法对模块进行重复数据删除。因此，我们建议尽可能使用 CKBox 的 ECMAScript 导出。但是，UMD 构建在某些场景中可能很有用

  • 客户端应用程序依赖于旧版本的 React（请参阅示例）
  • CKBox 必须在依赖于 CommonJS 模块的环境中使用（例如，Node.js 中的服务器端渲染）

在您的应用程序中只导入一次 UMD 构建。这样，CKBox 将在全局对象上公开。通过提供对 DOM 元素的引用来创建 CKBox 的实例。

// There is no need to import stylesheet separately when using UMD build.
// Import this file only once in your app.
import "ckbox/dist/ckbox.js";

const app = document.querySelector("#app");

// `CKBox` is available globally.
CKBox.mount(app, {
    dialog: true,
    tokenUrl: "https://your.token.url",
});