Localization in Vue Image editor component

16 Mar 20238 minutes to read

The Localization library allows you to localize the default text content of the Image Editor. The Image Editor has static text that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the locale value and translation object.

The following list of properties and its values are used in the Image Editor.

Locale key words	Text
Browse	Browse
Crop	Crop
ZoomIn	Zoom In
ZoomOut	Zoom Out
Transform	Transform
Annotation	Annotation
Text	Add Text
Pen	Pen
Reset	Reset
Save	Save
Select	Select
RotateLeft	Rotate Left
RotateRight	Rotate Right
HorizontalFlip	Horizontal Flip
VerticalFlip	Vertical Flip
OK	OK
Cancel	Cancel
FillColor	Fill Color
StrokeColor	Stroke Color
StrokeWidth	StrokeWidth
FontFamily	Font Family
FontStyle	Font Style
FontSize	Font Size
FontColor	Font Color
Pan	Pan
Move	Move
Custom	Custom
Square	Square
Circle	Circle
Rectangle	Rectangle
Line	Line
Default	Default
Bold	Bold
Italic	Italic
BoldItalic	Bold Italic
XSmall	X-Small
Small	Small
Medium	Medium
Large	Large
XLarge	X-Large
ABC	ABC

app.vue

<template>
<div>
<ejs-imageeditor id="image-editor" height="350px" width="550px" locale="de-DE"></ejs-imageeditor>
</div>
</template>

<script>
import Vue from 'vue';
import { ImageEditorPlugin } from "@syncfusion/ej2-vue-image-editor";
import { L10n, setCulture } from '@syncfusion/ej2-base';

Vue.use(ImageEditorPlugin);

setCulture('de-DE');

L10n.load({
    'de-DE': {
        'image-editor': {
            'Browse': 'Durchsuche',
            'Crop': 'Ernte',
            'ZoomIn': 'Hineinzoomen',
            'ZoomOut': 'Rauszoomen',
            'Transform': 'Verwandeln',
            'Annotation': 'Anmerkung',
            'Text': 'Text hinzufügen',
            'Pen': 'Stift',
            'Reset': 'Zurücksetzen',
            'Save': 'Speichern',
            'Select': 'Auswählen',
            'RotateLeft': 'Nach links drehen',
            'RotateRight': 'Drehe nach rechts',
            'HorizontalFlip': 'Horizontaler Flip',
            'VerticalFlip': 'Vertikaler Flip',
            'OK': 'OK',
            'Cancel': 'Absagen',
            'FillColor': 'Füllfarbe',
            'StrokeColor': 'Strichfarbe',
            'StrokeWidth': 'Strichbreite',
            'FontFamily': 'Schriftfamilie',
            'FontStyle': 'Schriftstil',
            'FontSize': 'Schriftgröße',
            'FontColor': 'Schriftfarbe',
            'Pan': 'Pfanne',
            'Move': 'Bewegen',
            'Custom': 'Brauch',
            'Square': 'Quadrat',
            'Circle': 'Kreis',
            'Rectangle': 'Rechteck',
            'Line': 'Linie',
            'Default': 'Standard',
            'Bold': 'Fett gedruckt',
            'Italic': 'Kursiv',
            'BoldItalic': 'Fett Kursiv',
        }
    }
});

export default {
  data: function() {
      return {};
  }
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-image-editor/styles/material.css";


#image-editor {
    width: 550px !important;
    height: 350px !important;
}
</style>