Right to left in Vue Document editor component

11 Jun 202424 minutes to read

Document Editor provides RTL (right-to-left) support. This can be enabled using the “enableRtl” property.

<template>
    <div id="app">
        <ejs-documenteditor ref='documenteditor' id='container' pageOutline='#E0E0E0' height="370px"
            style="width: 100%;" :enablePrint='true' :enableSfdtExport='true' :enableSelection='true'
            :enableContextMenu='true' :enableSearch='true' enableOptionsPane='true' :enableWordExport='true'
            :enableTextExport='true' :enableEditor='true' :enableImageResizer='true' :enableEditorHistory='true'
            enableHyperlinkDialog='true' :enableTableDialog='true' :enableBookmarkDialog='true'
            :enableTableOfContentsDialog='true' :enablePageSetupDialog='true' :enableStyleDialog='true'
            :enableListDialog='true' :enableParagraphDialog='true' :enableFontDialog='true'
            :enableTablePropertiesDialog='true' :enableBordersAndShadingDialog='true' :enableTableOptionsDialog='true'
            :enableRtl='true' locale='ar-AE'></ejs-documenteditor>
    </div>
</template>
<script setup>
import { provide, onMounted, ref } from "vue";
import { DocumentEditorComponent as EjsDocumenteditor, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-vue-documenteditor';
import { L10n, setCulture } from '@syncfusion/ej2-base';

L10n.load({
    'ar-AE': {
        'documenteditor': {
            'Table': 'لجدول',
            'Row': 'لصف',
            'Cell': 'الخليه',
            'Ok': 'موافق',
            'Cancel': 'إلغاء الأمر',
            'Size': 'حجم',
            'Preferred Width': 'العرض المفضل',
            'Points': 'نقاط',
            'Percent': 'المائه',
            'Measure in': 'القياس في',
            'Alignment': 'محاذاه',
            'Left': 'ليسار',
            'Center': 'مركز',
            'Right': 'الحق',
            'Justify': 'تبرير',
            'Indent from left': 'مسافة بادئه من اليسار',
            'Borders and Shading': 'الحدود والتظليل',
            'Options': 'خيارات',
            'Specify height': 'تحديد الارتفاع',
            'At least': 'الاقل',
            'Exactly': 'تماما',
            'Row height is': 'ارتفاع الصف هو',
            'Allow row to break across pages': 'السماح بفصل الصف عبر الصفحات',
            'Repeat as header row at the top of each page': 'تكرار كصف راس في اعلي كل صفحه',
            'Vertical alignment': 'محاذاة عمودي',
            'Top': 'أعلى',
            'Bottom': 'اسفل',
            'Default cell margins': 'هوامش الخلية الافتراضية',
            'Default cell spacing': 'تباعد الخلايا الافتراضي',
            'Allow spacing between cells': 'السماح بالتباعد بين الخلايا',
            'Cell margins': 'هوامش الخلية',
            'Same as the whole table': 'نفس الجدول بأكمله',
            'Borders': 'الحدود',
            'None': 'اي',
            'Single': 'واحد',
            'Dot': 'نقطه',
            'DashSmallGap': 'داشسمجاب',
            'DashLargeGap': 'الاتحاد الخاص',
            'DashDot': 'داشدوت',
            'DashDotDot': 'ددهدودوت',
            'Double': 'انقر نقرا مزدوجا',
            'Triple': 'الثلاثي',
            'ThinThickSmallGap': 'فجوه صغيره سميكه رقيق',
            'ThickThinSmallGap': 'الفجوة الصغيرة رقيقه سميكه',
            'ThinThickThinSmallGap': 'صغيره سميكه رقيقه الفجوة الصغيرة',
            'ThinThickMediumGap': 'فجوه متوسطه سميك',
            'ThickThinMediumGap': 'سميكه الفجوة متوسطه رقيقه',
            'ThinThickThinMediumGap': 'رقيقه سميكه متوسطه الفجوة',
            'ThinThickLargeGap': 'الفجوة الكبيرة رقيقه سميكه',
            'ThickThinLargeGap': 'فجوه كبيره رقيقه سميك',
            'ThinThickThinLargeGap': 'رقيقه سميكه الفجوة الكبيرة',
            'SingleWavy': 'واحد مائج',
            'DoubleWavy': 'مزدوج مائج',
            'DashDotStroked': 'اندفاعه نقطه القوية',
            'Emboss3D': 'D3مزخرف',
            'Engrave3D': 'D3نقش',
            'Outset': 'البدايه',
            'Inset': 'الداخلي',
            'Thick': 'سميكه',
            'Style': 'نمط',
            'Width': 'عرض',
            'Height': 'ارتفاع',
            'Letter': 'رساله',
            'Tabloid': 'التابلويد',
            'Legal': 'القانونيه',
            'Statement': 'بيان',
            'Executive': 'التنفيذي',
            'A3': 'A3',
            'A4': 'A4',
            'A5': 'A5',
            'B4': 'B4',
            'B5': 'B5',
            'Custom Size': 'حجم مخصص',
            'Different odd and even': 'مختلفه غريبه وحتى',
            'Different first page': 'الصفحة الاولي مختلفه',
            'From edge': 'من الحافة',
            'Header': 'راس',
            'Footer': 'تذييل الصفحه',
            'Margin': 'الهوامش',
            'Paper': 'الورق',
            'Layout': 'تخطيط',
            'Orientation': 'التوجه',
            'Landscape': 'المناظر الطبيعيه',
            'Portrait': 'صوره',
            'Table Of Contents': 'جدول المحتويات',
            'Show page numbers': 'إظهار أرقام الصفحات',
            'Right align page numbers': 'محاذاة أرقام الصفحات إلى اليمين',
            'Nothing': 'شيء',
            'Tab leader': 'قائد علامة التبويب',
            'Show levels': 'إظهار المستويات',
            'Use hyperlinks instead of page numbers': 'استخدام الارتباطات التشعبية بدلا من أرقام الصفحات',
            'Build table of contents from': 'بناء جدول محتويات من',
            'Styles': 'انماط',
            'Available styles': 'الأنماط المتوفرة',
            'TOC level': 'مستوي جدول المحتويات',
            'Heading': 'عنوان',
            'Heading 1': 'عنوان 1',
            'Heading 2': 'عنوان 2',
            'Heading 3': 'عنوان 3',
            'Heading 4': 'عنوان 4',
            'Heading 5': 'عنوان 5',
            'Heading 6': 'عنوان 6',
            'List Paragraph': 'فقره القائمة',
            'Normal': 'العاديه',
            'Outline levels': 'مستويات المخطط التفصيلي',
            'Table entry fields': 'حقول إدخال الجدول',
            'Modify': 'تعديل',
            'Color': 'لون',
            'Setting': 'اعداد',
            'Box': 'مربع',
            'All': 'جميع',
            'Custom': 'المخصصه',
            'Preview': 'معاينه',
            'Shading': 'التظليل',
            'Fill': 'ملء',
            'Apply To': 'تنطبق علي',
            'Table Properties': 'خصائص الجدول',
            'Cell Options': 'خيارات الخلية',
            'Table Options': 'خيارات الجدول',
            'Insert Table': 'ادراج جدول',
            'Number of columns': 'عدد الاعمده',
            'Number of rows': 'عدد الصفوف',
            'Text to display': 'النص الذي سيتم عرضه',
            'Address': 'عنوان',
            'Insert Hyperlink': 'ادراج ارتباط تشعبي',
            'Edit Hyperlink': 'تحرير ارتباط تشعبي',
            'Insert': 'ادراج',
            'General': 'العامه',
            'Indentation': 'المسافه البادئه',
            'Before text': 'قبل النص',
            'Special': 'الخاصه',
            'First line': 'السطر الأول',
            'Hanging': 'معلقه',
            'After text': 'بعد النص',
            'By': 'من',
            'Before': 'قبل',
            'Line Spacing': 'تباعد الأسطر',
            'After': 'بعد',
            'At': 'في',
            'Multiple': 'متعدده',
            'Spacing': 'تباعد',
            'Define new Multilevel list': 'تحديد قائمه متعددة الاصعده جديده',
            'List level': 'مستوي القائمة',
            'Choose level to modify': 'اختر المستوي الذي تريد تعديله',
            'Level': 'مستوي',
            'Number format': 'تنسيق الأرقام',
            'Number style for this level': 'نمط الرقم لهذا المستوي',
            'Enter formatting for number': 'إدخال تنسيق لرقم',
            'Start at': 'بداية من',
            'Restart list after': 'أعاده تشغيل قائمه بعد',
            'Position': 'موقف',
            'Text indent at': 'المسافة البادئة للنص في',
            'Aligned at': 'محاذاة في',
            'Follow number with': 'اتبع الرقم مع',
            'Tab character': 'حرف علامة التبويب',
            'Space': 'الفضاء',
            'Arabic': 'العربية',
            'UpRoman': 'حتى الروماني',
            'LowRoman': 'الرومانية منخفضه',
            'UpLetter': '',
            'LowLetter': '',
            'Number': 'عدد',
            'Leading zero': 'يؤدي صفر',
            'Bullet': 'رصاصه',
            'Ordinal': 'الترتيبيه',
            'Ordinal Text': 'النص الترتيبي',
            'For East': 'للشرق',
            'No Restart': 'لا أعاده تشغيل',
            'Font': 'الخط',
            'Font style': 'نمط الخط',
            'Underline style': 'نمط التسطير',
            'Font color': 'لون الخط',
            'Effects': 'الاثار',
            'Strikethrough': 'يتوسطه',
            'Superscript': 'مرتفع',
            'Subscript': 'منخفض',
            'Double strikethrough': 'خط مزدوج يتوسطه خط',
            'Regular': 'العاديه',
            'Bold': 'جريئه',
            'Italic': 'مائل',
            'Cut': 'قطع',
            'Copy': 'نسخ',
            'Paste': 'لصق',
            'Hyperlink': 'الارتباط التشعبي',
            'Open Hyperlink': 'فتح ارتباط تشعبي',
            'Copy Hyperlink': 'نسخ ارتباط تشعبي',
            'Remove Hyperlink': 'أزاله ارتباط تشعبي',
            'Paragraph': 'الفقره',
            'Linked(Paragraph and Character)': 'مرتبط (فقره وحرف)',
            'Character': 'حرف',
            'Merge Cells': 'دمج الخلايا',
            'Insert Above': 'ادراج أعلاه',
            'Insert Below': 'ادراج أدناه',
            'Insert Left': 'ادراج إلى اليسار',
            'Insert Right': 'ادراج اليمين',
            'Delete': 'حذف',
            'Delete Table': 'حذف جدول',
            'Delete Row': 'حذف صف',
            'Delete Column': 'حذف عمود',
            'File Name': 'اسم الملف',
            'Format Type': 'نوع التنسيق',
            'Save': 'حفظ',
            'Navigation': 'التنقل',
            'Results': 'نتائج',
            'Replace': 'استبدال',
            'Replace All': 'استبدال الكل',
            'We replaced all': 'استبدلنا جميع',
            'Find': 'العثور',
            'No matches': 'لا توجد تطابقات',
            'All Done': 'كل القيام به',
            'Result': 'نتيجه',
            'of': 'من',
            'instances': 'الحالات',
            'with': 'مع',
            'Click to follow link': 'انقر لمتابعه الارتباط',
            'Continue Numbering': 'متابعه الترقيم',
            'Bookmark name': 'اسم الإشارة المرجعية',
            'Close': 'اغلاق',
            'Restart At': 'أعاده التشغيل عند',
            'Properties': 'خصائص',
            'Name': 'اسم',
            'Style type': 'نوع النمط',
            'Style based on': 'نمط استنادا إلى',
            'Style for following paragraph': 'نمط للفقرة التالية',
            'Formatting': 'التنسيق',
            'Numbering and Bullets': 'الترقيم والتعداد النقطي',
            'Numbering': 'ترقيم',
            'Update Field': 'تحديث الحقل',
            'Edit Field': 'تحرير الحقل',
            'Bookmark': 'الإشارة المرجعية',
            'Page Setup': 'اعداد الصفحة',
            'No bookmarks found': 'لم يتم العثور علي إشارات مرجعيه',
            'Number format tooltip information': 'تنسيق رقم أحادي المستوي:' + '</br>' + '[بادئه]% [مستوي الاعداد] [لاحقه]' + '</br>'
                // tslint:disable-next-line:max-line-length
                + 'علي سبيل االمثال ، "الفصل% 1." سيتم عرض الترقيم مثل' + '</br>' + 'الفصل الأول- البند' + '</br>' + 'الفصل الثاني- البند' + '</br>...'
                + '</br>' + 'الفصل نون-البند' + '</br>'
                // tslint:disable-next-line:max-line-length
                + '</br>' + 'تنسيق رقم متعدد الإعدادات:' + '</br>' + '[بادئه]% [مستوي المستوي]' + '</br>' + '[لاحقه] + [بادئه]%' + '</br>' + '[المستوي] [لاحقه]'
                + '</br>' + 'علي سبيل المثال ، "% 1.% 2." سيتم عرض الترقيم مثل' + '</br>' + '1.1 البند' + '</br>' + '1.2 البند' + '</br>...' + '</br>' + '1. نون-البند',
            'Format': 'تنسيق',
            'Create New Style': 'إنشاء نمط جديد',
            'Modify Style': 'تعديل النمط',
            'New': 'الجديد',
            'Bullets': 'الرصاص',
            'Use bookmarks': 'استخدام الإشارات المرجعية',
            'Table of Contents': 'جدول المحتويات',
            'AutoFit': 'الاحتواء',
            'AutoFit to Contents': 'احتواء تلقائي للمحتويات',
            'AutoFit to Window': 'احتواء تلقائي للإطار',
            'Fixed Column Width': 'عرض العمود الثابت',
            'Reset': 'اعاده تعيين',
            'Match case': 'حاله المباراة',
            'Whole words': 'كلمات كامل',
            'Add': 'اضافه',
            'Go To': 'الانتقال إلى',
            'Search for': 'البحث عن',
            'Replace with': 'استبدال',
            'TOC 1': 'جدول المحتويات 1',
            'TOC 2': 'جدول المحتويات 2',
            'TOC 3': 'جدول المحتويات 3',
            'TOC 4': 'جدول المحتويات 4',
            'TOC 5': 'جدول المحتويات 5',
            'TOC 6': 'جدول المحتويات 6',
            'TOC 7': 'جدول المحتويات 7',
            'TOC 8': 'جدول المحتويات 8',
            'TOC 9': 'جدول المحتويات 9',
            'Right-to-left': 'من اليمين إلى اليسار',
            'Left-to-right': 'من اليسار إلى اليمين',
            'Direction': 'الاتجاه',
            'Table direction': 'اتجاه الجدول',
            'Indent from right': 'مسافة بادئه من اليمين',
            'Page': 'صفحه',
            'Fit one page': 'احتواء صفحه واحد',
            'Fit page width': 'احتواء عرض الصفحة',
            // tslint:disable-next-line:max-line-length
            'The current page number in the document. Click or tap to navigate specific page.': 'رقم الصفحة الحالية في المستند. انقر أأو اضغط للتنقل في صفحه معينه'
        },
        'colorpicker': {
            'Apply': 'تطبيق',
            'Cancel': 'إلغاء الأمر',
            'ModeSwitcher': 'مفتاح كهربائي الوضع'
        }
    }
});

const documenteditor = ref(null);

provide('DocumentEditor', [Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog]);
onMounted(function () {
    documenteditor.value.ej2Instances.locale = 'ar-AE';
    documenteditor.value.ej2Instances.isReadOnly = false;
    let sfdt = `{
            "sections": [
                {
                    "blocks": [
                        {
                            "characterFormat": {
                                "fontSize": 18.0,
                                "fontFamily": "Calibri",
                                "fontFamilyBidi": "Calibri"
                            },
                            "paragraphFormat": {
                                "beforeSpacing": 18.0,
                                "afterSpacing": 30.0,
                                "styleName": "Heading 1",
                                "bidi": true
                            },
                            "inlines": [
                                {
                                    "name": "_GoBack",
                                    "bookmarkType": 0
                                },
                                {
                                    "name": "_GoBack",
                                    "bookmarkType": 1
                                },
                                {
                                    "text": "اعمال المغامرة دورات",
                                    "characterFormat": {
                                        "fontSize": 18.0,
                                        "bidi": true,
                                        "fontSizeBidi": 18.0
                                    }
                                }
                            ]
                        }
                    ],
                    "headersFooters": {},
                    "sectionFormat": {
                        "headerDistance": 36.0,
                        "footerDistance": 36.0,
                        "pageWidth": 612.0,
                        "pageHeight": 792.0,
                        "leftMargin": 72.0,
                        "rightMargin": 72.0,
                        "topMargin": 72.0,
                        "bottomMargin": 72.0,
                        "differentFirstPage": false,
                        "differentOddAndEvenPages": false,
                        "bidi": false
                    }
                }
            ],
            "styles": []
            }`;
    documenteditor.value.open(sfdt);
});
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>
<template>
    <div id="app">
        <ejs-documenteditor ref='documenteditor' id='container' pageOutline='#E0E0E0' height="370px"
            style="width: 100%;" :enablePrint='true' :enableSfdtExport='true' :enableSelection='true'
            :enableContextMenu='true' :enableSearch='true' enableOptionsPane='true' :enableWordExport='true'
            :enableTextExport='true' :enableEditor='true' :enableImageResizer='true' :enableEditorHistory='true'
            enableHyperlinkDialog='true' :enableTableDialog='true' :enableBookmarkDialog='true'
            :enableTableOfContentsDialog='true' :enablePageSetupDialog='true' :enableStyleDialog='true'
            :enableListDialog='true' :enableParagraphDialog='true' :enableFontDialog='true'
            :enableTablePropertiesDialog='true' :enableBordersAndShadingDialog='true' :enableTableOptionsDialog='true'
            :enableRtl='true' locale='ar-AE'>
        </ejs-documenteditor>
    </div>
</template>
<script>
import { DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-vue-documenteditor';
import { L10n } from '@syncfusion/ej2-base';

L10n.load({
    'ar-AE': {
        'documenteditor': {
            'Table': 'لجدول',
            'Row': 'لصف',
            'Cell': 'الخليه',
            'Ok': 'موافق',
            'Cancel': 'إلغاء الأمر',
            'Size': 'حجم',
            'Preferred Width': 'العرض المفضل',
            'Points': 'نقاط',
            'Percent': 'المائه',
            'Measure in': 'القياس في',
            'Alignment': 'محاذاه',
            'Left': 'ليسار',
            'Center': 'مركز',
            'Right': 'الحق',
            'Justify': 'تبرير',
            'Indent from left': 'مسافة بادئه من اليسار',
            'Borders and Shading': 'الحدود والتظليل',
            'Options': 'خيارات',
            'Specify height': 'تحديد الارتفاع',
            'At least': 'الاقل',
            'Exactly': 'تماما',
            'Row height is': 'ارتفاع الصف هو',
            'Allow row to break across pages': 'السماح بفصل الصف عبر الصفحات',
            'Repeat as header row at the top of each page': 'تكرار كصف راس في اعلي كل صفحه',
            'Vertical alignment': 'محاذاة عمودي',
            'Top': 'أعلى',
            'Bottom': 'اسفل',
            'Default cell margins': 'هوامش الخلية الافتراضية',
            'Default cell spacing': 'تباعد الخلايا الافتراضي',
            'Allow spacing between cells': 'السماح بالتباعد بين الخلايا',
            'Cell margins': 'هوامش الخلية',
            'Same as the whole table': 'نفس الجدول بأكمله',
            'Borders': 'الحدود',
            'None': 'اي',
            'Single': 'واحد',
            'Dot': 'نقطه',
            'DashSmallGap': 'داشسمجاب',
            'DashLargeGap': 'الاتحاد الخاص',
            'DashDot': 'داشدوت',
            'DashDotDot': 'ددهدودوت',
            'Double': 'انقر نقرا مزدوجا',
            'Triple': 'الثلاثي',
            'ThinThickSmallGap': 'فجوه صغيره سميكه رقيق',
            'ThickThinSmallGap': 'الفجوة الصغيرة رقيقه سميكه',
            'ThinThickThinSmallGap': 'صغيره سميكه رقيقه الفجوة الصغيرة',
            'ThinThickMediumGap': 'فجوه متوسطه سميك',
            'ThickThinMediumGap': 'سميكه الفجوة متوسطه رقيقه',
            'ThinThickThinMediumGap': 'رقيقه سميكه متوسطه الفجوة',
            'ThinThickLargeGap': 'الفجوة الكبيرة رقيقه سميكه',
            'ThickThinLargeGap': 'فجوه كبيره رقيقه سميك',
            'ThinThickThinLargeGap': 'رقيقه سميكه الفجوة الكبيرة',
            'SingleWavy': 'واحد مائج',
            'DoubleWavy': 'مزدوج مائج',
            'DashDotStroked': 'اندفاعه نقطه القوية',
            'Emboss3D': 'D3مزخرف',
            'Engrave3D': 'D3نقش',
            'Outset': 'البدايه',
            'Inset': 'الداخلي',
            'Thick': 'سميكه',
            'Style': 'نمط',
            'Width': 'عرض',
            'Height': 'ارتفاع',
            'Letter': 'رساله',
            'Tabloid': 'التابلويد',
            'Legal': 'القانونيه',
            'Statement': 'بيان',
            'Executive': 'التنفيذي',
            'A3': 'A3',
            'A4': 'A4',
            'A5': 'A5',
            'B4': 'B4',
            'B5': 'B5',
            'Custom Size': 'حجم مخصص',
            'Different odd and even': 'مختلفه غريبه وحتى',
            'Different first page': 'الصفحة الاولي مختلفه',
            'From edge': 'من الحافة',
            'Header': 'راس',
            'Footer': 'تذييل الصفحه',
            'Margin': 'الهوامش',
            'Paper': 'الورق',
            'Layout': 'تخطيط',
            'Orientation': 'التوجه',
            'Landscape': 'المناظر الطبيعيه',
            'Portrait': 'صوره',
            'Table Of Contents': 'جدول المحتويات',
            'Show page numbers': 'إظهار أرقام الصفحات',
            'Right align page numbers': 'محاذاة أرقام الصفحات إلى اليمين',
            'Nothing': 'شيء',
            'Tab leader': 'قائد علامة التبويب',
            'Show levels': 'إظهار المستويات',
            'Use hyperlinks instead of page numbers': 'استخدام الارتباطات التشعبية بدلا من أرقام الصفحات',
            'Build table of contents from': 'بناء جدول محتويات من',
            'Styles': 'انماط',
            'Available styles': 'الأنماط المتوفرة',
            'TOC level': 'مستوي جدول المحتويات',
            'Heading': 'عنوان',
            'Heading 1': 'عنوان 1',
            'Heading 2': 'عنوان 2',
            'Heading 3': 'عنوان 3',
            'Heading 4': 'عنوان 4',
            'Heading 5': 'عنوان 5',
            'Heading 6': 'عنوان 6',
            'List Paragraph': 'فقره القائمة',
            'Normal': 'العاديه',
            'Outline levels': 'مستويات المخطط التفصيلي',
            'Table entry fields': 'حقول إدخال الجدول',
            'Modify': 'تعديل',
            'Color': 'لون',
            'Setting': 'اعداد',
            'Box': 'مربع',
            'All': 'جميع',
            'Custom': 'المخصصه',
            'Preview': 'معاينه',
            'Shading': 'التظليل',
            'Fill': 'ملء',
            'Apply To': 'تنطبق علي',
            'Table Properties': 'خصائص الجدول',
            'Cell Options': 'خيارات الخلية',
            'Table Options': 'خيارات الجدول',
            'Insert Table': 'ادراج جدول',
            'Number of columns': 'عدد الاعمده',
            'Number of rows': 'عدد الصفوف',
            'Text to display': 'النص الذي سيتم عرضه',
            'Address': 'عنوان',
            'Insert Hyperlink': 'ادراج ارتباط تشعبي',
            'Edit Hyperlink': 'تحرير ارتباط تشعبي',
            'Insert': 'ادراج',
            'General': 'العامه',
            'Indentation': 'المسافه البادئه',
            'Before text': 'قبل النص',
            'Special': 'الخاصه',
            'First line': 'السطر الأول',
            'Hanging': 'معلقه',
            'After text': 'بعد النص',
            'By': 'من',
            'Before': 'قبل',
            'Line Spacing': 'تباعد الأسطر',
            'After': 'بعد',
            'At': 'في',
            'Multiple': 'متعدده',
            'Spacing': 'تباعد',
            'Define new Multilevel list': 'تحديد قائمه متعددة الاصعده جديده',
            'List level': 'مستوي القائمة',
            'Choose level to modify': 'اختر المستوي الذي تريد تعديله',
            'Level': 'مستوي',
            'Number format': 'تنسيق الأرقام',
            'Number style for this level': 'نمط الرقم لهذا المستوي',
            'Enter formatting for number': 'إدخال تنسيق لرقم',
            'Start at': 'بداية من',
            'Restart list after': 'أعاده تشغيل قائمه بعد',
            'Position': 'موقف',
            'Text indent at': 'المسافة البادئة للنص في',
            'Aligned at': 'محاذاة في',
            'Follow number with': 'اتبع الرقم مع',
            'Tab character': 'حرف علامة التبويب',
            'Space': 'الفضاء',
            'Arabic': 'العربية',
            'UpRoman': 'حتى الروماني',
            'LowRoman': 'الرومانية منخفضه',
            'UpLetter': '',
            'LowLetter': '',
            'Number': 'عدد',
            'Leading zero': 'يؤدي صفر',
            'Bullet': 'رصاصه',
            'Ordinal': 'الترتيبيه',
            'Ordinal Text': 'النص الترتيبي',
            'For East': 'للشرق',
            'No Restart': 'لا أعاده تشغيل',
            'Font': 'الخط',
            'Font style': 'نمط الخط',
            'Underline style': 'نمط التسطير',
            'Font color': 'لون الخط',
            'Effects': 'الاثار',
            'Strikethrough': 'يتوسطه',
            'Superscript': 'مرتفع',
            'Subscript': 'منخفض',
            'Double strikethrough': 'خط مزدوج يتوسطه خط',
            'Regular': 'العاديه',
            'Bold': 'جريئه',
            'Italic': 'مائل',
            'Cut': 'قطع',
            'Copy': 'نسخ',
            'Paste': 'لصق',
            'Hyperlink': 'الارتباط التشعبي',
            'Open Hyperlink': 'فتح ارتباط تشعبي',
            'Copy Hyperlink': 'نسخ ارتباط تشعبي',
            'Remove Hyperlink': 'أزاله ارتباط تشعبي',
            'Paragraph': 'الفقره',
            'Linked(Paragraph and Character)': 'مرتبط (فقره وحرف)',
            'Character': 'حرف',
            'Merge Cells': 'دمج الخلايا',
            'Insert Above': 'ادراج أعلاه',
            'Insert Below': 'ادراج أدناه',
            'Insert Left': 'ادراج إلى اليسار',
            'Insert Right': 'ادراج اليمين',
            'Delete': 'حذف',
            'Delete Table': 'حذف جدول',
            'Delete Row': 'حذف صف',
            'Delete Column': 'حذف عمود',
            'File Name': 'اسم الملف',
            'Format Type': 'نوع التنسيق',
            'Save': 'حفظ',
            'Navigation': 'التنقل',
            'Results': 'نتائج',
            'Replace': 'استبدال',
            'Replace All': 'استبدال الكل',
            'We replaced all': 'استبدلنا جميع',
            'Find': 'العثور',
            'No matches': 'لا توجد تطابقات',
            'All Done': 'كل القيام به',
            'Result': 'نتيجه',
            'of': 'من',
            'instances': 'الحالات',
            'with': 'مع',
            'Click to follow link': 'انقر لمتابعه الارتباط',
            'Continue Numbering': 'متابعه الترقيم',
            'Bookmark name': 'اسم الإشارة المرجعية',
            'Close': 'اغلاق',
            'Restart At': 'أعاده التشغيل عند',
            'Properties': 'خصائص',
            'Name': 'اسم',
            'Style type': 'نوع النمط',
            'Style based on': 'نمط استنادا إلى',
            'Style for following paragraph': 'نمط للفقرة التالية',
            'Formatting': 'التنسيق',
            'Numbering and Bullets': 'الترقيم والتعداد النقطي',
            'Numbering': 'ترقيم',
            'Update Field': 'تحديث الحقل',
            'Edit Field': 'تحرير الحقل',
            'Bookmark': 'الإشارة المرجعية',
            'Page Setup': 'اعداد الصفحة',
            'No bookmarks found': 'لم يتم العثور علي إشارات مرجعيه',
            'Number format tooltip information': 'تنسيق رقم أحادي المستوي:' + '</br>' + '[بادئه]% [مستوي الاعداد] [لاحقه]' + '</br>'
                // tslint:disable-next-line:max-line-length
                + 'علي سبيل االمثال ، "الفصل% 1." سيتم عرض الترقيم مثل' + '</br>' + 'الفصل الأول- البند' + '</br>' + 'الفصل الثاني- البند' + '</br>...'
                + '</br>' + 'الفصل نون-البند' + '</br>'
                // tslint:disable-next-line:max-line-length
                + '</br>' + 'تنسيق رقم متعدد الإعدادات:' + '</br>' + '[بادئه]% [مستوي المستوي]' + '</br>' + '[لاحقه] + [بادئه]%' + '</br>' + '[المستوي] [لاحقه]'
                + '</br>' + 'علي سبيل المثال ، "% 1.% 2." سيتم عرض الترقيم مثل' + '</br>' + '1.1 البند' + '</br>' + '1.2 البند' + '</br>...' + '</br>' + '1. نون-البند',
            'Format': 'تنسيق',
            'Create New Style': 'إنشاء نمط جديد',
            'Modify Style': 'تعديل النمط',
            'New': 'الجديد',
            'Bullets': 'الرصاص',
            'Use bookmarks': 'استخدام الإشارات المرجعية',
            'Table of Contents': 'جدول المحتويات',
            'AutoFit': 'الاحتواء',
            'AutoFit to Contents': 'احتواء تلقائي للمحتويات',
            'AutoFit to Window': 'احتواء تلقائي للإطار',
            'Fixed Column Width': 'عرض العمود الثابت',
            'Reset': 'اعاده تعيين',
            'Match case': 'حاله المباراة',
            'Whole words': 'كلمات كامل',
            'Add': 'اضافه',
            'Go To': 'الانتقال إلى',
            'Search for': 'البحث عن',
            'Replace with': 'استبدال',
            'TOC 1': 'جدول المحتويات 1',
            'TOC 2': 'جدول المحتويات 2',
            'TOC 3': 'جدول المحتويات 3',
            'TOC 4': 'جدول المحتويات 4',
            'TOC 5': 'جدول المحتويات 5',
            'TOC 6': 'جدول المحتويات 6',
            'TOC 7': 'جدول المحتويات 7',
            'TOC 8': 'جدول المحتويات 8',
            'TOC 9': 'جدول المحتويات 9',
            'Right-to-left': 'من اليمين إلى اليسار',
            'Left-to-right': 'من اليسار إلى اليمين',
            'Direction': 'الاتجاه',
            'Table direction': 'اتجاه الجدول',
            'Indent from right': 'مسافة بادئه من اليمين',
            'Page': 'صفحه',
            'Fit one page': 'احتواء صفحه واحد',
            'Fit page width': 'احتواء عرض الصفحة',
            // tslint:disable-next-line:max-line-length
            'The current page number in the document. Click or tap to navigate specific page.': 'رقم الصفحة الحالية في المستند. انقر أأو اضغط للتنقل في صفحه معينه'
        },
        'colorpicker': {
            'Apply': 'تطبيق',
            'Cancel': 'إلغاء الأمر',
            'ModeSwitcher': 'مفتاح كهربائي الوضع'
        }
    }
});

export default {
    name: "App",
    components: {
        "ejs-documenteditor": DocumentEditorComponent
    },
    data: function () {
        return {
        };
    },
    provide: {
        DocumentEditor: [Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog]
    },
    mounted() {
        this.$refs.documenteditor.ej2Instances.locale = 'ar-AE';
        this.$refs.documenteditor.ej2Instances.isReadOnly = false;
        let sfdt = `{
            "sections": [
                {
                    "blocks": [
                        {
                            "characterFormat": {
                                "fontSize": 18.0,
                                "fontFamily": "Calibri",
                                "fontFamilyBidi": "Calibri"
                            },
                            "paragraphFormat": {
                                "beforeSpacing": 18.0,
                                "afterSpacing": 30.0,
                                "styleName": "Heading 1",
                                "bidi": true
                            },
                            "inlines": [
                                {
                                    "name": "_GoBack",
                                    "bookmarkType": 0
                                },
                                {
                                    "name": "_GoBack",
                                    "bookmarkType": 1
                                },
                                {
                                    "text": "اعمال المغامرة دورات",
                                    "characterFormat": {
                                        "fontSize": 18.0,
                                        "bidi": true,
                                        "fontSizeBidi": 18.0
                                    }
                                }
                            ]
                        }
                    ],
                    "headersFooters": {},
                    "sectionFormat": {
                        "headerDistance": 36.0,
                        "footerDistance": 36.0,
                        "pageWidth": 612.0,
                        "pageHeight": 792.0,
                        "leftMargin": 72.0,
                        "rightMargin": 72.0,
                        "topMargin": 72.0,
                        "bottomMargin": 72.0,
                        "differentFirstPage": false,
                        "differentOddAndEvenPages": false,
                        "bidi": false
                    }
                }
            ],
            "styles": []
            }`;
        this.$refs.documenteditor.open(sfdt);
    }
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>