Search results

Globalization

Localization

The RichTextEditor provides an option to localize its strings; it is used to adapting the editor to a particular local language. By default, the editor will use the US English (en-US) as its language. Please find the table with a list of keys and their corresponding values for the default language (en-US).

'en-US': {
        'richtexteditor': {
            alignments: 'Alignments',
            justifyleft: 'JustifyLeft',
            justifycenter: "JustifyCenter",
            justifyright: "Justify Right",
            justifyfull: "Justify Full",
            formats: 'Formats',
            fontname: "Font Name",
            fontsize: "Font Size",
            fontcolor: "Font Color",
            backgroundcolor: "Background color",
            bold: "Bold",
            italic: "Italic",
            underline: "Underline",
            strikethrough: "Strikethrough",
            clearall: "Clear All",
            clearformat: "Clear Format",
            cut: "Cut",
            copy: "Copy",
            paste: "Paste",
            unorderedlist: "unordered list",
            orderedlist: "ordered list",
            indent: "Increase Indent",
            outdent: "Decrease Indent",
            undo: "Undo",
            redo: "Redo",
            superscript: "Superscript",
            subscript: "Subscript",
            createlink: "Insert link",
            removelink: "remove link",
            openlink: "Open link",
            editlink: "Edit link",
            image: "Insert image",
            replace: 'Replace',
            align: 'Align',
            caption: 'Caption',
            remove: 'Remove',
            insertlink: 'insertlink',
            display: 'Display',
            alttext: 'Alternative Text',
            dimension: 'Dimension',
            fullscreen: 'Full Screen',
            maximize: 'Maximize',
            minimize: 'Minimize',
            zoomin: 'Zoom In',
            zoomout: 'Zoom Out',
            uppercase: "Upper Case",
            lowercase: "Lower Case",
            print: 'Print',
            sourcecode: 'Source Code',
            preview: 'Preview',
            viewside: 'View Side',
            insertcode: 'Insert Code'
        }
    }

To localize the editor’s strings with your own localization, copy the default language informations and localize the strings in the values column. For example, to localize the editor in German language (“de-DE”).

'de-DE': {
            'richtexteditor': {
                alignments: 'Alignments',
                justifyLeft: 'Ausrichten von Text links',
                justifyCenter: "Text-Zentrum",
                justifyRight: "Ausrichten von Text rechts",
                justifyFull: "rechtfertigen",
                fontName: "Wählen Sie Schriftfamilie",
                fontSize: "Wählen Sie Schriftgröße",
                fontColor: "Wählen Sie die Farbe",
                backgroundColor: "Hintergrundfarbe",
                bold: "fett",
                italic: "kursiv",
                underline: "unterstreichen",
                strikethrough: "Durchgestrichen",
                clearAll: "Alles",
                clearFormat: "Klar Format",
                cut: "schneiden",
                copy: "Kopieren",
                paste: "Paste",
                unorderedList: "Legen Sie ungeordnete Liste",
                orderedList: "Geordnete Liste einfügen",
                indent: "Einzug",
                outdent: "Einzug verkleinern",
                undo: "lösen",
                redo: "Wiederherstellen",
                superscript: "Überschrift",
                subscript: "index",
                createLink: "Einfügen / Hyperlink Bearbeiten",
                removeLink: "fjern Hyperlink",
                openLink: "Open link",
                editLink: "Edit link",
                image: "Bild einfügen",
                replace: 'ersetzen',
                align: 'ausrichten',
                caption: 'Bildbeschriftung',
                formats: 'Formats',
                remove: 'Löschen',
                insertLink: 'Link einfügen',
                display: 'Anzeige',
                alttext: 'alternativer Text',
                dimension: 'Größe',
                fullscreen: 'Vollbild',
                maximize: 'Maximieren',
                minimize: 'minimieren',
                zoomIn: 'hineinzoomen',
                zoomOut: 'Rauszoomen',
                upperCase: "Großbuchstaben",
                lowerCase: "Kleinbuchstaben",
                print: 'Drucken',
                sourcecode: 'Quellcode',
                preview: 'Vorschau',
                viewside: 'Seite anzeigen',
                insertcode: 'Code eingeben',
                linkText: 'Displaytekst',
                linkTooltipLabel: 'tooltip',
                linkWebUrl: 'Webadres',
                linkOpenInNewWindow: 'Open de link in een nieuw venster',
                linkHeader: 'Link invoegen',
                dialogInsert: 'invoegen',
                dialogCancel: 'Annuleer',
                dialogUpdate: 'Bijwerken',
                imageHeader: 'Voeg afbeelding in',
                imageLinkHeader: 'U kunt ook een link van internet opgeven',
                imageUploadMessage: 'Zet hier een afbeelding neer of klik om te uploaden',
                imageDeviceUploadMessage: 'Klik hier om te uploaden',
                imageAlternateText: 'Alternatieve tekst',
                alternateHeader: 'Alternatieve tekst',
                browse: 'Blader',
                imageUrl: 'URL',
                imageCaption: 'onderschrift',
                imageSizeHeader: 'Afbeeldingsgrootte',
                imageHeight: 'Hoogte',
                imageWidth: 'Breedte',
                textPlaceholder: 'Text eingeben',
                linkTitle: 'Titel eingeben'
            }
        },

