CKEditor 生态系统文档
Search
主页/CKBox/示例

指南更改语言

CKBox UI 的语言可以使用 language 配置选项更改。

在下面的示例中，CKBox 配置为使用西班牙语。

CKBox.mount(document.querySelector('#ckbox'), {
    tokenUrl: 'https://your.token.url',
    language: 'es'
});

# CKEditor 集成

如果您将 CKBox 与 CKEditor 集成，请查看下面的示例，它将同时为 CKEditor 和 CKBox 设置西班牙语语言。
要了解有关 CKEditor 和 CKBox 之间集成的更多信息，请参阅 CKEditor 集成指南。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="https://cdn.ckbox.io/ckbox/2.5.1/ckbox.js"></script>
        <script src="https://cdn.ckbox.io/ckbox/2.5.1/translations/es.js"></script>

        <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,
                BlockQuote,
                Bold,
                CKBox,
                CloudServices,
                Essentials,
                Heading,
                Image,
                ImageUpload,
                Indent,
                IndentBlock,
                Italic,
                Link,
                List,
                Paragraph,
                PictureEditing
            } from 'ckeditor5';

            import ckeditor5Translations from 'ckeditor5/translations/es.js';

            ClassicEditor
                .create( document.querySelector( '#editor' ), {
                    ckbox: {
                        tokenUrl: 'https://your.token.url'
                    },
                    plugins: [
                        CKBox, Essentials, Bold, Italic, Heading, Paragraph, ImageUpload,
                        CloudServices, PictureEditing, Link, Image, List, BlockQuote, Indent, IndentBlock
                    ],
                    language: 'es',
                    translations: ckeditor5Translations,
                    toolbar: [
                        'ckbox', 'imageUpload', '|',
                        'heading', '|',
                        'undo', 'redo', '|',
                        'bold', 'italic', '|',
                        'blockQuote', 'indent', 'link', '|',
                        'bulletedList', 'numberedList'
                    ],
                } )
                .catch( error => {
                    console.error( error );
                } );
        </script>
        <script>
            ClassicEditor
                .create( document.querySelector( '#editor' ), {
                    language: 'es',
                    ckbox: {
                        tokenUrl: 'https://your.token.url'
                    },
                    toolbar: [
                        'ckbox', '|',
                        'undo', 'redo', '|',
                        'imageUpload', '|',
                        'heading', '|',
                        'bold', 'italic'
                    ]
                } )
                .catch( error => {
                    console.error( error );
                } );
        </script>
    </body>
</html>

如您在上面的示例中看到的，CKBox 的 language 选项被省略了。这是故意的，因为默认情况下，CKBox 的语言将与 CKEditor 的语言匹配，CKEditor 已经设置为西班牙语。在这种情况下，在 ckbox.language 中再次设置语言将是多余的。

下面您可以看到上面介绍的配置的实时示例。