Globalization in the Vue Rich Text Editor Component
4 Jul 202624 minutes to read
Localization
The Rich Text Editor offers an option to localize its strings using the locale API, allowing adaptation to a specific local language. By default, the editor uses US English (en-US). Below is a table listing the keys and their corresponding values for the default language (en-US)..
'en-US': {
'richtexteditor': {
"alignments": "Alignments",
"justifyLeft": "Align Left",
"justifyCenter": "Align Center",
"justifyRight": "Align Right",
"justifyFull": "Align Justify",
"fontName": "Font Name",
"fontSize": "Font Size",
"fontColor": "Font Color",
"backgroundColor": "Background Color",
"bold": "Bold",
"italic": "Italic",
"underline": "Underline",
"strikethrough": "Strikethrough",
"clearFormat": "Clear Format",
"clearAll": "Clear All",
"cut": "Cut",
"copy": "Copy",
"paste": "Paste",
"unorderedList": "Bulleted List",
"orderedList": "Numbered List",
"indent": "Increase Indent",
"outdent": "Decrease Indent",
"undo": "Undo",
"redo": "Redo",
"superscript": "Superscript",
"subscript": "Subscript",
"createLink": "Insert Link",
"openLink": "Open Link",
"editLink": "Edit Link",
"removeLink": "Remove Link",
"image": "Insert Image",
"audio": "Insert Audio",
"video": "Insert Video",
"replace": "Replace",
"numberFormatList": "Number Format List",
"bulletFormatList": "Bullet Format List",
"audioReplace": "Replace",
"videoReplace": "Replace",
"videoAlign": "Align",
"videoDimension": "Dimension",
"audioRemove": "Remove",
"videoRemove": "Remove",
"audioLayoutOption": "Layout option",
"videoLayoutOption": "Layout option",
"align": "Align",
"caption": "Caption",
"remove": "Remove",
"insertLink": "Insert Link",
"display": "Display",
"altText": "Alternative Text",
"dimension": "Change Size",
"fullscreen": "Maximize",
"maximize": "Maximize",
"minimize": "Minimize",
"lowerCase": "Lower Case",
"upperCase": "Upper Case",
"print": "Print",
"formats": "Formats",
"sourcecode": "Code View",
"preview": "Preview",
"viewside": "ViewSide",
"insertCode": "Insert Code",
"blockquote": "Blockquote",
"linkText": "Display Text",
"linkTooltipLabel": "Title",
"linkWebUrl": "Web Address",
"linkTitle": "Enter a title",
"linkurl": "http://example.com",
"linkOpenInNewWindow": "Open Link in New Window",
"linkHeader": "Insert Link",
"dialogInsert": "Insert",
"dialogCancel": "Cancel",
"dialogUpdate": "Update",
"imageHeader": "Insert Image",
"audioHeader": "Insert Audio",
"videoHeader": "Insert Video",
"imageLinkHeader": "You can also provide a link from the web",
"audioLinkHeader": "You can also provide a link from the web",
"videoLinkHeader": "Web URL",
"embedVideoLinkHeader": "Media Embed URL",
"mdimageLink": "Please provide a URL for your image",
"imageUploadMessage": "Drop image here or browse to upload",
"audioUploadMessage": "Drop an audio file or browse to upload",
"videoUploadMessage": "Drop a video file or browse to upload",
"imageDeviceUploadMessage": "Click here to upload",
"audioDeviceUploadMessage": "Click here to upload",
"videoDeviceUploadMessage": "Click here to upload",
"imageAlternateText": "Alternate Text",
"alternateHeader": "Alternative Text",
"browse": "Browse",
"imageUrl": "http://example.com/image.png",
"audioUrl": "https://example.com/audio.mp3",
"videoUrl": "https://example.com/video.mp4",
"webUrl": "Web URL",
"embedUrl": "Embed Code",
"imageCaption": "Caption",
"imageSizeHeader": "Image Size",
"videoSizeHeader": "Video Size",
"imageHeight": "Height",
"imageWidth": "Width",
"videoHeight": "Height",
"videoWidth": "Width",
"textPlaceholder": "Enter Text",
"inserttablebtn": "Insert Table",
"tabledialogHeader": "Insert Table",
"tableWidth": "Width",
"cellpadding": "Cell Padding",
"cellspacing": "Cell Spacing",
"columns": "Number of columns",
"rows": "Number of rows",
"tableRows": "Row",
"tableColumns": "Column",
"tableCellHorizontalAlign": "Table Cell Horizontal Align",
"tableCellVerticalAlign": "Table Cell Vertical Align",
"createTable": "Create Table",
"removeTable": "Remove Table",
"tableHeader": "Header Row",
"tableRemove": "Delete Table",
"tableCellBackground": "Table Cell Background",
"tableEditProperties": "Table Edit Properties",
"styles": "Styles",
"insertColumnLeft": "Insert Column Left",
"insertColumnRight": "Insert Column Right",
"deleteColumn": "Delete Column",
"insertRowBefore": "Insert Row Before",
"insertRowAfter": "Insert Row After",
"deleteRow": "Delete Row",
"tableEditHeader": "Edit Table",
"TableHeadingText": "Heading",
"TableColText": "Col",
"imageInsertLinkHeader": "Insert Link",
"editImageHeader": "Edit Image",
"editAudioHeader": "Edit Audio",
"editVideoHeader": "Edit Video",
"alignmentsDropDownLeft": "Align Left",
"alignmentsDropDownCenter": "Align Center",
"alignmentsDropDownRight": "Align Right",
"alignmentsDropDownJustify": "Align Justify",
"imageDisplayDropDownInline": "Inline",
"imageDisplayDropDownBreak": "Break",
"tableInsertRowDropDownBefore": "Insert row before",
"tableInsertRowDropDownAfter": "Insert row after",
"tableInsertRowDropDownDelete": "Delete row",
"tableInsertColumnDropDownLeft": "Insert column left",
"tableInsertColumnDropDownRight": "Insert column right",
"tableInsertColumnDropDownDelete": "Delete column",
"tableVerticalAlignDropDownTop": "Align Top",
"tableVerticalAlignDropDownMiddle": "Align Middle",
"tableVerticalAlignDropDownBottom": "Align Bottom",
"tableStylesDropDownDashedBorder": "Dashed Borders",
"tableStylesDropDownAlternateRows": "Alternate Rows",
"pasteFormat": "Paste Format",
"pasteFormatContent": "Choose the formatting action",
"plainText": "Plain Text",
"cleanFormat": "Clean",
"keepFormat": "Keep",
"pasteDialogOk": "OK",
"pasteDialogCancel": "Cancel",
"fileManager": "File Manager",
"fileDialogHeader": "File Browser",
"formatsDropDownParagraph": "Paragraph",
"formatsDropDownCode": "Code",
"formatsDropDownQuotation": "Blockquote",
"formatsDropDownHeading1": "Heading 1",
"formatsDropDownHeading2": "Heading 2",
"formatsDropDownHeading3": "Heading 3",
"formatsDropDownHeading4": "Heading 4",
"fontNameSegoeUI": "Segoe UI",
"fontNameArial": "Arial",
"fontNameGeorgia": "Georgia",
"fontNameImpact": "Impact",
"fontNameTahoma": "Tahoma",
"fontNameTimesNewRoman": "Times New Roman",
"fontNameVerdana": "Verdana",
"numberFormatListNumber": "Number",
"numberFormatListLowerAlpha": "LowerAlpha",
"numberFormatListUpperAlpha": "UpperAlpha",
"numberFormatListLowerRoman": "LowerRoman",
"numberFormatListUpperRoman": "UpperRoman",
"numberFormatListLowerGreek": "LowerGreek",
"bulletFormatListDisc": "Disc",
"bulletFormatListCircle": "Circle",
"bulletFormatListSquare": "Square",
"numberFormatListNone": "None",
"bulletFormatListNone":"None",
"formatPainter": "Format Painter",
"emojiPicker": "Emoji Picker",
"embeddedCode": "Embedded Code",
"pasteEmbeddedCodeHere": "Paste Embedded Code here",
"emojiPickerTypeToFind": "Type to find",
"emojiPickerNoResultFound": "No results found",
"emojiPickerTrySomethingElse": "Try something else",
"linkAriaLabel": "Open in new window",
"unsupportedImage": "Unsupported file format",
"mergecells": "Merge cells",
"verticalsplit": "Vertical split",
"horizontalsplit": "Horizontal split",
"slashMenuItemHeadingOneText": "Heading 1",
"slashMenuItemHeadingOneDescription": "Use this for a top level heading or title.",
"slashMenuItemHeadingTwoText": "Heading 2",
"slashMenuItemHeadingTwoDescription": "Use this for key sections.",
"slashMenuItemHeadingThreeText": "Heading 3",
"slashMenuItemHeadingThreeDescription": "Use this for sub sections and group headings.",
"slashMenuItemHeadingFourText": "Heading 4",
"slashMenuItemHeadingFourDescription": "Use this for the key points of the sub topics.",
"slashMenuItemParagraphText": "Paragraph",
"slashMenuItemParagraphDescription": "Writing with paragraphs.",
"slashMenuItemBlockquoteText": "Blockquote",
"slashMenuItemBlockquoteDescription": "Create a quote or citation.",
"slashMenuItemOrderedListText": "Ordered List",
"slashMenuItemOrderedListDescription": "Create an ordered list.",
"slashMenuItemUnorderedListText": "Unordered List",
"slashMenuItemUnorderedListDescription": "Create an unordered list.",
"slashMenuItemCodeText": "CodeBlock",
"slashMenuItemCodeDescription": "Create a preformatted code block.",
"slashMenuItemTableText": "Table",
"slashMenuItemTableDescription": "Insert a table.",
"slashMenuItemLinkText": "Link",
"slashMenuItemLinkDescription": "Insert a link.",
"slashMenuItemImageText": "Image",
"slashMenuItemImageDescription": "Insert an image.",
"slashMenuItemAudioText": "Audio",
"slashMenuItemAudioDescription": "Insert an audio.",
"slashMenuItemVideoText": "Video",
"slashMenuItemVideoDescription": "Insert a video.",
"slashMenuItemEmojiText": "Emojipicker",
"slashMenuItemEmojiDescription": "Use emojis to express ideas and emoticons.",
}
}To localize the editor’s strings with your own localization, copy the default language information and localize the strings in the values column. For example, to localize the editor in German (“de-DE”).
'de-DE': {
'richtexteditor': {
"alignments": "Ausrichtungen",
"justifyLeft": "Linksbündig",
"justifyCenter": "Zentriert",
"justifyRight": "Rechts ausrichten",
"justifyFull": "Justify ausrichten",
"fontName": "Schriftartenname",
"fontSize": "Schriftgrösse",
"fontColor": "Schriftfarbe",
"backgroundColor": "Hintergrundfarbe",
"bold": "Fett gedruckt",
"italic": "Kursiv",
"underline": "Unterstreichen",
"strikethrough": "Durchgestrichen",
"clearFormat": "Format löschen",
"clearAll": "Alles löschen",
"cut": "Ausschneiden",
"copy": "Kopieren",
"paste": "Einfügen",
"unorderedList": "Aufzählung",
"orderedList": "Nummerierte Liste",
"indent": "Einzug vergrössern",
"outdent": "Einzug verringern",
"undo": "Rückgängig machen",
"redo": "Wiederholen",
"superscript": "Hochgestellt",
"subscript": "Tiefgestellt",
"createLink": "Hyperlink einfügen",
"openLink": "Verbindung öffnen",
"editLink": "Link bearbeiten",
"removeLink": "Link entfernen",
"image": "Bild einfügen",
"replace": "Ersetzen",
"numberFormatList": "Liste der Zahlenformate",
"bulletFormatList": "Liste der Aufzählungsformate",
"audioReplace": "Ersetzen",
"videoReplace": "Ersetzen",
"videoAlign": "Ausrichten",
"videoDimension": "Abmessungen",
"audioRemove": "Entfernen",
"videoRemove": "Entfernen",
"audioLayoutOption": "Layout-Option",
"videoLayoutOption": "Layout-Option",
"align": "Ausrichten",
"caption": "Bildbeschreibung",
"remove": "Entfernen",
"insertLink": "Link einfügen",
"display": "Anzeige",
"altText": "alternativer Text",
"dimension": "Grösse ändern",
"fullscreen": "Maximieren",
"maximize": "Maximieren",
"minimize": "Minimieren",
"lowerCase": "Kleinbuchstaben",
"upperCase": "Grossbuchstaben",
"print": "Drucken",
"formats": "Formate",
"sourcecode": "Code-Ansicht",
"preview": "Vorschau",
"viewside": "ViewSide",
"insertCode": "Code eingeben",
"linkText": "Text anzeigen",
"linkTooltipLabel": "Titel",
"linkWebUrl": "Webadresse",
"linkTitle": "Geben Sie einen Titel ein",
"linkurl": "https://example.com",
"linkOpenInNewWindow": "Link in neuem Fenster öffnen",
"linkHeader": "Link einfügen",
"dialogInsert": "Einfügen",
"dialogCancel": "Abbrechen",
"dialogUpdate": "Aktualisieren",
"imageHeader": "Bild einfügen",
"audioHeader": "Audio einfügen",
"videoHeader": "Video einfügen",
"imageLinkHeader": "Sie können auch einen Link aus dem Internet bereitstellen",
"audioLinkHeader": "Sie können auch einen Link aus dem Internet bereitstellen",
"videoLinkHeader": "Web-URL",
"embedVideoLinkHeader": "Medieneinbettungs-URL",
"mdimageLink": "Bitte geben Sie eine URL für Ihr Bild an",
"imageUploadMessage": "Legen Sie das Bild hier ab oder durchsuchen Sie es, um es hochzuladen",
"audioUploadMessage": "Legen Sie eine Audiodatei ab oder navigieren Sie zum Hochladen",
"videoUploadMessage": "Legen Sie eine Videodatei ab oder navigieren Sie zum Hochladen",
"imageDeviceUploadMessage": "Klicken Sie hier zum Hochladen",
"audioDeviceUploadMessage": "Klicken Sie hier, um es hochzuladen",
"videoDeviceUploadMessage": "Klicken Sie hier, um es hochzuladen",
"imageAlternateText": "Alternativer Text",
"alternateHeader": "alternativer Text",
"browse": "Durchsuche",
"imageUrl": "https://example.com/image.png",
"audioUrl": "https://example.com/audio.mp3",
"videoUrl": "https://example.com/video.mp4",
"webUrl": "Web-URL",
"embedUrl": "Code einbetten",
"imageCaption": "Untertitel",
"imageSizeHeader": "Bildgrösse",
"imageHeight": "Höhe",
"imageWidth": "Breite",
"videoHeight": "Höhe",
"videoWidth": "Breite",
"textPlaceholder": "Text eingeben",
"inserttablebtn": "Tabelle einfügen",
"tabledialogHeader": "Tabelle einfügen",
"tableWidth": "Breite",
"cellpadding": "Zellauffüllung",
"cellspacing": "Zellenabstand",
"columns": "Anzahl der Spalten",
"rows": "Zeilenanzahl",
"tableRows": "Reihe",
"tableColumns": "Spalte",
"tableCellHorizontalAlign": "Horizontale Ausrichtung der Tabellenzelle",
"tableCellVerticalAlign": "Tabelle vertikal ausrichten",
"createTable": "Tabelle erstellen",
"removeTable": "Tabelle entfernen",
"tableHeader": "Kopfzeile",
"tableRemove": "Tabelle löschen",
"tableCellBackgroun": "Tabellenzellenhintergrund",
"tableEditProperties": "Tabelle Eigenschaften bearbeiten",
"styles": "Stile",
"insertColumnLeft": "Spalte links einfügen",
"insertColumnRight": "Spalte rechts einfügen",
"deleteColumn": "Spalte löschen",
"insertRowBefore": "Zeile davor einfügen",
"insertRowAfter": "Zeile danach einfügen",
"deleteRow": "Zeile löschen",
"tableEditHeader": "Tabelle bearbeiten",
"TableHeadingText": "Überschrift",
"TableColText": "Col",
"imageInsertLinkHeader": "Link einfügen",
"editImageHeader": "Bild bearbeiten",
"alignmentsDropDownLeft": "Linksbündig",
"alignmentsDropDownCenter": "Zentriert",
"alignmentsDropDownRight": "Rechts ausrichten",
"alignmentsDropDownJustify": "Justify ausrichten",
"imageDisplayDropDownInline": "In der Reihe",
"imageDisplayDropDownBreak": "Brechen",
"audioLayoutOptionDropDownInline": "Im Einklang",
"audioLayoutOptionDropDownBreak": "Brechen",
"videoLayoutOptionDropDownInline": "Im Einklang",
"videoLayoutOptionDropDownBreak": "Brechen",
"tableInsertRowDropDownBefore": "Zeile davor einfügen",
"tableInsertRowDropDownAfter": "Zeile danach einfügen",
"tableInsertRowDropDownDelete": "Zeile löschen",
"tableInsertColumnDropDownLeft": "Spalte links einfügen",
"tableInsertColumnDropDownRight": "Spalte rechts einfügen",
"tableInsertColumnDropDownDelete": "Spalte löschen",
"tableVerticalAlignDropDownTop": "Oben ausrichten",
"tableVerticalAlignDropDownMiddle": "Mitte ausrichten",
"tableVerticalAlignDropDownBottom": "Unten ausrichten",
"tableStylesDropDownDashedBorder": "Gestrichelte Grenzen",
"tableStylesDropDownAlternateRows": "Alternative Zeilen",
"pasteFormat": "Format einfügen",
"pasteFormatContent": "Wählen Sie die Formatierungsaktion",
"plainText": "Einfacher Text",
"cleanFormat": "Sauber",
"keepFormat": "Behalten",
"pasteDialogOk": "in Ordnung",
"pasteDialogCancel": "Stornieren",
"fileManager": "Dateimanager",
"fileDialogHeader": "Dateibrowser",
"formatsDropDownParagraph": "Absatz",
"formatsDropDownCode": "Code",
"formatsDropDownQuotation": "Zitat",
"formatsDropDownHeading1": "Überschrift 1",
"formatsDropDownHeading2": "Überschrift 2",
"formatsDropDownHeading3": "Überschrift 3",
"formatsDropDownHeading4": "Überschrift 4",
"fontNameSegoeUI": "SegoeUI",
"fontNameArial": "Arial",
"fontNameGeorgia": "Georgia",
"fontNameImpact": "Impact",
"fontNameTahoma": "Tahoma",
"fontNameTimesNewRoman": "Times New Roman",
"fontNameVerdana": "Verdana",
"formatsOLListNumber": "Nummer",
"formatsOLListLowerAlpha": "LowerAlpha",
"formatsOLListUpperAlpha": "OberAlpha",
"formatsOLListLowerRoman": "Niederroman",
"formatsOLListUpperRoman": "Oberrömisch",
"formatsOLListLowerGreek": "Niedergriechisch",
"formatsULListDisc": "Rabatt",
"formatsULListCircle": "Kreis",
"formatsULListSquare": "Quadrat",
"formatsOLListNone": "Keiner",
"formatsULListNone": "Keiner",
"formatPainter": "Format Maler",
"emojiPicker": "Emoji-Picker",
"embeddedCode": "Eingebetteter Code",
"pasteEmbeddedCodeHere": "Fügen Sie hier eingebetteten Code ein",
"emojiPickerTypeToFind": "Geben Sie „Suchen“ ein",
"emojiPickerNoResultFound": "keine Ergebnisse gefunden",
"emojiPickerTrySomethingElse": "Versuchen Sie etwas anderes",
"linkAriaLabel": "In einem neuen Fenster öffnen",
"imageLinkAriaLabel": "In einem neuen Fenster öffnen",
"unsupportedImage": "Nicht unterstütztes Dateiformat",
"mergecells": "Zellen verbinden",
"verticalsplit": "Vertikale Aufteilung",
"horizontalsplit": "Horizontale Aufteilung",
"numberFormatListLowerAlpha": "Unteres Alpha",
"numberFormatListUpperAlpha": "Oberes Alpha",
"numberFormatListLowerRoman": "Niederrömisch",
"numberFormatListUpperRoman": "Oberrömisch",
"numberFormatListLowerGreek": "Niedergriechisch",
"slashMenuItemHeadingOneText": "Überschrift 1",
"slashMenuItemHeadingOneDescription": "Verwenden Sie dies für eine Überschrift oder einen Titel der obersten Ebene.",
"slashMenuItemHeadingTwoText": "Überschrift 2",
"slashMenuItemHeadingTwoDescription": "Verwenden Sie dies für wichtige Abschnitte.",
"slashMenuItemHeadingThreeText": "Überschrift 3",
"slashMenuItemHeadingThreeDescription": "Verwenden Sie dies für Unterabschnitte und Gruppenüberschriften.",
"slashMenuItemHeadingFourText": "Überschrift 4",
"slashMenuItemHeadingFourDescription": "Verwenden Sie dies für die Kernpunkte der Unterthemen.",
"slashMenuItemParagraphText": "Absatz",
"slashMenuItemParagraphDescription": "Mit Absätzen schreiben.",
"slashMenuItemBlockquoteText": "Blockquote",
"slashMenuItemBlockquoteDescription": "Erstellen Sie ein Zitat oder Zitat.",
"slashMenuItemOrderedListText": "Geordnete Liste",
"slashMenuItemOrderedListDescription": "Erstellen Sie eine geordnete Liste.",
"slashMenuItemUnorderedListText": "Ungeordnete Liste",
"slashMenuItemUnorderedListDescription": "Erstellen Sie eine ungeordnete Liste.",
"slashMenuItemCodeText": "CodeBlock",
"slashMenuItemCodeDescription": "Erstellen Sie einen vorformatierten Codeblock.",
"slashMenuItemTableText": "Tisch",
"slashMenuItemTableDescription": "Fügen Sie eine Tabelle ein.",
"slashMenuItemLinkText": "Link",
"slashMenuItemLinkDescription": "Fügen Sie einen Link ein.",
"slashMenuItemImageText": "Bild",
"slashMenuItemImageDescription": "Fügen Sie ein Bild ein.",
"slashMenuItemAudioText": "Audio",
"slashMenuItemAudioDescription": "Fügen Sie ein Audio ein.",
"slashMenuItemVideoText": "Video",
"slashMenuItemVideoDescription": "Fügen Sie ein Video ein.",
"slashMenuItemEmojiText": "Emojipicker",
"slashMenuItemEmojiDescription": "Verwenden Sie Emojis, um Ideen und Emoticons auszudrücken."
}
}The sample below demonstrates the Rich Text Editor component rendered in German (“de-DE”) using the locale property.
<template>
<ejs-richtexteditor ref="defaultRTE" :height="340" locale="de-DE" :value="rteValue"></ejs-richtexteditor>
</template>
<script setup>
import { provide } from "vue";
import { L10n } from '@syncfusion/ej2-base';
import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';
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": "Link einfügen",
"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",
"inserttablebtn": "Tabelle einfügen",
"tabledialogHeader": "Tabelle einfügen",
"tableWidth": "Breite",
"cellpadding": "Zellauffüllung",
"cellspacing": "Zellabstand",
"columns": "Anzahl der Spalten",
"rows": "Reihenanzahl",
"tableRows": "Tabellenzeilen",
"tableColumns": "Tabellenspalten",
"tableCellHorizontalAlign": "Horizontale Ausrichtung der Tabellenzelle",
"tableCellVerticalAlign": "Vertikale Ausrichtung der Tabellenzelle",
"createTable": "Tabelle erstellen",
"removeTable": "Tabelle entfernen",
"tableHeader": "Tabellenkopfzeile",
"tableRemove": "Tabelle entfernen",
"tableCellBackground": "Tabellenzellenhintergrund",
"tableEditProperties": "Eigenschaften der Tabellenbearbeitung",
"styles": "Styles",
"insertColumnLeft": "Spalte links einfügen",
"insertColumnRight": "Spalte rechts einfügen",
"deleteColumn": "Spalte löschen",
"insertRowBefore": "Zeile vor einfügen",
"insertRowAfter": "Zeile einfügen nach",
"deleteRow": "Zeile löschen",
"tableEditHeader": "Tabelle bearbeiten",
"TableHeadingText": "Überschrift",
"TableColText": "Col",
"imageInsertLinkHeader": "Link einfügen",
"editImageHeader": "Bild bearbeiten",
"alignmentsDropDownLeft": "Linksbündig",
"alignmentsDropDownCenter": "Im Zentrum anordnen",
"alignmentsDropDownRight": "Rechts ausrichten",
"alignmentsDropDownJustify": "Justize ausrichten",
"imageDisplayDropDownInline": "In der Reihe",
"imageDisplayDropDownBreak": "Brechen",
"tableInsertRowDropDownBefore": "Reihe vorher einfügen",
"tableInsertRowDropDownAfter": "Zeile danach einfügen",
"tableInsertRowDropDownDelete": "Zeile löschen",
"tableInsertColumnDropDownLeft": "Spalte links einfügen",
"tableInsertColumnDropDownRight": "Spalte rechts einfügen",
"tableInsertColumnDropDownDelete": "Spalte löschen",
"tableVerticalAlignDropDownTop": "Top ausrichten",
"tableVerticalAlignDropDownMiddle": "Mitte ausrichten",
"tableVerticalAlignDropDownBottom": "Unten ausrichten",
"tableStylesDropDownDashedBorder": "Gestrichelte Grenzen",
"tableStylesDropDownAlternateRows": "Alternative Zeilen",
"pasteFormat": "Format einfügen",
"pasteFormatContent": "Wählen Sie die Formatierungsaktion aus",
"plainText": "Einfacher Text",
"cleanFormat": "sauber",
"keepFormat": "Behalten",
"formatsDropDownParagraph": "Absatz",
"formatsDropDownCode": "Kodex",
"formatsDropDownQuotation": "Zitat",
"formatsDropDownHeading1": "Überschrift 1",
"formatsDropDownHeading2": "Überschrift 2",
"formatsDropDownHeading3": "Überschrift 3",
"formatsDropDownHeading4": "Überschrift 4",
"fontNameSegoeUI": "Segoe UI",
"fontNameArial": "Arial",
"fontNameGeorgia": "Georgia",
"fontNameImpact": "Einschlag'",
"fontNameTahoma": "Tahoma",
"fontNameTimesNewRoman": "Mal Neu römisch",
"fontNameVerdana": "Verdana"
}
}
});
const rteValue = `<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>`;
provide('richtexteditor', [Toolbar, Link, Image, HtmlEditor, QuickToolbar]);
</script>
<style>
@import "https://ej2.syncfusion.com/vue/documentation/../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/tailwind3.css";
</style><template>
<ejs-richtexteditor ref="defaultRTE" :height="340" locale="de-DE" :value="rteValue"></ejs-richtexteditor>
</template>
<script>
import { L10n } from '@syncfusion/ej2-base';
import { RichTextEditorComponent, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';
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": "Link einfügen",
"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",
"inserttablebtn": "Tabelle einfügen",
"tabledialogHeader": "Tabelle einfügen",
"tableWidth": "Breite",
"cellpadding": "Zellauffüllung",
"cellspacing": "Zellabstand",
"columns": "Anzahl der Spalten",
"rows": "Reihenanzahl",
"tableRows": "Tabellenzeilen",
"tableColumns": "Tabellenspalten",
"tableCellHorizontalAlign": "Horizontale Ausrichtung der Tabellenzelle",
"tableCellVerticalAlign": "Vertikale Ausrichtung der Tabellenzelle",
"createTable": "Tabelle erstellen",
"removeTable": "Tabelle entfernen",
"tableHeader": "Tabellenkopfzeile",
"tableRemove": "Tabelle entfernen",
"tableCellBackground": "Tabellenzellenhintergrund",
"tableEditProperties": "Eigenschaften der Tabellenbearbeitung",
"styles": "Styles",
"insertColumnLeft": "Spalte links einfügen",
"insertColumnRight": "Spalte rechts einfügen",
"deleteColumn": "Spalte löschen",
"insertRowBefore": "Zeile vor einfügen",
"insertRowAfter": "Zeile einfügen nach",
"deleteRow": "Zeile löschen",
"tableEditHeader": "Tabelle bearbeiten",
"TableHeadingText": "Überschrift",
"TableColText": "Col",
"imageInsertLinkHeader": "Link einfügen",
"editImageHeader": "Bild bearbeiten",
"alignmentsDropDownLeft": "Linksbündig",
"alignmentsDropDownCenter": "Im Zentrum anordnen",
"alignmentsDropDownRight": "Rechts ausrichten",
"alignmentsDropDownJustify": "Justize ausrichten",
"imageDisplayDropDownInline": "In der Reihe",
"imageDisplayDropDownBreak": "Brechen",
"tableInsertRowDropDownBefore": "Reihe vorher einfügen",
"tableInsertRowDropDownAfter": "Zeile danach einfügen",
"tableInsertRowDropDownDelete": "Zeile löschen",
"tableInsertColumnDropDownLeft": "Spalte links einfügen",
"tableInsertColumnDropDownRight": "Spalte rechts einfügen",
"tableInsertColumnDropDownDelete": "Spalte löschen",
"tableVerticalAlignDropDownTop": "Top ausrichten",
"tableVerticalAlignDropDownMiddle": "Mitte ausrichten",
"tableVerticalAlignDropDownBottom": "Unten ausrichten",
"tableStylesDropDownDashedBorder": "Gestrichelte Grenzen",
"tableStylesDropDownAlternateRows": "Alternative Zeilen",
"pasteFormat": "Format einfügen",
"pasteFormatContent": "Wählen Sie die Formatierungsaktion aus",
"plainText": "Einfacher Text",
"cleanFormat": "sauber",
"keepFormat": "Behalten",
"formatsDropDownParagraph": "Absatz",
"formatsDropDownCode": "Kodex",
"formatsDropDownQuotation": "Zitat",
"formatsDropDownHeading1": "Überschrift 1",
"formatsDropDownHeading2": "Überschrift 2",
"formatsDropDownHeading3": "Überschrift 3",
"formatsDropDownHeading4": "Überschrift 4",
"fontNameSegoeUI": "Segoe UI",
"fontNameArial": "Arial",
"fontNameGeorgia": "Georgia",
"fontNameImpact": "Einschlag'",
"fontNameTahoma": "Tahoma",
"fontNameTimesNewRoman": "Mal Neu römisch",
"fontNameVerdana": "Verdana"
}
}
});
export default {
name: "App",
components: {
"ejs-richtexteditor": RichTextEditorComponent
},
data() {
return {
rteValue: `<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>`,
}
},
provide: {
richtexteditor: [Toolbar, Link, Image, HtmlEditor, QuickToolbar]
}
}
</script>
<style>
@import "https://ej2.syncfusion.com/vue/documentation/../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/tailwind3.css";
</style>Enable Right-to-Left (RTL) mode
The enableRtl property specifies the direction of the Rich Text Editor component. This property can be enabled for writing systems that require right-to-left direction, such as Arabic and Hebrew.
When RTL (right-to-left) support is enabled, the e-rtl class will be added to the root element. Customizations can be made based on this class. Use the following CSS to customize the Rich Text Editor in RTL (right-to-left) mode.
.e-richtexteditor .e-rtl {
background-color: antiquewhite;
}This direction does not change based on the
localeproperty.
<template>
<ejs-richtexteditor ref="defaultRTE" :height="340" enableRtl=true :value="rteValue"></ejs-richtexteditor>
</template>
<script setup>
import { provide } from "vue";
import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';
const rteValue = `<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>`;
provide('richtexteditor', [Toolbar, Link, Image, HtmlEditor, QuickToolbar]);
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-base/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-vue-lists/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-vue-splitbuttons/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/tailwind3.css";
</style><template>
<ejs-richtexteditor ref="defaultRTE" :height="340" enableRtl=true :value="rteValue"></ejs-richtexteditor>
</template>
<script>
import { RichTextEditorComponent, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';
export default {
name: "App",
components: {
"ejs-richtexteditor": RichTextEditorComponent
},
data() {
return {
rteValue: `<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides <IFRAME> and <DIV> modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>`,
}
},
provide: {
richtexteditor: [Toolbar, Link, Image, HtmlEditor, QuickToolbar]
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-base/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-vue-lists/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-vue-splitbuttons/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/tailwind3.css";
</style>