967341: Added the ribbon documentation

ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-backstage/razor

@@ -0,0 +1,11 @@
+@Html.EJS().DocumentEditorContainer("container").ToolbarMode("Ribbon").EnableToolbar(true).BackstageMenu(new {
+        text = "File",
+        backButton = new { text = "close" },
+        items = new object[] {
+            new { id = "new", text = "New", iconCss = "e-icons e-de-ctnr-new" }
+        }
+    }).Render()
+
+<script>
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-backstage/tagHelper

@@ -0,0 +1,12 @@
+<ejs-documenteditorcontainer id="container" toolbarMode="Ribbon" serviceUrl="api/documenteditor/"
+    backstageMenu="@(new {
+        text = "File",
+        backButton = new { text = "close" },
+        items = new object[] {
+            new { id = "new", text = "New", iconCss = "e-icons e-de-ctnr-new" }
+        }
+    })">></ejs-documenteditorcontainer>
+
+<script>
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-file/razor

@@ -0,0 +1,14 @@
+@Html.EJS().DocumentEditorContainer("container").ToolbarMode("Ribbon").EnableToolbar(true).FileMenuItems(new object[] {
+        "New",
+        "Print",
+        new { text = "Export", id = "custom_item", iconCss = "e-icons e-export" }
+    }).FileMenuItemClick("onFileMenuItemClick").Render()
+
+<script>
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
+    function onFileMenuItemClick(args) {
+        if (args.item.id) {
+            document.getElementById('container').ej2_instances[0].documentEditor.save('Sample', 'Docx');
+        }
+    }
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-file/tagHelper

@@ -0,0 +1,15 @@
+<ejs-documenteditorcontainer id="container" toolbarMode="Ribbon" serviceUrl="api/documenteditor/"
+    fileMenuItems="@(new object[] {
+            "New",
+            "Print",
+            new { text = "Export", id = "custom_item", iconCss = "e-icons e-export" }
+        })" fileMenuItemClick="onFileMenuItemClick"></ejs-documenteditorcontainer>
+
+<script>
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
+    function onFileMenuItemClick(args) {
+        if (args.item.id) {
+            document.getElementById('container').ej2_instances[0].documentEditor.save('Sample', 'Docx');
+        }
+    }
+</script>

ej2-asp-core-mvc/document-editor/EJ2_ASP.MVC/ribbon.md

@@ -0,0 +1,58 @@
+---
+layout: post
+title: Ribbon in ##Platform_Name## Document editor control | Syncfusion
+description: Learn here all about the Ribbon UI in Syncfusion ##Platform_Name## Document editor control, how to switch between Ribbon and Toolbar modes.
+platform: ej2-asp-core-mvc
+control: Ribbon
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Ribbon in ##Platform_Name## Document Editor Control
+
+The Document Editor provides a modern Ribbon interface similar to Microsoft Word's interface. This Ribbon UI provides an efficient and intuitive way to access editing features, organizing commands within well-structured tabs and groups to enhance your document editing experience. Additionally, the Ribbon interface supports contextual tabs. Contextual tabs appear only when certain elements, such as tables, images, or headers/footers, are selected in the document.
+
+You can switch between the classic **Toolbar** and the new **Ribbon** UI, and you can also choose between **Classic** and **Simplified** ribbon layouts.
+
+## Enable Ribbon Mode
+
+To enable Ribbon in Document Editor, use the `toolbarMode` property of `DocumentEditorContainer`. The available toolbar modes are:
+
+- **'Toolbar'** - The traditional toolbar UI.
+- **'Ribbon'** - The Ribbon UI, which provides a tabbed interface with grouped commands.
+
+By default, `toolbarMode` is `Toolbar`.
+
+The following code shows the how to enable the `Ribbon` in Document Editor.
+
+```typescript
+
+@Html.EJS().DocumentEditorContainer("container").ToolbarMode("Ribbon").ServiceUrl("api/documenteditor/").Render()
+<script>
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
+</script>
+```
+
+## Ribbon Layouts
+
+Document Editor provides two different Ribbon layouts:
+
+- **Classic**: A traditional Office-like ribbon with detailed grouping and larger icons
+- **Simplified**: A more compact ribbon design with streamlined controls
+
+By default, `ribbonLayout` is set to `Simplified`. 
+
+The following code shows the how to configure the ribbon layout in Document Editor:
+
+```typescript
+
+@Html.EJS().DocumentEditorContainer("container").ToolbarMode("Ribbon").RibbonLayout("Classic").ServiceUrl("api/documenteditor/").Render()
+<script>
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
+</script>
+```
+
+## See Also
+
+* [How to customize the ribbon](../document-editor/how-to/customize-ribbon)

ej2-asp-core-mvc/document-editor/EJ2_ASP.NETCORE/ribbon.md

@@ -0,0 +1,58 @@
+---
+layout: post
+title: Ribbon in ##Platform_Name## Document editor control | Syncfusion
+description: Learn here all about the Ribbon UI in Syncfusion ##Platform_Name## Document editor control, how to switch between Ribbon and Toolbar modes.
+platform: ej2-asp-core-mvc
+control: Ribbon
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Ribbon in ##Platform_Name## Document Editor Control
+
+The Document Editor provides a modern Ribbon interface similar to Microsoft Word's interface. This Ribbon UI provides an efficient and intuitive way to access editing features, organizing commands within well-structured tabs and groups to enhance your document editing experience. Additionally, the Ribbon interface supports contextual tabs. Contextual tabs appear only when certain elements, such as tables, images, or headers/footers, are selected in the document.
+
+You can switch between the classic **Toolbar** and the new **Ribbon** UI, and you can also choose between **Classic** and **Simplified** ribbon layouts.
+
+## Enable Ribbon Mode
+
+To enable Ribbon in Document Editor, use the `toolbarMode` property of `DocumentEditorContainer`. The available toolbar modes are:
+
+- **'Toolbar'** - The traditional toolbar UI.
+- **'Ribbon'** - The Ribbon UI, which provides a tabbed interface with grouped commands.
+
+By default, `toolbarMode` is `Toolbar`.
+
+The following code shows the how to enable the `Ribbon` in Document Editor.
+
+```typescript
+
+<ejs-documenteditorcontainer id="container" toolbarMode="Ribbon" serviceUrl="api/documenteditor/"></ejs-documenteditorcontainer>
+<script>
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
+</script>
+```
+
+## Ribbon Layouts
+
+Document Editor provides two different Ribbon layouts:
+
+- **Classic**: A traditional Office-like ribbon with detailed grouping and larger icons
+- **Simplified**: A more compact ribbon design with streamlined controls
+
+By default, `ribbonLayout` is set to `Simplified`. 
+
+The following code shows the how to configure the ribbon layout in Document Editor:
+
+```typescript
+
+<ejs-documenteditorcontainer id="container" toolbarMode="Ribbon" ribbonLayout="Classic" serviceUrl="api/documenteditor/"></ejs-documenteditorcontainer>
+<script>
+    ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
+</script>
+```
+
+## See Also
+
+* [How to customize the ribbon](../document-editor/how-to/customize-ribbon)