From ab81f4cba9f851d411c79c741263817227c758ba Mon Sep 17 00:00:00 2001 From: NiranjanAnumuthu21 Date: Thu, 3 Jul 2025 18:16:55 +0530 Subject: [PATCH 1/5] 967341: 967341: Added the ribbon documentation --- .../customize-ribbon-backstage/razor | 11 + .../customize-ribbon-backstage/tagHelper | 12 + .../customize-ribbon-file/razor | 14 + .../customize-ribbon-file/tagHelper | 15 + .../document-editor/EJ2_ASP.MVC/ribbon.md | 58 ++++ .../document-editor/EJ2_ASP.NETCORE/ribbon.md | 58 ++++ .../how-to/customize-ribbon.md | 271 ++++++++++++++++++ ej2-asp-core-toc.html | 2 + ej2-asp-mvc-toc.html | 2 + 9 files changed, 443 insertions(+) create mode 100644 ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-backstage/razor create mode 100644 ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-backstage/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-file/razor create mode 100644 ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-file/tagHelper create mode 100644 ej2-asp-core-mvc/document-editor/EJ2_ASP.MVC/ribbon.md create mode 100644 ej2-asp-core-mvc/document-editor/EJ2_ASP.NETCORE/ribbon.md create mode 100644 ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-backstage/razor b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-backstage/razor new file mode 100644 index 0000000000..f7aec5e3eb --- /dev/null +++ b/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() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-backstage/tagHelper b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-backstage/tagHelper new file mode 100644 index 0000000000..317ecf5faa --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-backstage/tagHelper @@ -0,0 +1,12 @@ +> + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-file/razor b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-file/razor new file mode 100644 index 0000000000..efeaf0dfc8 --- /dev/null +++ b/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() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-file/tagHelper b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-file/tagHelper new file mode 100644 index 0000000000..160f5f7712 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-ribbon-file/tagHelper @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/document-editor/EJ2_ASP.MVC/ribbon.md b/ej2-asp-core-mvc/document-editor/EJ2_ASP.MVC/ribbon.md new file mode 100644 index 0000000000..5d34438f9a --- /dev/null +++ b/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() + +``` + +## 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() + +``` + +## See Also + +* [How to customize the ribbon](../document-editor/how-to/customize-ribbon) \ No newline at end of file diff --git a/ej2-asp-core-mvc/document-editor/EJ2_ASP.NETCORE/ribbon.md b/ej2-asp-core-mvc/document-editor/EJ2_ASP.NETCORE/ribbon.md new file mode 100644 index 0000000000..a91059e671 --- /dev/null +++ b/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 + + + +``` + +## 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 + + + +``` + +## See Also + +* [How to customize the ribbon](../document-editor/how-to/customize-ribbon) \ No newline at end of file diff --git a/ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md b/ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md new file mode 100644 index 0000000000..fe4559ef80 --- /dev/null +++ b/ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md @@ -0,0 +1,271 @@ +--- +layout: post +title: Customize Ribbon in ##Platform_Name## Document Editor | Syncfusion +description: Learn how to customize the ribbon in Syncfusion ##Platform_Name## Document Editor - file menu, backstage, tabs, groups, and items. +platform: ej2-asp-core-mvc +control: Ribbon Customization +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# Customize Ribbon in ##Platform_Name## Document Editor + +The Syncfusion Document Editor provides an extensive and flexible API to customize the built-in ribbon UI. You can: + +- Customize the File menu. +- Add the Backstage menu instead of File menu. +- Show, hide, or add Ribbon tabs. +- Show, hide, or add groups within tabs. +- Show, hide, add, enable, or disable items within groups. + +Below are detailed examples for each ribbon customization scenario. + +## File Menu Customization + +Document Editor provides APIs to remove existing File menu items and add new custom items based on your requirements. You can modify the File menu using the `fileMenuItems` property. + +In below code example, In the example below, the "Open" and "Export" items have been removed from the File Menu Items, and new custom items have been added. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/customize-ribbon-file/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="customize-ribbon-file.cs" %} +{% endhighlight %}{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/customize-ribbon-file/razor %} +{% endhighlight %} +{% highlight c# tabtitle="customize-ribbon-file.cs" %} +{% endhighlight %}{% endtabs %} +{% endif %} + +## Backstage Menu Customization + +The Document Editor provides an `backStageMenu` API to add a backstage menu. When the backstage menu is enabled, the default File menu items are automatically hidden. + +The following code example shows how to add the backstage menu items. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/customize-ribbon-backstage/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="customize-ribbon-backstage.cs" %} +{% endhighlight %}{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/document-editor-container/customize-ribbon-backstage/razor %} +{% endhighlight %} +{% highlight c# tabtitle="customize-ribbon-backstage.cs" %} +{% endhighlight %}{% endtabs %} +{% endif %} + +Refer this documentation know more about [`backstage items`](https://ej2.syncfusion.com/documentation/ribbon/backstage) + +## Tab Customization + +You can customize the ribbon tabs in the Document Editor by showing, hiding, or adding tabs according to your application's requirements. + +### Show/Hide Tab + +Document editor provides the `showTab` API to show and hide the existing tab using existing `RibbonTabType` and `tabId`. + +The following code example how to show/hide existing tab using existing tab type and tab id. + +```typescript + +// To hide the Home tab using the built-in `RibbonTabType` +container.ribbon.showTab('Home', false); + +// To hide a tab by its tab id (for example, a custom tab) +container.ribbon.showTab('custom_tab', false); +``` + +### Add Tab + +The Document Editor provides the `addTab` API, which allows you to insert a new custom tab either between existing tabs or at the end of the ribbon tabs. + +```typescript + + + +``` + +## Group Customization + +You can also customize ribbon groups within a tab to better organize commands or add new functionalities as per your needs. + +### Show/Hide Group + +Document Editor provides an `showGroup` API to show or hide existing groups within a ribbon tab. + +The following code example show how to show/hide the group using group Id or `RibbonGroupInfo`. + +```typescript + +// To hide the clipboard group using group index +container.ribbon.showGroup({tabId: 'Home', index: 1} , false); + +// To show the clipboard group using group index +container.ribbon.showGroup({tabId: 'Home', index: 1} , true); + +// To hide the group using id +container.ribbon.showGroup('custom_group', false); + +``` + +### Add Group + +To extend the ribbon's functionality, you can add custom groups to any tab. This allows you to organize related commands together within a tab. + +```typescript + + + +``` + +## Item Customization + +You can customize individual items within ribbon groups. This includes showing, hiding, enabling, disabling, or adding new items to any group within a ribbon tab. + +### Show/Hide Item + +Using `showItems` API in Document editor ribbon to enable/disable the existing item. Here, you can specify the item Id or `RibbonItemInfo`. + +The following code example show how to show/hide the item using item Id or `RibbonItemInfo`. + +```typescript +// To hide the Bold and Italic items using ribbon item information +container.ribbon.showItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [5, 6] } , false); + +// To show the Bold and Italic items using ribbon item information +container.ribbon.showItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [5, 6] } , true); + +// To hide the item using item id +container.ribbon.showItems('custom_item', false); +``` + +### Enable/Disable Item + +Using `enableItems` API in Document editor ribbon to enable/disable the existing item. + +```typescript +// To disable the underline using ribbon item info +container.ribbon.enableItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [7] },false); + +// To enable the underline using ribbon item info +container.ribbon.enableItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [7] },true); + +// To disable the item using id +container.ribbon.enableItems('custom_item', false); + +``` + +### Add Item + +You can use the `addItem` API in the Document Editor ribbon to add a new item. Additionally, you can specify the target tab and group where the new item should be placed. + +```typescript + + + +``` + + +## Related Links + +- [File menu Customization Demo](https://ej2.syncfusion.com/demos/#/material/document-editor/ribbon-customization) \ No newline at end of file diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index f2db5f8117..3fae4bc6e4 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -962,6 +962,7 @@
  • Feature modules
  • Import
  • Export
    • +
  • Ribbon
  • Collaborative Editing
  • FAQ diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html index 058c61ebcd..49d718ae2e 100644 --- a/ej2-asp-mvc-toc.html +++ b/ej2-asp-mvc-toc.html @@ -945,6 +945,7 @@
  • SpellCheck
  • Globalization
  • Footnotes and Endnotes
    • +
  • Ribbon
  • Security Advisories
  • How To
  • FAQ From 95d10631ebcbf7a64509c76cdd53540c097ea220 Mon Sep 17 00:00:00 2001 From: NiranjanAnumuthu21 Date: Thu, 3 Jul 2025 18:47:57 +0530 Subject: [PATCH 2/5] 967341: Resolved the CI error --- ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md b/ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md index fe4559ef80..d9805d769f 100644 --- a/ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md +++ b/ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md @@ -59,7 +59,8 @@ The following code example shows how to add the backstage menu items. {% include code-snippet/document-editor-container/customize-ribbon-backstage/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="customize-ribbon-backstage.cs" %} -{% endhighlight %}{% endtabs %} +{% endhighlight %} +{% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -68,7 +69,8 @@ The following code example shows how to add the backstage menu items. {% include code-snippet/document-editor-container/customize-ribbon-backstage/razor %} {% endhighlight %} {% highlight c# tabtitle="customize-ribbon-backstage.cs" %} -{% endhighlight %}{% endtabs %} +{% endhighlight %} +{% endtabs %} {% endif %} Refer this documentation know more about [`backstage items`](https://ej2.syncfusion.com/documentation/ribbon/backstage) From f950c205ad6fe52d3a8967f2f93b47b25d15aa48 Mon Sep 17 00:00:00 2001 From: NiranjanAnumuthu21 Date: Thu, 3 Jul 2025 19:32:11 +0530 Subject: [PATCH 3/5] 967341: Resolved the CI error --- .../document-editor/how-to/customize-ribbon.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md b/ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md index d9805d769f..9fce48cefa 100644 --- a/ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md +++ b/ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md @@ -33,7 +33,7 @@ In below code example, In the example below, the "Open" and "Export" items have {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/document-editor-container/customize-ribbon-file/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="customize-ribbon-file.cs" %} +{% highlight c# tabtitle="Customize-ribbon-file.cs" %} {% endhighlight %}{% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -42,7 +42,7 @@ In below code example, In the example below, the "Open" and "Export" items have {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/document-editor-container/customize-ribbon-file/razor %} {% endhighlight %} -{% highlight c# tabtitle="customize-ribbon-file.cs" %} +{% highlight c# tabtitle="Customize-ribbon-file.cs" %} {% endhighlight %}{% endtabs %} {% endif %} @@ -58,7 +58,7 @@ The following code example shows how to add the backstage menu items. {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/document-editor-container/customize-ribbon-backstage/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="customize-ribbon-backstage.cs" %} +{% highlight c# tabtitle="Customize-ribbon-backstage.cs" %} {% endhighlight %} {% endtabs %} @@ -68,7 +68,7 @@ The following code example shows how to add the backstage menu items. {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/document-editor-container/customize-ribbon-backstage/razor %} {% endhighlight %} -{% highlight c# tabtitle="customize-ribbon-backstage.cs" %} +{% highlight c# tabtitle="Customize-ribbon-backstage.cs" %} {% endhighlight %} {% endtabs %} {% endif %} From e2976582aa98bb3b6c79d4a9aba9941e3d31df90 Mon Sep 17 00:00:00 2001 From: NiranjanAnumuthu21 Date: Thu, 3 Jul 2025 19:45:12 +0530 Subject: [PATCH 4/5] 967341: Added the ribbon documentation --- ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md b/ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md index 9fce48cefa..1c77c39a56 100644 --- a/ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md +++ b/ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md @@ -59,8 +59,7 @@ The following code example shows how to add the backstage menu items. {% include code-snippet/document-editor-container/customize-ribbon-backstage/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Customize-ribbon-backstage.cs" %} -{% endhighlight %} -{% endtabs %} +{% endhighlight %}{% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -70,8 +69,7 @@ The following code example shows how to add the backstage menu items. {% endhighlight %} {% highlight c# tabtitle="Customize-ribbon-backstage.cs" %} {% endhighlight %} -{% endtabs %} -{% endif %} +{% endtabs %}{% endif %} Refer this documentation know more about [`backstage items`](https://ej2.syncfusion.com/documentation/ribbon/backstage) From 67391a6e617f658da64cc5675b115d6da4ca660e Mon Sep 17 00:00:00 2001 From: NiranjanAnumuthu21 Date: Fri, 4 Jul 2025 10:11:27 +0530 Subject: [PATCH 5/5] 967341: Add code fix for CI error --- .../document-editor/how-to/customize-ribbon.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md b/ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md index 1c77c39a56..0371f94d03 100644 --- a/ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md +++ b/ej2-asp-core-mvc/document-editor/how-to/customize-ribbon.md @@ -34,7 +34,8 @@ In below code example, In the example below, the "Open" and "Export" items have {% include code-snippet/document-editor-container/customize-ribbon-file/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Customize-ribbon-file.cs" %} -{% endhighlight %}{% endtabs %} +{% endhighlight %} +{% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -43,7 +44,9 @@ In below code example, In the example below, the "Open" and "Export" items have {% include code-snippet/document-editor-container/customize-ribbon-file/razor %} {% endhighlight %} {% highlight c# tabtitle="Customize-ribbon-file.cs" %} -{% endhighlight %}{% endtabs %} +{% endhighlight %} +{% endtabs %} + {% endif %} ## Backstage Menu Customization @@ -59,7 +62,8 @@ The following code example shows how to add the backstage menu items. {% include code-snippet/document-editor-container/customize-ribbon-backstage/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Customize-ribbon-backstage.cs" %} -{% endhighlight %}{% endtabs %} +{% endhighlight %} +{% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -69,7 +73,9 @@ The following code example shows how to add the backstage menu items. {% endhighlight %} {% highlight c# tabtitle="Customize-ribbon-backstage.cs" %} {% endhighlight %} -{% endtabs %}{% endif %} +{% endtabs %} + +{% endif %} Refer this documentation know more about [`backstage items`](https://ej2.syncfusion.com/documentation/ribbon/backstage)