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.
Need more functionality? Take a survey and help us develop CKBox to suit your needs better!