Skip to content

1025962: Add Document Editor Details as a Separate Page #2814

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Sujitha2610 wants to merge 1 commit into
base: hotfix/hotfix-v33.2.3
Choose a base branch
from
Open

1025962: Add Document Editor Details as a Separate Page #2814

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions Document-Processing-toc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3541,6 +3541,7 @@
<li><a href="/document-processing/word/word-processor/asp-net-core/security-advisories">Security Advisories</a></li>
<li>How To
<ul>
<li><a href="/document-processing/word/word-processor/asp-net-core/how-to/document-editor-component.md">DocumentEditorContainer vs DocumentEditor</a></li>
<li><a href="/document-processing/word/word-processor/asp-net-core/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
<li><a href="/document-processing/word/word-processor/asp-net-core/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
<li><a href="/document-processing/word/word-processor/asp-net-core/how-to/customize-context-menu">Customize context menu</a></li>
Expand Down Expand Up @@ -3655,6 +3656,7 @@
<li><a href="/document-processing/word/word-processor/asp-net-mvc/security-advisories">Security Advisories</a></li>
<li>How To
<ul>
<li><a href="/document-processing/word/word-processor/asp-net-mvc/how-to/document-editor-component.md">DocumentEditorContainer vs DocumentEditor</a></li>
<li><a href="/document-processing/word/word-processor/asp-net-mvc/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
<li><a href="/document-processing/word/word-processor/asp-net-mvc/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
<li><a href="/document-processing/word/word-processor/asp-net-mvc/how-to/customize-context-menu">Customize context menu</a></li>
Expand Down Expand Up @@ -3790,6 +3792,7 @@
<li><a href="/document-processing/word/word-processor/angular/security-advisories">Security Advisories</a></li>
<li>How To
<ul>
<li><a href="/document-processing/word/word-processor/angular/how-to/document-editor-component.md">DocumentEditorContainer vs DocumentEditor</a></li>
<li><a href="/document-processing/word/word-processor/angular/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
<li><a href="/document-processing/word/word-processor/angular/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
<li><a href="/document-processing/word/word-processor/angular/how-to/customize-context-menu">Customize context menu</a></li>
Expand Down Expand Up @@ -4008,6 +4011,7 @@
<li><a href="/document-processing/word/word-processor/react/security-advisories">Security Advisories</a></li>
<li>How To
<ul>
<li><a href="/document-processing/word/word-processor/react/how-to/document-editor-component.md">DocumentEditorContainer vs DocumentEditor</a></li>
<li><a href="/document-processing/word/word-processor/react/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
<li><a href="/document-processing/word/word-processor/react/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
<li><a href="/document-processing/word/word-processor/react/how-to/customize-context-menu">Customize context menu</a></li>
Expand Down Expand Up @@ -4151,6 +4155,7 @@
<li><a href="/document-processing/word/word-processor/vue/security-advisories">Security Advisories</a></li>
<li>How To
<ul>
<li><a href="/document-processing/word/word-processor/vue/how-to/document-editor-component.md">DocumentEditorContainer vs DocumentEditor</a></li>
<li><a href="/document-processing/word/word-processor/vue/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
<li><a href="/document-processing/word/word-processor/vue/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
<li><a href="/document-processing/word/word-processor/vue/how-to/customize-context-menu">Customize context menu</a></li>
Expand Down Expand Up @@ -4293,6 +4298,7 @@
<li><a href="/document-processing/word/word-processor/javascript-es5/security-advisories">Security Advisories</a></li>
<li>How To
<ul>
<li><a href="/document-processing/word/word-processor/javascript-es5/how-to/document-editor-component.md">DocumentEditorContainer vs DocumentEditor</a></li>
<li><a href="/document-processing/word/word-processor/javascript-es5/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
<li><a href="/document-processing/word/word-processor/javascript-es5/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
<li><a href="/document-processing/word/word-processor/javascript-es5/how-to/customize-context-menu">Customize context menu</a></li>
Expand Down Expand Up @@ -4434,6 +4440,7 @@
<li><a href="/document-processing/word/word-processor/javascript-es6/security-advisories">Security Advisories</a></li>
<li>How To
<ul>
<li><a href="/document-processing/word/word-processor/javascript-es6/how-to/document-editor-component.md">DocumentEditorContainer vs DocumentEditor</a></li>
<li><a href="/document-processing/word/word-processor/javascript-es6/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
<li><a href="/document-processing/word/word-processor/javascript-es6/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
<li><a href="/document-processing/word/word-processor/javascript-es6/how-to/customize-context-menu">Customize context menu</a></li>
Expand Down
1 change: 1 addition & 0 deletions Document-Processing/Word/Word-Processor/angular/document-editor-toc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@
<li><a href="/document-processing/word/word-processor/angular/security-advisories">Security Advisories</a></li>
<li>How To
<ul>
<li><a href="/document-processing/word/word-processor/angular/how-to/document-editor-component.md">DocumentEditorContainer vs DocumentEditor</a></li>
<li><a href="/document-processing/word/word-processor/angular/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
<li><a href="/document-processing/word/word-processor/angular/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
<li><a href="/document-processing/word/word-processor/angular/how-to/customize-context-menu">Customize context menu</a></li>
Expand Down
39 changes: 39 additions & 0 deletions ...Processing/Word/Word-Processor/asp-net-core/how-to/document-editor-component.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
---
layout: post
title: DocumentEditorContainer vs DocumentEditor in ASP.NET Core DOCX Editor
description: Learn the differences between DocumentEditorContainer and DocumentEditor in the Syncfusion ASP.NET Core DOCX Editor and understand when and how to use the DocumentEditor component for custom document editing scenarios.
platform: document-processing
control: DocumentEditor
documentation: ug
domainurl: ##DomainURL##a
---

