Having trouble getting help?
Contact Support
Contact Support
Localization in the Vue Image Editor component
11 Jun 202413 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 |
<template>
<div>
<ejs-imageeditor id="image-editor" height="350px" width="550px" locale="de-DE"></ejs-imageeditor>
</div>
</template>
<script setup>
import { ImageEditorComponent as EjsImageeditor} from "@syncfusion/ej2-vue-image-editor";
import { L10n, setCulture } from '@syncfusion/ej2-base';
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',
}
}
});
</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>
<template>
<div>
<ejs-imageeditor id="image-editor" height="350px" width="550px" locale="de-DE"></ejs-imageeditor>
</div>
</template>
<script>
import { ImageEditorComponent } from "@syncfusion/ej2-vue-image-editor";
import { L10n, setCulture } from '@syncfusion/ej2-base';
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 {
name: "App",
components: {
"ejs-imageeditor":ImageEditorComponent
},
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>