Skip to content

Commit b7efa29

Browse files
DeepakRajSundarDeepakRajSundar
authored
Merge pull request #4369 from syncfusion-content/967341-RibbonDocumentCoreMVC
967341: Added the ribbon documentation
2 parents 9a3758d + 67391a6 commit b7efa29

File tree

9 files changed

+449
-0
lines changed

9 files changed

+449
-0
lines changed

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@Html.EJS().DocumentEditorContainer("container").ToolbarMode("Ribbon").EnableToolbar(true).BackstageMenu(new {
2+
text = "File",
3+
backButton = new { text = "close" },
4+
items = new object[] {
5+
new { id = "new", text = "New", iconCss = "e-icons e-de-ctnr-new" }
6+
}
7+
}).Render()
8+
9+
<script>
10+
ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
11+
</script>

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<ejs-documenteditorcontainer id="container" toolbarMode="Ribbon" serviceUrl="api/documenteditor/"
2+
backstageMenu="@(new {
3+
text = "File",
4+
backButton = new { text = "close" },
5+
items = new object[] {
6+
new { id = "new", text = "New", iconCss = "e-icons e-de-ctnr-new" }
7+
}
8+
})">></ejs-documenteditorcontainer>
9+
10+
<script>
11+
ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
12+
</script>

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@Html.EJS().DocumentEditorContainer("container").ToolbarMode("Ribbon").EnableToolbar(true).FileMenuItems(new object[] {
2+
"New",
3+
"Print",
4+
new { text = "Export", id = "custom_item", iconCss = "e-icons e-export" }
5+
}).FileMenuItemClick("onFileMenuItemClick").Render()
6+
7+
<script>
8+
ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
9+
function onFileMenuItemClick(args) {
10+
if (args.item.id) {
11+
document.getElementById('container').ej2_instances[0].documentEditor.save('Sample', 'Docx');
12+
}
13+
}
14+
</script>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<ejs-documenteditorcontainer id="container" toolbarMode="Ribbon" serviceUrl="api/documenteditor/"
2+
fileMenuItems="@(new object[] {
3+
"New",
4+
"Print",
5+
new { text = "Export", id = "custom_item", iconCss = "e-icons e-export" }
6+
})" fileMenuItemClick="onFileMenuItemClick"></ejs-documenteditorcontainer>
7+
8+
<script>
9+
ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
10+
function onFileMenuItemClick(args) {
11+
if (args.item.id) {
12+
document.getElementById('container').ej2_instances[0].documentEditor.save('Sample', 'Docx');
13+
}
14+
}
15+
</script>

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
layout: post
3+
title: Ribbon in ##Platform_Name## Document editor control | Syncfusion
4+
description: Learn here all about the Ribbon UI in Syncfusion ##Platform_Name## Document editor control, how to switch between Ribbon and Toolbar modes.
5+
platform: ej2-asp-core-mvc
6+
control: Ribbon
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
domainurl: ##DomainURL##
10+
---
11+
12+
# Ribbon in ##Platform_Name## Document Editor Control
13+
14+
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.
15+
16+
You can switch between the classic **Toolbar** and the new **Ribbon** UI, and you can also choose between **Classic** and **Simplified** ribbon layouts.
17+
18+
## Enable Ribbon Mode
19+
20+
To enable Ribbon in Document Editor, use the `toolbarMode` property of `DocumentEditorContainer`. The available toolbar modes are:
21+
22+
- **'Toolbar'** - The traditional toolbar UI.
23+
- **'Ribbon'** - The Ribbon UI, which provides a tabbed interface with grouped commands.
24+
25+
By default, `toolbarMode` is `Toolbar`.
26+
27+
The following code shows the how to enable the `Ribbon` in Document Editor.
28+
29+
```typescript
30+
31+
@Html.EJS().DocumentEditorContainer("container").ToolbarMode("Ribbon").ServiceUrl("api/documenteditor/").Render()
32+
<script>
33+
ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
34+
</script>
35+
```
36+
37+
## Ribbon Layouts
38+
39+
Document Editor provides two different Ribbon layouts:
40+
41+
- **Classic**: A traditional Office-like ribbon with detailed grouping and larger icons
42+
- **Simplified**: A more compact ribbon design with streamlined controls
43+
44+
By default, `ribbonLayout` is set to `Simplified`.
45+
46+
The following code shows the how to configure the ribbon layout in Document Editor:
47+
48+
```typescript
49+
50+
@Html.EJS().DocumentEditorContainer("container").ToolbarMode("Ribbon").RibbonLayout("Classic").ServiceUrl("api/documenteditor/").Render()
51+
<script>
52+
ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
53+
</script>
54+
```
55+
56+
## See Also
57+
58+
* [How to customize the ribbon](../document-editor/how-to/customize-ribbon)

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
layout: post
3+
title: Ribbon in ##Platform_Name## Document editor control | Syncfusion
4+
description: Learn here all about the Ribbon UI in Syncfusion ##Platform_Name## Document editor control, how to switch between Ribbon and Toolbar modes.
5+
platform: ej2-asp-core-mvc
6+
control: Ribbon
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
domainurl: ##DomainURL##
10+
---
11+
12+
# Ribbon in ##Platform_Name## Document Editor Control
13+
14+
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.
15+
16+
You can switch between the classic **Toolbar** and the new **Ribbon** UI, and you can also choose between **Classic** and **Simplified** ribbon layouts.
17+
18+
## Enable Ribbon Mode
19+
20+
To enable Ribbon in Document Editor, use the `toolbarMode` property of `DocumentEditorContainer`. The available toolbar modes are:
21+
22+
- **'Toolbar'** - The traditional toolbar UI.
23+
- **'Ribbon'** - The Ribbon UI, which provides a tabbed interface with grouped commands.
24+
25+
By default, `toolbarMode` is `Toolbar`.
26+
27+
The following code shows the how to enable the `Ribbon` in Document Editor.
28+
29+
```typescript
30+
31+
<ejs-documenteditorcontainer id="container" toolbarMode="Ribbon" serviceUrl="api/documenteditor/"></ejs-documenteditorcontainer>
32+
<script>
33+
ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
34+
</script>
35+
```
36+
37+
## Ribbon Layouts
38+
39+
Document Editor provides two different Ribbon layouts:
40+
41+
- **Classic**: A traditional Office-like ribbon with detailed grouping and larger icons
42+
- **Simplified**: A more compact ribbon design with streamlined controls
43+
44+
By default, `ribbonLayout` is set to `Simplified`.
45+
46+
The following code shows the how to configure the ribbon layout in Document Editor:
47+
48+
```typescript
49+
50+
<ejs-documenteditorcontainer id="container" toolbarMode="Ribbon" ribbonLayout="Classic" serviceUrl="api/documenteditor/"></ejs-documenteditorcontainer>
51+
<script>
52+
ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
53+
</script>
54+
```
55+
56+
## See Also
57+
58+
* [How to customize the ribbon](../document-editor/how-to/customize-ribbon)

0 commit comments

Comments
 (0)