## DocumentEditorContainer vs DocumentEditor in ASP.NET Core DOCX Editor

In this article, we explain the differences between **DocumentEditorContainer** and **DocumentEditor**, and also describe how to use the **DocumentEditor** component in the ASP.NET Core DOCX Editor.

## Difference between DocumentEditorContainer and DocumentEditor

The **DocumentEditor** component provides a flexible foundation for creating, viewing, and editing Word documents. Unlike **DocumentEditorContainer**, this component allows you to customize the UI options based on your specific requirements.

- **DocumentEditorContainer**: A complete solution with a predefined toolbar and properties pane that provides a comprehensive document editing experience. It allows users to create, view, and edit Word documents with minimal configuration.
- **DocumentEditor**: A customizable component that provides a flexible foundation for creating, viewing, and editing Word documents. This component allows you to build a user interface based on your specific requirements.

### When to Use DocumentEditorContainer and DocumentEditor

- Choose **DocumentEditorContainer** for standard document editing scenarios (applications similar to Microsoft Word).
- Choose **DocumentEditor** for advanced or unique UI/UX requirements where customization is key.

## Add ASP.NET Core DocumentEditor control

Add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core DocumentEditor tag helper in `~/Pages/Index.cshtml` page.

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
{% include code-snippet/document-editor/asp-net-core/getting-started/tagHelper %}
{% endhighlight %}
{% endtabs %}

## See also

* [How to customize tool bar](./customize-tool-bar).
39 changes: 39 additions & 0 deletions ...-Processing/Word/Word-Processor/asp-net-mvc/how-to/document-editor-component.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
---
layout: post
title: DocumentEditorContainer vs DocumentEditor in ASP.NET MVC DOCX Editor
description: Learn the differences between DocumentEditorContainer and DocumentEditor in the Syncfusion ASP.NET MVC DOCX Editor and understand when and how to use the DocumentEditor component for custom document editing scenarios.
platform: document-processing
control: DocumentEditor
documentation: ug
domainurl: ##DomainURL##a
---

## DocumentEditorContainer vs DocumentEditor in ASP.NET MVC DOCX Editor

In this article, we explain the differences between **DocumentEditorContainer** and **DocumentEditor**, and also describe how to use the **DocumentEditor** component in the ASP.NET MVC DOCX Editor.

## Difference between DocumentEditorContainer and DocumentEditor

The **DocumentEditor** component provides a flexible foundation for creating, viewing, and editing Word documents. Unlike **DocumentEditorContainer**, this component allows you to customize the UI options based on your specific requirements.

- **DocumentEditorContainer**: A complete solution with a predefined toolbar and properties pane that provides a comprehensive document editing experience. It allows users to create, view, and edit Word documents with minimal configuration.
- **DocumentEditor**: A customizable component that provides a flexible foundation for creating, viewing, and editing Word documents. This component allows you to build a user interface based on your specific requirements.

### When to Use DocumentEditorContainer and DocumentEditor

- Choose **DocumentEditorContainer** for standard document editing scenarios (applications similar to Microsoft Word).
- Choose **DocumentEditor** for advanced or unique UI/UX requirements where customization is key.

## Add ASP.NET MVC DocumentEditor control

Now, add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC DocumentEditor control in `~/Views/Home/Index.cshtml` page.

{% tabs %}
{% highlight razor tabtitle="CSHTML" %}
{% include code-snippet/document-editor/asp-net-mvc/getting-started/razor %}
{% endhighlight %}
{% endtabs %}

## See also

