CKEditor Ecosystem Documentation
Search
Home/CKBox/Examples

Changing the language

The language of the CKBox UI can be changed using the language configuration option.

In the example below, CKBox is configured to use Spanish.

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

# CKEditor integration

If you are integrating CKBox with CKEditor, please have a look at the example below, which sets the language to Spanish for both, CKEditor and CKBox simultaneously.
To read more about the integration between CKEditor and CKBox, please refer to the CKEditor integration guide.

<!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>

As you can see in the example above, the language option for CKBox was omitted. This was intentional because by default the language of CKBox will match the language of CKEditor, which has been already set to Spanish. Setting language again in ckbox.language would be superfluous in this case.

Below you can see a live example of the configuration presented above.