Right to left in React Document editor component
30 Jan 202324 minutes to read
Document Editor provides RTL (right-to-left) support. This can be enabled using the “enableRtl” property.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
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-react-documenteditor';
import { L10n } from '@syncfusion/ej2-base';
//Inject require modules.
DocumentEditorComponent.Inject(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);
//Load locale constant for Document Editor.
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': 'مفتاح كهربائي الوضع'
}
}
});
function App() {
let documenteditor;
React.useEffect(() => {
componentDidMount();
}, []);
function componentDidMount() {
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": [
{
"text": "اعمال المغامرة دورات",
"characterFormat": {
"fontSize": 18.0,
"bidi": true,
"fontSizeBidi": 18.0
}
}
]
}
]
}
]
}`;
setTimeout(() => {
//Open the document in Document Editor.
documenteditor.open(sfdt);
});
}
return (<DocumentEditorComponent id="container" height={'330px'} ref={(scope) => { documenteditor = scope; }} isReadOnly={false} enablePrint={true} enableSelection={true} enableEditor={true} enableEditorHistory={true} enableContextMenu={true} enableSearch={true} enableOptionsPane={true} enableBookmarkDialog={true} enableBordersAndShadingDialog={true} enableFontDialog={true} enableTableDialog={true} enableParagraphDialog={true} enableHyperlinkDialog={true} enableImageResizer={true} enableListDialog={true} enablePageSetupDialog={true} enableSfdtExport={true} enableStyleDialog={true} enableTableOfContentsDialog={true} enableTableOptionsDialog={true} enableTablePropertiesDialog={true} enableTextExport={true} enableWordExport={true} enableRtl={true} locale={'ar-AE'}/>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));import * as ReactDOM from 'react-dom';
import * as React from 'react';
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-react-documenteditor';
import { L10n } from '@syncfusion/ej2-base';
//Inject require modules.
DocumentEditorComponent.Inject(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);
//Load locale constant for Document Editor.
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': 'مفتاح كهربائي الوضع'
}
}
});
function App() {
let documenteditor: DocumentEditorComponent;
React.useEffect(() => {
componentDidMount()
}, []);
function componentDidMount() {
let sfdt: string = `{
"sections": [
{
"blocks": [
{
"characterFormat": {
"fontSize": 18.0,
"fontFamily": "Calibri",
"fontFamilyBidi": "Calibri"
},
"paragraphFormat": {
"beforeSpacing": 18.0,
"afterSpacing": 30.0,
"styleName": "Heading 1",
"bidi": true
},
"inlines": [
{
"text": "اعمال المغامرة دورات",
"characterFormat": {
"fontSize": 18.0,
"bidi": true,
"fontSizeBidi": 18.0
}
}
]
}
]
}
]
}`;
setTimeout(() => {
//Open the document in Document Editor.
documenteditor.open(sfdt);
});
}
return (
<DocumentEditorComponent id="container" height={'330px'} ref={(scope) => { documenteditor = scope; }}
isReadOnly={false} enablePrint={true}
enableSelection={true} enableEditor={true} enableEditorHistory={true}
enableContextMenu={true} enableSearch={true} enableOptionsPane={true}
enableBookmarkDialog={true} enableBordersAndShadingDialog={true} enableFontDialog={true} enableTableDialog={true} enableParagraphDialog={true} enableHyperlinkDialog={true} enableImageResizer={true} enableListDialog={true}
enablePageSetupDialog={true} enableSfdtExport={true}
enableStyleDialog={true} enableTableOfContentsDialog={true}
enableTableOptionsDialog={true} enableTablePropertiesDialog={true}
enableTextExport={true} enableWordExport={true} enableRtl={true} locale={'ar-AE'} />
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fabric.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>