Localizing Lumen Editor Toolbar Labels

Lumen Editor ships with a locale option that controls the tooltip labels shown on every toolbar button. Out of the box you get English and Turkish, but the same system accepts a plain JavaScript object so you can support any language without waiting for an official bundle. Localization is purely label-level — it does not affect the editor’s output HTML.

Built-in locales

Set the locale option to one of the built-in locale strings at initialization time. Lumen Editor currently ships two locales:

Value	Language
`'en'`	English (default)
`'tr'`	Turkish

// English (default — you can omit this)
const editor = new Editor('#editor', {
  locale: 'en'
});

// Turkish
const editor = new Editor('#editor', {
  locale: 'tr'
});

If the locale option is omitted entirely, the editor falls back to 'en'.

Custom locale

Pass a plain object instead of a string to supply labels for any language. Each key corresponds to a toolbar command name and its value is the tooltip string displayed on hover:

const editor = new Editor('#editor', {
  locale: {
    bold:           'Negrita',
    italic:         'Cursiva',
    underline:      'Subrayado',
    strikethrough:  'Tachado',
    link:           'Enlace',
    image:          'Imagen',
    bulletList:     'Lista con viñetas',
    orderedList:    'Lista numerada',
    blockquote:     'Cita',
    code:           'Código',
    undo:           'Deshacer',
    redo:           'Rehacer'
  }
});

Any key you omit falls back to the built-in English label, so you only need to supply the keys relevant to the toolbar buttons you’ve configured.

If you build a high-quality locale object for a language not yet included in Lumen Editor, consider opening a pull request to add it as a built-in. Community-contributed locales benefit every user of the library.

Partial overrides

You don’t need to translate every key. Supplying a partial object merges your values on top of the default English locale, leaving untouched keys as-is. This is useful when you only want to rename a handful of labels — for example, to match your product’s terminology:

const editor = new Editor('#editor', {
  locale: {
    // Override just the labels you care about
    bold:  'Strong',
    image: 'Photo'
  }
});

When you pass a plain object as the locale option, the editor merges your keys on top of the built-in English labels. Any key you omit continues to display its default English label, so you only need to supply the entries you want to change.

Get Started

Core Concepts

Guides

Configuration

Help

Localizing Lumen Editor Toolbar Labels

Built-in locales

Custom locale

Partial overrides

​Built-in locales

​Custom locale

​Partial overrides

Built-in locales

Custom locale

Partial overrides