The below sample demonstrate that, the RichTextEditor control rendered with ‘de-DE’ German language using locale property.

Source
Preview
index.js
index.html
/**
 * RichTextEditor default Locale Sample 
 */

new ej.base.L10n.load({
    'de-DE': {
        'richtexteditor': {
            alignments: 'Alignments',
            justifyLeft: 'Ausrichten von Text links',
            justifyCenter: "Text-Zentrum",
            justifyRight: "Ausrichten von Text rechts",
            justifyFull: "rechtfertigen",
            fontName: "Wählen Sie Schriftfamilie",
            fontSize: "Wählen Sie Schriftgröße",
            fontColor: "Wählen Sie die Farbe",
            backgroundColor: "Hintergrundfarbe",
            bold: "fett",
            italic: "kursiv",
            underline: "unterstreichen",
            strikethrough: "Durchgestrichen",
            clearAll: "Alles",
            clearFormat: "Klar Format",
            cut: "schneiden",
            copy: "Kopieren",
            paste: "Paste",
            unorderedList: "Legen Sie ungeordnete Liste",
            orderedList: "Geordnete Liste einfügen",
            indent: "Einzug",
            outdent: "Einzug verkleinern",
            undo: "lösen",
            redo: "Wiederherstellen",
            superscript: "Überschrift",
            subscript: "index",
            createLink: "Einfügen / Hyperlink Bearbeiten",
            removeLink: "fjern Hyperlink",
            openLink: "Open link",
            editLink: "Edit link",
            image: "Bild einfügen",
            replace: 'ersetzen',
            align: 'ausrichten',
            caption: 'Bildbeschriftung',
            formats: 'Formats',
            remove: 'Löschen',
            insertLink: 'Link einfügen',
            display: 'Anzeige',
            alttext: 'alternativer Text',
            dimension: 'Größe',
            fullscreen: 'Vollbild',
            maximize: 'Maximieren',
            minimize: 'minimieren',
            zoomIn: 'hineinzoomen',
            zoomOut: 'Rauszoomen',
            upperCase: "Großbuchstaben",
            lowerCase: "Kleinbuchstaben",
            print: 'Drucken',
            sourcecode: 'Quellcode',
            preview: 'Vorschau',
            viewside: 'Seite anzeigen',
            insertcode: 'Code eingeben',
            linkText: 'Displaytekst',
            linkTooltipLabel: 'tooltip',
            linkWebUrl: 'Webadres',
            linkOpenInNewWindow: 'Open de link in een nieuw venster',
            linkHeader: 'Link invoegen',
            dialogInsert: 'invoegen',
            dialogCancel: 'Annuleer',
            dialogUpdate: 'Bijwerken',
            imageHeader: 'Voeg afbeelding in',
            imageLinkHeader: 'U kunt ook een link van internet opgeven',
            imageUploadMessage: 'Zet hier een afbeelding neer of klik om te uploaden',
            imageDeviceUploadMessage: 'Klik hier om te uploaden',
            imageAlternateText: 'Alternatieve tekst',
            alternateHeader: 'Alternatieve tekst',
            browse: 'Blader',
            imageUrl: 'URL',
            imageCaption: 'onderschrift',
            imageSizeHeader: 'Afbeeldingsgrootte',
            imageHeight: 'Hoogte',
            imageWidth: 'Breedte'
           }
       }
});

