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 |
ej.base.enableRipple(true);
/**
* localization querybuilder sample
*/
ej.base.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',
}
}
});
var imageEditorObj = new ej.imageeditor.ImageEditor({
locale: 'de-DE',
width: '550px',
height: '330px',
});
imageEditorObj.appendTo('#imageeditor');<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="description" content="Essential JS 2">
<meta name="author" content="Syncfusion">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-image-editor/styles/material.css" rel="stylesheet">
<!--style reference from app-->
<link href="styles.css" rel="stylesheet">
<!--system js reference and configuration-->
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="control-section">
<div id="imageeditor" class="row">
</div>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>