diff --git a/Document-Processing/Word/Word-Processor/asp-net-core/getting-started-core.md b/Document-Processing/Word/Word-Processor/asp-net-core/getting-started-core.md index 681efd4a81..2d580a496b 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-core/getting-started-core.md +++ b/Document-Processing/Word/Word-Processor/asp-net-core/getting-started-core.md @@ -1,31 +1,39 @@ --- layout: post -title: Getting Started with Syncfusion Document Editor Control -description: Check out and learn about getting started with Document Editor control of Syncfusion Essential JS 2 and more details. +title: Getting Stared with ASP.NET Core DOCX Editor | Syncfusion +description: Learn how to create a DOCX Editor in an ASP.NET Core application using the Syncfusion® Document Editor control to create, edit, and view Word documents. platform: document-processing control: Getting Started Core documentation: ug --- +# Getting Started with ASP.NET Core DOCX Editor -# Getting Started with ASP.NET Core DocumentEditor Control +Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a ASP.NET Core application. -This section briefly explains about how to include [ASP.NET Core DocumentEditor](https://www.syncfusion.com/aspnet-core-ui-controls/word-processor) control in your ASP.NET Core application using Visual Studio. +## Steps to create an ASP.NET Core DOCX Editor -## Prerequisites +This section briefly explains about how to include [ASP.NET Core DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/asp-net-core-docx-editor) control in your ASP.NET Core application using Visual Studio. + +### Prerequisites [System requirements for ASP.NET Core controls](https://ej2.syncfusion.com/aspnetcore/documentation/system-requirements) -## Create ASP.NET Core web application with Razor pages +### Create ASP.NET Core web application with Razor pages Create a new ASP.NET Core web application using one of the following methods: * [Create a Project using Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-8.0&tabs=visual-studio#create-a-razor-pages-web-app) * [Create a Project using Syncfusion® ASP.NET Core Extension](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/razor-pages) -## Install ASP.NET Core package in the application +### Install Syncfusion® ASP.NET Core Nuget packages -To add `ASP.NET Core` controls in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core/) and then install it. Alternatively, you can utilize the following package manager command to achieve the same. +To add **ASP.NET Core Document Editor** component in the application, follow the steps below. + - open NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), + - search and install the following package + - [Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core/) + +Alternatively, you can utilize the following package manager command to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -35,9 +43,9 @@ Install-Package Syncfusion.EJ2.AspNet.Core -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® ASP.NET Core controls are available in [nuget.org.](https://www.nuget.org/packages?q=syncfusion.EJ2) Refer to [NuGet packages topic](https://ej2.syncfusion.com/aspnetcore/documentation/nuget-packages) to learn more about installing NuGet packages in various OS environments. The Syncfusion.EJ2.AspNet.Core NuGet package has dependencies, [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json/) for JSON serialization and [Syncfusion.Licensing](https://www.nuget.org/packages/Syncfusion.Licensing/) for validating Syncfusion® license key. +N> This package includes dependencies such as [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json/) for JSON serialization and [Syncfusion.Licensing](https://www.nuget.org/packages/Syncfusion.Licensing/) for license validation.” -## Add Syncfusion® ASP.NET Core Tag Helper +### Add Syncfusion® ASP.NET Core Tag Helper Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelper. @@ -49,7 +57,7 @@ Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelpe {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +### Add Themes and Script References Here, the theme and script is referred using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows, @@ -67,11 +75,9 @@ Here, the theme and script is referred using CDN inside the `` of `~/Pages {% endhighlight %} {% endtabs %} -N> Checkout the [Themes topic](https://ej2.syncfusion.com/aspnetcore/documentation/appearance/theme) to learn different ways ([CDN](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#cdn-reference), [NPM package](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#node-package-manager-npm), and [CRG](https://ej2.syncfusion.com/aspnetcore/documentation/common/custom-resource-generator)) to refer styles in ASP.NET Core application, and to have the expected appearance for Syncfusion® ASP.NET Core controls. - -N> Checkout the [Adding Script Reference](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your ASP.NET Core application. +N> Refer the [Themes topic](https://ej2.syncfusion.com/aspnetcore/documentation/appearance/theme) to learn the different ways to include Syncfusion styles (using [CDN](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#cdn-reference), [NPM package](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#node-package-manager-npm), or [CRG](https://ej2.syncfusion.com/aspnetcore/documentation/common/custom-resource-generator)) and ensure the expected appearance of Syncfusion® ASP.NET Core controls, and check the [Adding Script Reference](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references) documentation to understand the various approaches for adding required script references in your ASP.NET Core application. -## Register Syncfusion® Script Manager +### Register Syncfusion® Script Manager Also, register the script manager `` at the end of `` in the ASP.NET Core application as follows. @@ -87,24 +93,9 @@ Also, register the script manager `` at the end of `` in the A {% endhighlight %} {% endtabs %} -## Understanding component options - -* **DocumentEditor**: A customizable component where you build the UI according to your specific requirements -* **DocumentEditorContainer**: A complete solution with a predefined toolbar, properties pane, and status bar for comprehensive document editing - -This guide demonstrates both options. - -## Add ASP.NET Core DocumentEditor control - -Add the Syncfusion® 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 %} +### Add the Syncfusion® Document Editor component -For example, the Document Editor Container component is added to the `~/Pages/Index.cshtml` page. +Add the Syncfusion® ASP.NET Core Document Editor tag helper in `~/Pages/Index.cshtml` page. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -112,18 +103,10 @@ For example, the Document Editor Container component is added to the `~/Pages/In {% endhighlight %} {% endtabs %} -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core DocumentEditor control will be rendered in the default web browser. +### Run the application -![ASP.NET Core DocumentEditor Control](images/documenteditor-control.png) - -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-Getting-Started-Examples/tree/main/DocumentEditor/ASP.NET%20Core%20Tag%20Helper%20Examples). +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core Document Editor control will be rendered in the default web browser. -## See also +![ASP.NET Core DocumentEditor Control](images/documenteditor-control.png) -* [Getting Started with Syncfusion® ASP.NET Core using Razor Pages](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/razor-pages) -* [Getting Started with Syncfusion® ASP.NET Core MVC using Tag Helper](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/aspnet-core-mvc-taghelper) -* [How to localize the Document Editor container](../asp-net-core/global-local). -* [How to load the document by default](../asp-net-core/how-to/open-default-document). -* [How to customize tool bar](../asp-net-core/how-to/customize-tool-bar). -* [How to resize Document editor component](../asp-net-core/how-to/resize-document-editor). -* [How to add a save button to the DocumentEditorContainer component toolbar](../asp-net-core/how-to/add-save-button-in-toolbar). +N> You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-Getting-Started-Examples/tree/main/DocumentEditor/ASP.NET%20Core%20Tag%20Helper%20Examples). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/asp-net-mvc/getting-started.md b/Document-Processing/Word/Word-Processor/asp-net-mvc/getting-started.md index 3a872e3289..31153af665 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-mvc/getting-started.md +++ b/Document-Processing/Word/Word-Processor/asp-net-mvc/getting-started.md @@ -1,29 +1,35 @@ --- layout: post -title: Getting Started with ASP.NET MVC DocumentEditor | Syncfusion -description: Check out and learn about getting started with ASP.NET MVC DocumentEditor control of Syncfusion Essential JS 2 and more details. +title: Getting Started with ASP.NET MVC DOCX Editor | Syncfusion +description: Learn how to create a DOCX Editor in an ASP.NET MVC application using the Syncfusion® Document Editor control to create, edit, and view Word documents. platform: document-processing control: Getting Started documentation: ug --- +# Getting Started with ASP.NET MVC DOCX Editor -# Getting Started with ASP.NET MVC DocumentEditor Control +Syncfusion® DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a ASP.NET MVC application. -This section briefly explains about how to include [ASP.NET MVC DocumentEditor](https://www.syncfusion.com/aspnet-mvc-ui-controls/word-processor) control in your ASP.NET MVC application using Visual Studio. +## Steps to create an ASP.NET MVC DOCX Editor -## Prerequisites +This section briefly explains about how to include [ASP.NET MVC DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/asp-net-mvc-docx-editor) control in your ASP.NET MVC application using Visual Studio. + +### Prerequisites [System requirements for ASP.NET MVC controls](https://ej2.syncfusion.com/aspnetmvc/documentation/system-requirements) -## Create ASP.NET MVC application with HTML helper +### Create ASP.NET MVC application with HTML helper * [Create a Project using Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app) * [Create a Project using Syncfusion® ASP.NET MVC Extension](https://ej2.syncfusion.com/aspnetmvc/documentation/getting-started/project-template) -## Install ASP.NET MVC package in the application +### Install Syncfusion® ASP.NET MVC Nuget packages -To add `ASP.NET MVC` controls in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) and then install it. +To add **ASP.NET MVC Document Editor** component in the application, follow the steps below. +- open NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), +- search and install the following package + - [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -33,9 +39,9 @@ Install-Package Syncfusion.EJ2.MVC5 -Version {{ site.ej2version }} {% endhighlight %} {% endtabs %} -N> Syncfusion® ASP.NET MVC controls are available in [nuget.org.](https://www.nuget.org/packages?q=syncfusion.EJ2) Refer to [NuGet packages topic](https://ej2.syncfusion.com/aspnetmvc/documentation/nuget-packages) to learn more about installing NuGet packages in various OS environments. The Syncfusion.EJ2.MVC5 NuGet package has dependencies, [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json/) for JSON serialization and [Syncfusion.Licensing](https://www.nuget.org/packages/Syncfusion.Licensing/) for validating Syncfusion® license key. +N> This package includes dependencies such as [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json/) for JSON serialization and [Syncfusion.Licensing](https://www.nuget.org/packages/Syncfusion.Licensing/) for license validation.” -## Add namespace +### Add namespace Add **Syncfusion.EJ2** namespace reference in `Web.config` under `Views` folder. @@ -45,9 +51,9 @@ Add **Syncfusion.EJ2** namespace reference in `Web.config` under `Views` folder. ``` -## Add stylesheet and script resources +### Add Themes and Script References -Here, the theme and script is referred using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows, +Here, the theme and script is referred using CDN inside the `` of `~/Views/Shared/_Layout.cshtml` file as follows, {% tabs %} {% highlight cshtml tabtitle="~/_Layout.cshtml" %} @@ -63,11 +69,11 @@ Here, the theme and script is referred using CDN inside the `` of `~/Pages {% endhighlight %} {% endtabs %} -N> Checkout the [Themes topic](https://ej2.syncfusion.com/aspnetmvc/documentation/appearance/theme) to learn different ways (CDN, NPM package, and [CRG](https://ej2.syncfusion.com/aspnetmvc/documentation/common/custom-resource-generator)) to refer styles in ASP.NET MVC application, and to have the expected appearance for Syncfusion® ASP.NET MVC controls. Checkout the [Adding Script Reference](https://ej2.syncfusion.com/aspnetmvc/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your ASP.NET MVC application. +N> Refer the [Themes topic](https://ej2.syncfusion.com/aspnetmvc/documentation/appearance/theme) to learn the different ways to include Syncfusion styles (using [CDN](https://ej2.syncfusion.com/aspnetmvc/documentation/common/adding-script-references#cdn-reference), [NPM package](https://ej2.syncfusion.com/aspnetmvc/documentation/common/adding-script-references#node-package-manager-npm), or [CRG](https://ej2.syncfusion.com/aspnetmvc/documentation/common/custom-resource-generator)) and ensure the expected appearance of Syncfusion® ASP.NET MVC controls, and check the [Adding Script Reference](https://ej2.syncfusion.com/aspnetmvc/documentation/common/adding-script-references) documentation to understand the various approaches for adding required script references in your ASP.NET MVC application. -## Register Syncfusion® script manager +### Register Syncfusion® script manager -Also, register the script manager `EJS().ScriptManager()` at the end of `` in the `~/Pages/Shared/_Layout.cshtml` file as follows. +Also, register the script manager `EJS().ScriptManager()` at the end of `` in the `~/Views/Shared/_Layout.cshtml` file as follows. {% tabs %} {% highlight cshtml tabtitle="~/_Layout.cshtml" %} @@ -81,33 +87,19 @@ Also, register the script manager `EJS().ScriptManager()` at the end of `` {% endhighlight %} {% endtabs %} -## Understanding component options - -* **DocumentEditor** — a customizable control for building a tailored UI. -* **DocumentEditorContainer** — a complete container that includes a predefined toolbar, properties pane, and status bar for quick integration. - -Choose the control that matches the required level of customization. +### Add the Syncfusion® Document Editor component -## Add ASP.NET MVC DocumentEditor control - -Now, add the Syncfusion® ASP.NET MVC DocumentEditor control in `~/Views/Home/Index.cshtml` page. +Add the Syncfusion® ASP.NET MVC Document Editor control in `~/Views/Home/Index.cshtml` page. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/document-editor/asp-net-mvc/getting-started/razor %} +{% include code-snippet/document-editor/asp-net-mvc/document-editor-container/getting-started/razor %} {% endhighlight %} {% endtabs %} -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET MVC DocumentEditor control will be rendered in the default web browser. - -N> Starting from `v19.3.0.x`, we have optimized the accuracy of text size measurements such as to match Microsoft Word pagination for most Word documents. This improvement is included as default behavior along with an optional API [to disable it and retain the document pagination behavior of older versions](./how-to/disable-optimized-text-measuring). -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-MVC-Getting-Started-Examples/tree/main/DocumentEditor/ASP.NET%20MVC%20Razor%20Examples). +### Run the application -## See also +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET MVC Document Editor control will be rendered in the default web browser. -* [How to localize the Document editor container](./global-local). -* [How to load the document by default](./how-to/open-default-document). -* [How to customize tool bar](./how-to/customize-tool-bar). -* [How to resize Document editor component](./how-to/resize-document-editor). -* [How to add a save button to the DocumentEditorContainer component toolbar](./how-to/add-save-button-in-toolbar) +N> You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/ASP-NET-MVC-Getting-Started-Examples/tree/main/DocumentEditor/ASP.NET%20MVC%20Razor%20Examples).