* [How to customize tool bar](./customize-tool-bar.md).
1 change: 1 addition & 0 deletions ...ent-Processing/Word/Word-Processor/javascript-es5/ej2-javascript-document-editor-toc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@
<li><a href="/document-processing/word/word-processor/javascript-es5/security-advisories">Security Advisories</a></li>
<li>How To
<ul>
<li><a href="/document-processing/word/word-processor/javascript-es5/how-to/document-editor-component.md">DocumentEditorContainer vs DocumentEditor</a></li>
<li><a href="/document-processing/word/word-processor/javascript-es5/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
<li><a href="/document-processing/word/word-processor/javascript-es5/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
<li><a href="/document-processing/word/word-processor/javascript-es5/how-to/customize-context-menu">Customize context menu</a></li>
Expand Down
95 changes: 95 additions & 0 deletions ...ocessing/Word/Word-Processor/javascript-es5/how-to/document-editor-component.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
---
layout: post
title: DocumentEditorContainer vs DocumentEditor in Javascript ES5 DOCX Editor
description: Learn the differences between DocumentEditorContainer and DocumentEditor in the Syncfusion Javascript (ES5) DOCX Editor and understand when and how to use the DocumentEditor component for custom document editing scenarios.
platform: document-processing
control: DocumentEditor
documentation: ug
domainurl: ##DomainURL##
---

## DocumentEditorContainer vs DocumentEditor in Javascript ES5 DOCX Editor

In this article, we explain the differences between **DocumentEditorContainer** and **DocumentEditor**, and also describe how to use the **DocumentEditor** component in the Javascript (ES5) DOCX Editor.

## Difference between DocumentEditorContainer and DocumentEditor

The **DocumentEditor** component provides a flexible foundation for creating, viewing, and editing Word documents. Unlike **DocumentEditorContainer**, this component allows you to customize the UI options based on your specific requirements.

- **DocumentEditorContainer**: A complete solution with a predefined toolbar and properties pane that provides a comprehensive document editing experience. It allows users to create, view, and edit Word documents with minimal configuration.
- **DocumentEditor**: A customizable component that provides a flexible foundation for creating, viewing, and editing Word documents. This component allows you to build a user interface based on your specific requirements.

### When to Use DocumentEditorContainer and DocumentEditor

- Choose **DocumentEditorContainer** for standard document editing scenarios (applications similar to Microsoft Word).
- Choose **DocumentEditor** for advanced or unique UI/UX requirements where customization is key.

## Adding DocumentEditor component

Add the `Div` element and initiate the DocumentEditor component in the `index.html` by using following code

```html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2 Document editor</title>
<!-- EJ2 Document editor dependent material theme -->
<link href="resources/base/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
<link href="resources/buttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
<link href="resources/inputs/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
<link href="resources/popups/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
<link href="resources/lists/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
<link href="resources/navigations/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
<link href="resources/splitbuttons/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
<link href="resources/dropdowns/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />
<!-- EJ2 DocumentEditor material theme -->
<link href="resources/documenteditor/styles/material.css" rel="stylesheet" type="text/css" rel='nofollow' />

<!-- EJ2 Document editor dependent scripts -->
<script src="resources/scripts/ej2-base.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-data.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-svg-base.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-file-utils.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-compression.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-pdf-export.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-buttons.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-popups.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-splitbuttons.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-inputs.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-lists.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-navigations.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-dropdowns.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-calendars.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-charts.min.js" type="text/javascript"></script>
<script src="resources/scripts/ej2-office-chart.min.js" type="text/javascript"></script>
<!-- EJ2 Document editor script -->
<script src="resources/scripts/ej2-documenteditor.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Element which is going to render -->
<div id='DocumentEditor'></div>
<script>
// Initialize DocumentEditor component
var documenteditor = new ej.documenteditor.DocumentEditor({
isReadOnly: false,
serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
});

documenteditor.acceptTab = true;

// Enable all the built-in modules
documenteditor.enableAllModules();
documenteditor.pageOutline = '#E0E0E0';

// Document editor control rendering
documenteditor.appendTo('#DocumentEditor');
</script>
</body>
</html>
```

> The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server).

## See Also

* [How to customize toolbar](./customize-tool-bar)
1 change: 1 addition & 0 deletions ...ent-Processing/Word/Word-Processor/javascript-es6/ej2-typescript-document-editor-toc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@
<li><a href="/document-processing/word/word-processor/javascript-es6/security-advisories">Security Advisories</a></li>
<li>How To
<ul>
<li><a href="/document-processing/word/word-processor/javascript-es6/how-to/document-editor-component.md">DocumentEditorContainer vs DocumentEditor</a></li>
<li><a href="/document-processing/word/word-processor/javascript-es6/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
<li><a href="/document-processing/word/word-processor/javascript-es6/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
<li><a href="/document-processing/word/word-processor/javascript-es6/how-to/customize-context-menu">Customize context menu</a></li>
Expand Down
Loading