CKEditor 5 集成

# CKBox 如何增强 CKEditor 5

CKBox 替换了基本的 CKEditor 5 图片上传功能。它提供图片和文件上传以及管理功能

通过拖放和从剪贴板粘贴启用图片上传。
转换图片工具栏按钮，允许用户快速上传和插入图片，而无需打开 CKBox UI。
添加单独的专用工具栏按钮来打开 CKBox UI 以管理和使用已上传的文件，以及从 CKBox 内编辑图片。
还添加了一个单独的专用图片上下文工具栏按钮用于 CKBox 图片编辑。

使用 CKBox，您不再需要编写服务器端代码来上传和缩放图片或管理已上传的文件。

# 演示

下面的代码片段展示了 CKBox 与富文本版本的 CKEditor 5 的集成，包括编辑器的大多数但并非所有可用功能。它提供了一个复杂的解决方案来处理图片。尝试将图片从剪贴板（Ctrl/Cmd + v）直接粘贴到编辑区域以及拖放图片 - 文件将由 CKBox 实时保存。

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

使用图片上下文工具栏编辑按钮在选定图片上调用直接来自编辑器的图片编辑窗格。

下面，您可以找到 CKBox 与上面介绍的 CKEditor 超级构建的集成代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <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" />
        <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5-premium-features/42.0.0/ckeditor5-premium-features.css">
    </head>
    <body>
        <style>
            #container {
                width: 1000px;
                margin: 20px auto;
            }
            .ck-editor__editable[role="textbox"] {
                /* editing area */
                min-height: 200px;
            }
            .ck-content .image {
                /* block images */
                max-width: 80%;
                margin: 20px auto;
            }
        </style>
        <div id="container">
            <div id="editor">
            </div>
        </div>
        <script src="https://cdn.ckbox.io/ckbox/2.5.1/ckbox.js"></script>

        <script type="importmap">
            {
                "imports": {
                    "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/42.0.0/ckeditor5.js",
                    "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/42.0.0/",
                    "ckeditor5-premium-features": "https://cdn.ckeditor.com/ckeditor5-premium-features/42.0.0/ckeditor5-premium-features.js",
                    "ckeditor5-premium-features/": "https://cdn.ckeditor.com/ckeditor5-premium-features/42.0.0/"
                }
            }
        </script>
        <script type="module">
            // This sample still does not showcase all CKEditor 5 features (!)
            // Visit https://ckeditor.npmjs.net.cn/docs/ckeditor5/latest/features/index.html to browse all the features.
            import {
                ClassicEditor,
                Autoformat,
                Bold,
                Italic,
                Underline,
                BlockQuote,
                Base64UploadAdapter,
                CloudServices,
                CKBox,
                CKBoxImageEdit,
                Essentials,
                FindAndReplace,
                Font,
                Heading,
                Image,
                ImageCaption,
                ImageResize,
                ImageStyle,
                ImageToolbar,
                ImageUpload,
                PictureEditing,
                Indent,
                IndentBlock,
                Link,
                List,
                MediaEmbed,
                Mention,
                Paragraph,
                PasteFromOffice,
                SourceEditing,
                Table,
                TableColumnResize,
                TableToolbar,
                TextTransformation,
                HtmlEmbed,
                CodeBlock,
                RemoveFormat,
                Code,
                SpecialCharacters,
                HorizontalLine,
                PageBreak,
                TodoList,
                Strikethrough,
                Subscript,
                Superscript,
                Highlight,
                Alignment
            } from 'ckeditor5';

            import {
                ExportPdf,
                ExportWord
            } from 'ckeditor5-premium-features';

            ClassicEditor.create( document.querySelector( '#editor' ), {
                plugins: [
                    Autoformat,
                    BlockQuote,
                    Bold,
                    CloudServices,
                    CKBox,
                    Essentials,
                    FindAndReplace,
                    Font,
                    Heading,
                    Image,
                    ImageCaption,
                    ImageResize,
                    ImageStyle,
                    ImageToolbar,
                    ImageUpload,
                    Base64UploadAdapter,
                    Indent,
                    IndentBlock,
                    Italic,
                    Link,
                    List,
                    MediaEmbed,
                    Mention,
                    Paragraph,
                    PasteFromOffice,
                    PictureEditing,
                    SourceEditing,
                    Table,
                    TableColumnResize,
                    TableToolbar,
                    TextTransformation,
                    Underline,
                    HtmlEmbed,
                    CodeBlock,
                    RemoveFormat,
                    Code,
                    SpecialCharacters,
                    HorizontalLine,
                    PageBreak,
                    TodoList,
                    Strikethrough,
                    Subscript,
                    Superscript,
                    Highlight,
                    Alignment,
                    CKBoxImageEdit,
                    ExportPdf,
                    ExportWord
                ],
                toolbar: {
                    items: [
                        'undo', 'redo',
                        '|',
                        'sourceEditing',
                        '|',
                        'exportPDF','exportWord',
                        '|',
                        'findAndReplace', 'selectAll',
                        '|',
                        'heading',
                        '|',
                        'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor',
                        '-',
                        'bold', 'italic', 'underline',
                        {
                            label: 'Formatting',
                            icon: 'text',
                            items: [ 'strikethrough', 'subscript', 'superscript', 'code', '|', 'removeFormat' ]
                        },
                        '|',
                        'specialCharacters', 'horizontalLine', 'pageBreak',
                        '|',
                        'link', 'insertImage', 'ckbox', 'ckboxImageEdit', 'insertTable',
                        {
                            label: 'Insert',
                            icon: 'plus',
                            items: [ 'highlight', 'blockQuote', 'mediaEmbed', 'codeBlock', 'htmlEmbed' ]
                        },
                        'alignment',
                        '|',
                        'bulletedList', 'numberedList', 'todoList',
                        {
                            label: 'Indents',
                            icon: 'plus',
                            items: [ 'outdent', 'indent' ]
                        }
                    ],
                    shouldNotGroupWhenFull: true
                },
                list: {
                    properties: {
                        styles: true,
                        startIndex: true,
                        reversed: true
                    }
                },
                // https://ckeditor.npmjs.net.cn/docs/ckeditor5/latest/features/headings.html#configuration
                heading: {
                    options: [
                        { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                        { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                        { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                        { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
                        { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
                        { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
                        { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
                    ]
                },
                placeholder: 'Welcome to CKEditor 5 + CKBox!',
                image: {
                    resizeOptions: [
                        {
                            name: 'resizeImage:original',
                            label: 'Default image width',
                            value: null
                        },
                        {
                            name: 'resizeImage:50',
                            label: '50% page width',
                            value: '50'
                        },
                        {
                            name: 'resizeImage:75',
                            label: '75% page width',
                            value: '75'
                        }
                    ],
                    toolbar: [
                        'imageTextAlternative',
                        'toggleImageCaption',
                        '|',
                        'imageStyle:inline',
                        'imageStyle:wrapText',
                        'imageStyle:breakText',
                        '|',
                        'resizeImage'
                    ],
                },
                link: {
                    addTargetToExternalLinks: true,
                    defaultProtocol: 'https://'
                },
                table: {
                    contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ],
                },
                ckbox: {
                    // You need to provide your own token endpoint here
                    // Sign up to CKBox to get one: https://ckeditor.npmjs.net.cn/ckbox/
                    tokenUrl: 'https://api.ckbox.io/token/demo',
                    theme: 'lark'
                }
            } )
            .then( ( editor ) => {
                window.editor = editor;
            } )
            .catch( ( error ) => {
                console.error( error.stack );
            } );

        </script>
    </body>
</html>

要了解有关集成 CKEditor 和 CKBox 时可用的选项的更多信息，请参阅 CKEditor 集成指南。

需要更多功能？进行调查帮助我们开发 CKBox 以更好地满足您的需求！