var defaultRTE = new ej.richtexteditor.RichTextEditor({locale: 'de-DE', });
defaultRTE.appendTo('#defaultRTE');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-richtexteditor/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
     <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="defaultRTE">
            <p>The rich text editor is WYSIWYG (&quot;what you see is what you get&quot;) editor useful to create and edit content, and return the valid <a href="https://ej2.syncfusion.com/home/" target="_blank">HTML markup</a> or <a href="https://ej2.syncfusion.com/home/" target="_blank">markdown</a> of the content</p>                
            <p><b>Key features:</b></p>
              <ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p></li>
              <li><p>Capable of handling markdown editing.</p></li>
              <li><p>Contains a modular library to load the necessary functionality on demand.</p></li>
              <li><p>Provides a fully customizable toolbar.</p></li>
              <li><p>Provides HTML view to edit the source directly for developers.</p></li>
              <li><p>Supports third-party library integration.</p></li>
              <li><p>Allows preview of modified content before saving it.</p></li>
              <li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
              <li><p>Contains undo/redo manager.</p></li>
              <li><p>Creates bulleted and numbered lists.</p></li>
              </ul>
        </div>
    </div>
    <style>
            .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-left::before {
                content: "\e76e";
            }
        
            .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-right::before {
                content: "\e726";
            }
        </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

RTL

Specifies the direction of the RichTextEditor component using the enableRtl property. For writing systems that require it like Arabic, Hebrew, etc., the direction can be switched to right-to-left.

Note: It will not change based on the locale property.

Source
Preview
index.js
index.html
/**
 * RichTextEditor RTL sample 
 */
var defaultRTE = new ej.richtexteditor.RichTextEditor({enableRtl : true });
defaultRTE.appendTo('#defaultRTE');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-richtexteditor/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
     <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="defaultRTE">
            <p>The rich text editor is WYSIWYG (&quot;what you see is what you get&quot;) editor useful to create and edit content, and return the valid <a href="https://ej2.syncfusion.com/home/" target="_blank">HTML markup</a> or <a href="https://ej2.syncfusion.com/home/" target="_blank">markdown</a> of the content</p>                
            <p><b>Key features:</b></p>
              <ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p></li>
              <li><p>Capable of handling markdown editing.</p></li>
              <li><p>Contains a modular library to load the necessary functionality on demand.</p></li>
              <li><p>Provides a fully customizable toolbar.</p></li>
              <li><p>Provides HTML view to edit the source directly for developers.</p></li>
              <li><p>Supports third-party library integration.</p></li>
              <li><p>Allows preview of modified content before saving it.</p></li>
              <li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
              <li><p>Contains undo/redo manager.</p></li>
              <li><p>Creates bulleted and numbered lists.</p></li>
              </ul>
        </div>
    </div>
    <style>
            .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-left::before {
                content: "\e76e";
            }
        
            .e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-right::before {
                content: "\e726";
            }
        </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

enableRtl property will not change based on locale property.

Contents
Contents