From 6ab91c099da86bf95f01cb0744c0103aea7a1cc6 Mon Sep 17 00:00:00 2001 From: VijayalakshmiGSF4561 Date: Fri, 7 Aug 2026 16:49:55 +0530 Subject: [PATCH] 1046026: Updated 5 how to files in MVC DOCX Editor --- .../asp-net-mvc/how-to/customize-tool-bar.md | 15 ++++----- ...oy-document-editor-component-for-mobile.md | 15 ++++----- ...ader-and-footer-edit-in-document-editor.md | 31 ++++++++++--------- .../disable-optimized-text-measuring.md | 20 ++++++------ ...able-ruler-in-document-editor-component.md | 18 +++++------ 5 files changed, 53 insertions(+), 46 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/customize-tool-bar.md b/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/customize-tool-bar.md index 66c9eba337..9debcc3ac9 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/customize-tool-bar.md +++ b/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/customize-tool-bar.md @@ -1,6 +1,6 @@ --- layout: post -title: Customize Tool Bar in ASP.NET MVC Document Editor Component | Syncfusion +title: Customize Tool Bar in ASP.NET MVC DOCX Editor Component | Syncfusion description: Learn here all about how to customize Tool Bar in Syncfusion ASP.NET MVC Document Editor component of Syncfusion Essential JS 2 and more. platform: document-processing control: Customize Tool Bar @@ -8,15 +8,15 @@ documentation: ug --- -# Customize existing toolbar +# Customize existing toolbar in ASP.NET MVC Document Editor Component ## How to customize existing toolbar in DocumentEditorContainer -DocumentEditorContainer allows to customize (add, show, hide, enable, and disable) existing items in a toolbar. +DocumentEditorContainer allows you to customize (add, show, hide, enable, and disable) existing items in a toolbar. -* Add - New items can be defined by `CustomToolbarItemModel` and with existing items in [`ToolbarItems`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditorContainer.html#Syncfusion_EJ2_DocumentEditor_DocumentEditorContainer_ToolbarItems) property. Newly added item click action can be defined in [`Toolbarclick`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditorContainer.html#Syncfusion_EJ2_DocumentEditor_DocumentEditorContainer_ToolbarClick). +* Add - New items can be defined using `CustomToolbarItemModel` and added alongside existing items in the [`ToolbarItems`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditorContainer.html#Syncfusion_EJ2_DocumentEditor_DocumentEditorContainer_ToolbarItems) property. Newly added item click action can be defined in [`ToolbarClick`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditorContainer.html#Syncfusion_EJ2_DocumentEditor_DocumentEditorContainer_ToolbarClick). * Show, Hide - Existing items can be shown or hidden using the [`ToolbarItems`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditorContainer.html#Syncfusion_EJ2_DocumentEditor_DocumentEditorContainer_ToolbarItems) property. Pre-defined toolbar items are available with `ToolbarItem`. -* Enable, Disable - Toolbar items can be enabled or disabled using `enableItems` +* Enable, Disable - Toolbar items can be enabled or disabled using `enableItems`. {% tabs %} @@ -24,11 +24,12 @@ DocumentEditorContainer allows to customize (add, show, hide, enable, and disabl {% include code-snippet/document-editor/asp-net-mvc/custom-toolbar/razor %} {% endhighlight %} {% highlight c# tabtitle="Custom-toolbar.cs" %} -{% endhighlight %}{% endtabs %} +{% endhighlight %} +{% endtabs %} N> Default value of `ToolbarItems` is `['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']`. ## Online Demo -Explore how to customize the toolbar in the ASP.NET MVC Document Editor for working with Word documents in this live demo [here](https://document.syncfusion.com/demos/docx-editor/asp-net-mvc/documenteditor/toolbarcustomization#/tailwind3). \ No newline at end of file +Explore the live demo [here](https://document.syncfusion.com/demos/docx-editor/asp-net-mvc/documenteditor/toolbarcustomization#/tailwind3) to see how to customize the toolbar in the ASP.NET MVC Document Editor. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/deploy-document-editor-component-for-mobile.md b/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/deploy-document-editor-component-for-mobile.md index 9185b07f77..ceacf8488c 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/deploy-document-editor-component-for-mobile.md +++ b/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/deploy-document-editor-component-for-mobile.md @@ -1,20 +1,20 @@ --- layout: post -title: Deploy Document Editor For Mobile in ASP.NET MVC | Syncfusion -description: Learn here all about deploy document editor component for mobile in Syncfusion ASP.NET MVC Document Editor component of syncfusion and more. +title: Deploy DOCX Editor For Mobile in ASP.NET MVC | Syncfusion +description: Learn here all about deploying the Document Editor component for mobile in the Syncfusion ASP.NET MVC Document Editor component and more. platform: document-processing control: Deploy Document Editor Component For Mobile documentation: ug --- -# Deploy Document Editor component for Mobile +# Deploy Document Editor component for Mobile in ASP.NET MVC ## Document editor component for Mobile -At present, Document editor component is not responsive for mobile, and the editing functionalities aren't ensured in mobile browsers. Whereas it works properly as a document viewer in mobile browsers. +The Document Editor component is currently not responsive for mobile, and the editing functionalities are not supported in mobile browsers. However, it works properly as a document viewer in mobile browsers. -Hence, it is recommended to switch the Document editor component as read-only in mobile browsers. Also, invoke `fitPage` method with `FitPageWidth` parameter in document change event, such as to display one full page by adjusting the zoom factor. +Hence, it is recommended to set the Document Editor component to read-only in mobile browsers by using the [`restrictEditing`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditorContainer.html#Syncfusion_EJ2_DocumentEditor_DocumentEditorContainer_RestrictEditing) property in DocumentEditorContainer or the [`isReadOnly`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditor.html#Syncfusion_EJ2_DocumentEditor_DocumentEditor_IsReadOnly) property in DocumentEditor, based on your requirement. Also, invoke the [`fitPage`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditor.html#Syncfusion_EJ2_DocumentEditor_DocumentEditor_FitPage_System_String_) method with the [`FitPageWidth`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DocumentEditor.PageFitType.html) parameter in the document change event to display one full page by adjusting the zoom factor. {% tabs %} @@ -22,8 +22,9 @@ Hence, it is recommended to switch the Document editor component as read-only in {% include code-snippet/document-editor/asp-net-mvc/mobile-view/razor %} {% endhighlight %} {% highlight c# tabtitle="Mobile-view.cs" %} -{% endhighlight %}{% endtabs %} +{% endhighlight %} +{% endtabs %} -N> You can use the [`restrictEditing`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditorContainer.html#Syncfusion_EJ2_DocumentEditor_DocumentEditorContainer_RestrictEditing) in DocumentEditorContainer and [`isReadOnly`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditor.html#Syncfusion_EJ2_DocumentEditor_DocumentEditor_IsReadOnly) in DocumentEditor based on your requirement to change component to read only mode. +N> For more information, refer to the [`restrictEditing`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditorContainer.html#Syncfusion_EJ2_DocumentEditor_DocumentEditorContainer_RestrictEditing) property in DocumentEditorContainer and the [`isReadOnly`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditor.html#Syncfusion_EJ2_DocumentEditor_DocumentEditor_IsReadOnly) property in DocumentEditor to change the component to read-only mode. diff --git a/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/disable-header-and-footer-edit-in-document-editor.md b/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/disable-header-and-footer-edit-in-document-editor.md index f508555e8c..0c0a47a794 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/disable-header-and-footer-edit-in-document-editor.md +++ b/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/disable-header-and-footer-edit-in-document-editor.md @@ -1,21 +1,19 @@ --- layout: post -title: How to disable header and footer edit in ASP.NET MVC Document Editor Component -description: Learn how to to disable header and footer edit in Document from the Syncfusion ASP.NET MVC Document Editor component of Syncfusion Essential JS2 and more. +title: Disable header and footer edit in ASP.NET MVC DOCX Editor | Syncfusion +description: Learn here all about how to disable header and footer edit in the Syncfusion ASP.NET MVC Document Editor component of Syncfusion Essential JS 2 and more. platform: document-processing control: Disable Header And Footer documentation: ug --- -# How to disable header and footer edit in Document Editor component +# How to disable header and footer edit in ASP.NET MVC Document Editor ## Disable header and footer edit in DocumentEditorContainer instance -You can use [`restrictEditing`] property to disable header and footer editing based on selection context type. +You can use the [`restrictEditing`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditorContainer.html#Syncfusion_EJ2_DocumentEditor_DocumentEditorContainer_RestrictEditing) property to disable header and footer editing based on the selection context type. The `restrictEditing` property restricts document modification and makes the document read-only. To disable header and footer editing, handle the selection-change event of the Document Editor and set `restrictEditing` to `true` whenever the selection is inside a header or footer region. -RestrictEditing allows you to restrict the document modification and makes the Document read only mode. So, by using this property, and if selection inside header or footer, you can set this property as true. - -The following example code illustrates how to header and footer edit in `DocumentEditorContainer` instance. +The following example code illustrates how to disable header and footer edit in the `DocumentEditorContainer` instance. {% tabs %} @@ -23,11 +21,14 @@ The following example code illustrates how to header and footer edit in `Documen {% include code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer/razor %} {% endhighlight %} {% highlight c# tabtitle="document-editor.cs" %} -{% endhighlight %}{% endtabs %} +{% endhighlight %} +{% endtabs %} + +### Disable header and footer edit using the closeHeaderFooter API -Otherwise, you can disable clicking inside Header or Footer by using [`closeHeaderFooter`] API in selection module. +Otherwise, you can disable clicking inside a header or footer by using the `closeHeaderFooter` API in the selection module. -The following example code illustrates how to close header and footer when selection is inside header or footer in `DocumentEditorContainer` instance. +The following example code illustrates how to close the header and footer when the selection is inside a header or footer region in the `DocumentEditorContainer` instance. {% tabs %} @@ -35,17 +36,19 @@ The following example code illustrates how to close header and footer when selec {% include code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer-close/razor %} {% endhighlight %} {% highlight c# tabtitle="document-editor.cs" %} -{% endhighlight %}{% endtabs %} +{% endhighlight %} +{% endtabs %} ## Disable header and footer edit in DocumentEditor instance -Like restrictEditing, you can use [`isReadOnly`] property in Document editor to disable header and footer edit. +Like `restrictEditing`, you can use the [`isReadOnly`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditor.html#Syncfusion_EJ2_DocumentEditor_DocumentEditor_IsReadOnly) property in the Document Editor to disable header and footer edit. -The following example code illustrates how to header and footer edit in `DocumentEditor` instance. +The following example code illustrates how to disable header and footer edit in the `DocumentEditor` instance. {% tabs %} {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/document-editor/asp-net-mvc/document-editor-container/disable-header-footer-documenteditor/razor %} {% endhighlight %} {% highlight c# tabtitle="document-editor.cs" %} -{% endhighlight %}{% endtabs %} +{% endhighlight %} +{% endtabs %} diff --git a/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/disable-optimized-text-measuring.md b/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/disable-optimized-text-measuring.md index 3b1bd90232..c580ec2d54 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/disable-optimized-text-measuring.md +++ b/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/disable-optimized-text-measuring.md @@ -1,22 +1,22 @@ --- layout: post -title: Disable Optimized Text Measuring in ASP.NET MVC Document Editor Component -description: Learn here all about disable optimized text measuring in Syncfusion ASP.NET MVC Document Editor component of syncfusion and more. +title: Optimized Text Measuring in ASP.NET MVC DOCX Editor | Syncfusion +description: Learn here all about how to disable optimized text measuring in the Syncfusion ASP.NET MVC Document Editor component and more. platform: document-processing control: Disable Optimized Text Measuring documentation: ug --- -# How to disable optimized text measuring in Document Editor component +# How to disable optimized text measuring in ASP.NET MVC Document Editor -Starting from v19.3.0.x, the accuracy of text size measurements in Document editor is improved such as to match Microsoft Word pagination for most Word documents. This improvement is included as default behavior along with an optional API `enableOptimizedTextMeasuring` in Document editor settings. +Starting from v19.3.0.x, the accuracy of text size measurements in the Document Editor is improved to match Microsoft Word pagination for most Word documents. This improvement is included as the default behavior along with an optional API `enableOptimizedTextMeasuring` in the Document Editor settings. -If you want the Document editor component to retain the document pagination (display page-by-page) behavior like v19.2.0.x and older versions. Then, you can disable this optimized text measuring improvement, by setting `false` to `enableOptimizedTextMeasuring` property of Document Editor component. +If you want the Document Editor component to retain the document pagination (display page-by-page) behavior like v19.2.0.x and older versions, then you can disable this optimized text measuring improvement by setting the `enableOptimizedTextMeasuring` property to `false` in the `documentEditorSettings` of the Document Editor component. ## Disable optimized text measuring in `DocumentEditorContainer` instance -The following example code illustrates how to disable optimized text measuring improvement in `DocumentEditorContainer` instance. +The following example code illustrates how to disable optimized text measuring in the `DocumentEditorContainer` instance. {% tabs %} @@ -24,13 +24,14 @@ The following example code illustrates how to disable optimized text measuring i {% include code-snippet/document-editor/asp-net-mvc/optimized-text/razor %} {% endhighlight %} {% highlight c# tabtitle="Optimized-text.cs" %} -{% endhighlight %}{% endtabs %} +{% endhighlight %} +{% endtabs %} ## Disable optimized text measuring in `DocumentEditor` instance -The following example code illustrates how to disable optimized text measuring improvement in `DocumentEditor` instance. +The following example code illustrates how to disable optimized text measuring in the `DocumentEditor` instance. {% tabs %} @@ -38,5 +39,6 @@ The following example code illustrates how to disable optimized text measuring i {% include code-snippet/document-editor/asp-net-mvc/document-editor-container/optimized-text/razor %} {% endhighlight %} {% highlight c# tabtitle="Optimized-text.cs" %} -{% endhighlight %}{% endtabs %} +{% endhighlight %} +{% endtabs %} diff --git a/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/enable-ruler-in-document-editor-component.md b/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/enable-ruler-in-document-editor-component.md index f6504524de..a140314007 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/enable-ruler-in-document-editor-component.md +++ b/Document-Processing/Word/Word-Processor/asp-net-mvc/how-to/enable-ruler-in-document-editor-component.md @@ -1,17 +1,19 @@ --- layout: post -title: how to enable ruler in ASP.NET MVC Document Editor Component -description: Learn how to enable ruler in ASP.NET MVC Document Editor component of Syncfusion Essential JS 2 and more. +title: How to enable ruler in ASP.NET MVC DOCX Editor Component | Syncfusion +description: Learn how to enable the ruler in the ASP.NET MVC Document Editor component of Syncfusion Essential JS 2 and more. platform: document-processing control: Enable Ruler documentation: ug --- -## How to enable ruler in ASP.NET MVC Document Editor component +# How to enable the ruler in the ASP.NET MVC Document Editor component -Using ruler we can refer to setting specific margins, tab stops, or indentations within a document to ensure consistent formatting in Document Editor. +To enable the ruler, set the [`showRuler`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditorSettings.html) property to `true` in the `documentEditorSettings` of the Document Editor component. By default, the ruler is disabled. The ruler can be used to set specific margins, tab stops, or indentations within a document to ensure consistent formatting. -The following example illustrates how to enable ruler in Document Editor +## How to enable ruler in the Document Editor component + +The following example illustrates how to enable the ruler in the Document Editor. {% tabs %} @@ -25,11 +27,9 @@ The following example illustrates how to enable ruler in Document Editor -## How to enable ruler in Document Editor Container component - -Using ruler we can refer to setting specific margins, tab stops, or indentations within a document to ensure consistent formatting in Document Editor Container. +## How to enable ruler in the Document Editor Container component -The following example illustrates how to enable ruler in Document Editor Container. +The following example illustrates how to enable the ruler in the Document Editor Container. {% tabs %}