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

指南快速入门

CKBox 是一款商业产品，您需要获得许可证才能使用它。

在本指南中，您将找到运行即用型 CKBox 应用程序的最快速、最简单的方法。请参考集成部分，了解如何使用 npm 将 CKBox 与流行的 JavaScript 框架集成。

# CDN

使用 CDN 提供的构建是最简单、最快的方法，将 CKBox 嵌入您的应用程序中。此外，从 CDN 提供的所有脚本都以更快的速度加载，因为它们托管在全球多个服务器上，从而缩短了响应时间。

要在您的网站上开始使用 CKBox，请在页面的 HTML 中嵌入以下 <script> 标记

<script src="https://cdn.ckbox.io/ckbox/2.5.1/ckbox.js"></script>

快速实现示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="https://cdn.ckbox.io/ckbox/2.5.1/ckbox.js"></script>
    </head>
    <body>
        <div id="ckbox"></div>
        <script>
            // You must provide a valid token URL in order to use the application
            // After registering to CKBox, the fastest way to try out CKBox is to use the development token endpoint:
            // https://ckeditor.npmjs.net.cn/docs/ckbox/latest/guides/configuration/authentication.html#token-endpoint
            CKBox.mount(document.getElementById('ckbox'), {
                tokenUrl: 'https://your.token.url'
            });
        </script>
    </body>
</html>

请参考我们包含示例的仓库，了解完整的代码示例。

# 与 CKEditor 集成

下面介绍的集成示例只展示了 CKEditor 功能的有限集合。要查看与功能齐全的编辑器的集成，请参考CKEditor 集成示例。

下面的代码段展示了 CKEditor 和 CKBox 集成的最简单场景。要详细了解集成，请参考CKEditor 集成指南。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="https://cdn.ckbox.io/ckbox/2.5.1/ckbox.js"></script>
        <link rel="stylesheet" href="https://cdn.ckbox.io/ckbox/2.5.1/styles/themes/lark.css">
        <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/42.0.0/ckeditor5.css" />
    </head>
    <body>
        <div id="editor"></div>

        <script type="importmap">
            {
                "imports": {
                    "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/42.0.0/ckeditor5.js",
                    "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/42.0.0/"
                }
            }
        </script>

        <script type="module">
            import {
                ClassicEditor,
                CKBox,
                Bold,
                CloudServices,
                Essentials,
                Font,
                Image,
                ImageUploadEditing,
                ImageUploadProgress,
                Italic,
                LinkEditing,
                Paragraph,
                PictureEditing
            } from 'ckeditor5';

            ClassicEditor
                .create( document.querySelector( '#editor' ), {
                    plugins: [
                        ClassicEditor,
                        CKBox,
                        Bold,
                        CloudServices,
                        Essentials,
                        Font,
                        Image,
                        ImageUploadEditing,
                        ImageUploadProgress,
                        Italic,
                        LinkEditing,
                        Paragraph,
                        PictureEditing
                    ],
                    ckbox: {
                        tokenUrl: 'https://your.token.url',
                        theme: 'lark'
                    },
                    toolbar: [
                        'ckbox', '|', 'undo', 'redo', '|', 'bold', 'italic', '|',
                        'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
                    ],
                } )
                .catch( error => {
                    console.error( error );
                } );
        </script>
    </body>
</html>

下面的示例展示了集成的结果。尝试将图像直接从剪贴板粘贴到编辑区域，以及拖放图像——文件将由 CKBox 实时保存。

您可以使用工具栏按钮打开 CKBox 对话框窗口。在那里，您可以管理您的文件或选择要添加到编辑内容中的资产。以这种方式嵌入到编辑器中的图像将生成高度优化的 <picture> 标记。如果图像在 CKBox 中的属性中设置了描述，则描述将自动用作嵌入到编辑器中的图像的 alt 属性。

本文档中的所有示例都使用 CKBox 的演示环境，该环境会定期清除。请勿尝试在您的应用程序中使用它，否则上传的文件将被永久删除。