Globalization

The globalization process combines the translation of component messages with adapting them to specific locales.

For more information on how globalization practices are implemented in KendoReact, refer to the overview article. For more information on the globalization aspects which are available for each component, refer to the article on globalization support.

Internationalization

The internationalization process applies specific culture formats to a web application.

For more information, refer to:

Messages

The Editor supports the localization of its messages by utilizing the KendoReact Internationalization package.

The following table lists the built-in message keys and their default values.

Message KeyDefault Value
editor.boldBold
editor.italicItalic
editor.underlineUnderline
editor.strikethroughStrikethrough
editor.subscriptSubscript
editor.superscriptSuperscript
editor.hyperlinkInsert hyperlink
editor.hyperlink-dialog-titleInsert hyperlink
editor.hyperlink-dialog-content-addressWeb address
editor.hyperlink-dialog-content-titleTitle
editor.hyperlink-dialog-content-newwindowOpen link in new window
editor.hyperlink-dialog-cancelCancel
editor.hyperlink-dialog-insertInsert
editor.imageInsert image
editor.image-dialog-titleInsert image
editor.image-addressWeb address
editor.image-titleTitle
editor.image-altTextAlternate text
editor.image-widthWidth (px)
editor.image-heightHeight (px)
editor.image-cancelCancel
editor.image-insertInsert
editor.viewHtmlView HTML
editor.viewHtml-dialog-titleView HTML
editor.viewHtml-cancelCancel
editor.viewHtml-updateUpdate
editor.unlinkRemove hyperlink
editor.undoUndo
editor.redoRedo
editor.fontSizeFont Size
editor.fontNameFont Name
editor.formatFormat
editor.alignLeftAlign text left
editor.alignCenterCenter text
editor.alignRightAlign text right
editor.alignJustifyJustify
editor.indentIndent
editor.outdentOutdent
editor.orderedListInsert ordered list
editor.bulletListInsert unordered list
editor.createTableCreate a table
editor.insertTableHintCreate a {0} x {1} table
editor.addRowBeforeAdd row above
editor.addRowAfterAdd row below
editor.addColumnBeforeAdd column on the left
editor.addColumnAfterAdd column on the right
editor.deleteRowDelete row
editor.deleteColumnDelete column
editor.deleteTableDelete table
editor.mergeCellsMerge cells
editor.splitCellSplit cell

The following example demonstrates how to load and apply the messages.

import React from 'react';
import ReactDOM from 'react-dom';
import { Editor, EditorTools } from '@progress/kendo-react-editor';
import { loadMessages, LocalizationProvider } from '@progress/kendo-react-intl';
import { deMessages } from './deMessages';
import content from './content';

const { Bold, Italic, Underline,
    AlignLeft, AlignRight, AlignCenter,
    Indent, Outdent,
    OrderedList, UnorderedList,
    Undo, Redo, Link, Unlink, Strikethrough, Subscript, Superscript,
    InsertImage, ViewHtml, FontSize, FontName, FormatBlock } = EditorTools;

loadMessages(deMessages, 'de');

class App extends React.Component {
    render() {
        return (
            <LocalizationProvider language="de">
                <Editor
                    defaultContent={content}
                    contentStyle={{ height: 320 }}
                    tools={[
                        [ Bold, Italic, Underline, Strikethrough ],
                        [ Subscript, Superscript ],
                        [ Undo, Redo ],
                        [ Link, Unlink, InsertImage ],
                        [ AlignLeft, AlignCenter, AlignRight ],
                        [ OrderedList, UnorderedList, Indent, Outdent ],
                        ViewHtml,
                        FontSize, FontName, FormatBlock
                    ]}
                />
            </LocalizationProvider>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Right-to-Left Support

The following example demonstrates how to utilize the RTL support for the Editor.

import React from 'react';
import ReactDOM from 'react-dom';
import content from './content';
import { Editor, EditorTools } from '@progress/kendo-react-editor';

const { Bold, Italic, Underline,
    AlignLeft, AlignRight, AlignCenter,
    Indent, Outdent,
    OrderedList, UnorderedList,
    Undo, Redo, Link, Unlink } = EditorTools;

class App extends React.Component {
    render() {
        return (
            <Editor
                dir="rtl"
                tools={[
                    [ Bold, Italic, Underline ],
                    [ Undo, Redo ],
                    [ Link, Unlink ],
                    [ AlignLeft, AlignCenter, AlignRight ],
                    [ OrderedList, UnorderedList, Indent, Outdent ]
                ]}
                contentStyle={{ height: 320 }}
                defaultContent={content}
            />
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
 /