diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/ai-coding-assistant/prompt-library.md b/ej2-asp-core-mvc/EJ2_ASP.MVC/ai-coding-assistant/prompt-library.md deleted file mode 100644 index 70a65784c9..0000000000 --- a/ej2-asp-core-mvc/EJ2_ASP.MVC/ai-coding-assistant/prompt-library.md +++ /dev/null @@ -1,270 +0,0 @@ ---- -layout: post -title: Syncfusion AI Coding Assistant Prompt Library | Syncfusion -description: Explore the AI Coding Assistant Prompt Library to enhance ASP.NET MVC development productivity with code generation, configuration example, contextual guidance. -control: Syncfusion AI Coding Assistant Prompt Library -platform: ej2-asp-core-mvc -documentation: ug -domainurl: ##DomainURL## ---- - -# Prompt Library - AI Coding Assistant - -Speed up your A projects using these ready-made prompts for popular Syncfusion components. Each prompt is short, easy to understand, and focused on real tasks—like quick setups, tweaks, and fixes. - -## How to Use - -Before starting, make sure your MCP Server is set up and running. - -* Choose a prompt that fits your need. -* Copy the full prompt with the #SyncfusionAspNetMvcAssistant handle. -* Customize the prompt for your specific use case. -* Execute via the MCP Server. -* Always check and test the code before adding it to your project. - -## Component-Specific Prompts - -### Grid - -The Syncfusion ASP.NET MVC Data Grid delivers fast, flexible tables for large datasets with built-in interactivity. - -{% promptcards %} -{% promptcard Paging and Sorting %} -#SyncfusionAspNetMvcAssistant How do I enable paging and sorting in the Syncfusion ASP.NET MVC Grid? -{% endpromptcard %} -{% promptcard Grouping and Filtering %} -#SyncfusionAspNetMvcAssistant Show me an example of grouping and filtering data in the Grid component. -{% endpromptcard %} -{% promptcard CRUD Operations %} -#SyncfusionAspNetMvcAssistant What’s the code to implement full CRUD operations in Syncfusion ASP.NET MVC Grid? -{% endpromptcard %} -{% promptcard Grid Export to PDF and Excel %} -#SyncfusionAspNetMvcAssistant How can I add PDF and Excel export options to the Grid toolbar? -{% endpromptcard %} -{% promptcard Virtual Scrolling %} -#SyncfusionAspNetMvcAssistant How do I configure virtual scrolling for large datasets in the Grid? -{% endpromptcard %} -{% promptcard Multicolumn Grid Setup %} -#SyncfusionAspNetMvcAssistant Create a multicolumn Grid to display product details with sorting and filtering. -{% endpromptcard %} -{% promptcard Chat Integration %} -#SyncfusionAspNetMvcAssistant How can I integrate a chat widget inside each row of the Syncfusion Grid? -{% endpromptcard %} -{% promptcard Advanced Grid Features %} -#SyncfusionAspNetMvcAssistant Show me a Grid with paging, sorting, grouping, filtering, and virtual scrolling -{% endpromptcard %} -{% promptcard Troubleshooting Grid Export %} -#SyncfusionAspNetMvcAssistant Why isn’t my Grid exporting to PDF and Excel correctly? -{% endpromptcard %} -{% promptcard Inline Editing %} -#SyncfusionAspNetMvcAssistant How do I enable inline editing for CRUD operations in the Grid? -{% endpromptcard %} -{% promptcard Custom Toolbar %} -#SyncfusionAspNetMvcAssistant Add custom toolbar buttons for PDF and Excel export in the Grid. -{% endpromptcard %} -{% promptcard Dynamic Column Configuration %} -#SyncfusionAspNetMvcAssistant How can I dynamically configure multicolumn layout with filtering and sorting? -{% endpromptcard %} -{% endpromptcards %} - -### Chart - -The Syncfusion ASP.NET MVC Chart suite offers versatile visualization tools across various series types for insightful data representation. - -{% promptcards %} -{% promptcard Local and Remote Data %} -#SyncfusionAspNetMvcAssistant How do I bind both local and remote data sources to a Syncfusion Chart? -{% endpromptcard %} -{% promptcard Range Selection %} -#SyncfusionAspNetMvcAssistant Show me how to enable range selection in a Syncfusion ASP.NET MVC Chart. -{% endpromptcard %} -{% promptcard Chart Types Overview %} -#SyncfusionAspNetMvcAssistant What chart types are available in Syncfusion ASP.NET MVC Chart and how to configure them? -{% endpromptcard %} -{% promptcard Markers and Data Labels %} -#SyncfusionAspNetMvcAssistant How can I display markers and data labels on a line chart? -{% endpromptcard %} -{% promptcard Annotations %} -#SyncfusionAspNetMvcAssistant Add custom annotations to highlight specific data points in a chart. -{% endpromptcard %} -{% promptcard Chart Export to Image or PDF %} -#SyncfusionAspNetMvcAssistant How do I export a Syncfusion Chart to PDF or image format? -{% endpromptcard %} -{% promptcard Print Support %} -#SyncfusionAspNetMvcAssistant Enable print functionality for a Syncfusion ASP.NET MVC Chart component. -{% endpromptcard %} -{% promptcard Dynamic Chart with Remote Data %} -#SyncfusionAspNetMvcAssistant Create a chart that updates dynamically with remote API data. -{% endpromptcard %} -{% promptcard Multiple Series Types %} -#SyncfusionAspNetMvcAssistant How do I combine bar and line chart types in a single Syncfusion Chart? -{% endpromptcard %} -{% promptcard Troubleshooting Chart Data Binding %} -#SyncfusionAspNetMvcAssistant Why isn’t my remote data showing up in the Syncfusion Chart? -{% endpromptcard %} -{% promptcard Interactive Range Selector %} -#SyncfusionAspNetMvcAssistant Configure a range selector for zooming and filtering in a time-series chart. -{% endpromptcard %} -{% promptcard Custom Markers and Labels %} -#SyncfusionAspNetMvcAssistant Show me an example of customizing chart markers and data label styles. -{% endpromptcard %} -{% endpromptcards %} - -### Schedule - -The Syncfusion ASP.NET MVC Schedule component helps manage events, resources, and timelines with powerful views and customization. - -{% promptcards %} -{% promptcard Remote Data Binding %} -#SyncfusionAspNetMvcAssistant Bind the Schedule component to a remote API for dynamic event loading. -{% endpromptcard %} -{% promptcard CRUD Actions %} -#SyncfusionAspNetMvcAssistant Show me how to implement full CRUD operations in the Schedule component. -{% endpromptcard %} -{% promptcard Virtual Scrolling %} -#SyncfusionAspNetMvcAssistant Enable virtual scrolling for large event datasets in the Schedule view. -{% endpromptcard %} -{% promptcard Timezone Support %} -#SyncfusionAspNetMvcAssistant How can I configure timezone support in the Syncfusion ASP.NET MVC Schedule? -{% endpromptcard %} -{% promptcard Export Schedule to PDF or Excel %} -#SyncfusionAspNetMvcAssistant Add export functionality to download the Schedule view as PDF or Excel. -{% endpromptcard %} -{% promptcard Timeline Header Rows %} -#SyncfusionAspNetMvcAssistant How do I customize timeline header rows in the Schedule component? -{% endpromptcard %} -{% promptcard Troubleshooting Schedule CRUD %} -#SyncfusionAspNetMvcAssistant Why aren’t my CRUD actions working correctly in the Schedule component? -{% endpromptcard %} -{% promptcard Local and Remote Data %} -#SyncfusionAspNetMvcAssistant Bind both local and remote event data to the Schedule component. -{% endpromptcard %} -{% promptcard Export and Timezone %} -#SyncfusionAspNetMvcAssistant Configure timezone-aware exporting for the Schedule view. -{% endpromptcard %} -{% endpromptcards %} - -### Kanban - -The Syncfusion ASP.NET MVC Kanban organizes tasks in columns with drag-and-drop, swimlanes, and templating for agile workflows. - -{% promptcards %} -{% promptcard Data Binding %} -#SyncfusionAspNetMvcAssistant How do I bind local or remote data to the Syncfusion ASP.NET MVC Kanban board? -{% endpromptcard %} -{% promptcard Sorting %} -#SyncfusionAspNetMvcAssistant Enable sorting of cards within columns in the Kanban component. -{% endpromptcard %} -{% promptcard Swimlane View %} -#SyncfusionAspNetMvcAssistant Show me how to group Kanban cards using swimlane headers. -{% endpromptcard %} -{% promptcard Kanban Card Editing %} -#SyncfusionAspNetMvcAssistant How can I enable inline editing of Kanban cards? -{% endpromptcard %} -{% promptcard Virtualization %} -#SyncfusionAspNetMvcAssistant Configure virtualization for performance with large Kanban datasets. -{% endpromptcard %} -{% promptcard Localization %} -#SyncfusionAspNetMvcAssistant How do I localize labels and messages in the Kanban component? -{% endpromptcard %} -{% promptcard Drag and Drop %} -#SyncfusionAspNetMvcAssistant Enable drag-and-drop functionality for moving cards between columns. -{% endpromptcard %} -{% promptcard Sorting and Swimlane %} -#SyncfusionAspNetMvcAssistant Create a Kanban board with swimlane grouping and sortable cards. -{% endpromptcard %} -{% promptcard Editable Cards and Localization %} -#SyncfusionAspNetMvcAssistant Show me how to edit cards and apply localization in Kanban. -{% endpromptcard %} -{% promptcard Troubleshooting Kanban Drag and Drop %} -#SyncfusionAspNetMvcAssistant Why isn’t drag-and-drop working correctly in my Kanban board? -{% endpromptcard %} -{% promptcard Remote Data and Virtualization %} -#SyncfusionAspNetMvcAssistant Bind remote data to Kanban and enable virtualization for performance. -{% endpromptcard %} -{% promptcard Advanced Kanban Setup %} -#SyncfusionAspNetMvcAssistant Create a Kanban board with data binding, swimlane, card editing, and drag-and-drop. -{% endpromptcard %} -{% endpromptcards %} - -### RichTextEditor - -The Syncfusion ASP.NET MVC RichTextEditor offers a modern WYSIWYG editor with extensive formatting, media, and integration features. - -{% promptcards %} -{% promptcard Toolbar Configuration %} -#SyncfusionAspNetMvcAssistant How do I customize the toolbar options in the Syncfusion RichTextEditor? -{% endpromptcard %} -{% promptcard Link Manipulation %} -#SyncfusionAspNetMvcAssistant Show me how to add, edit, and remove hyperlinks in RichTextEditor content. -{% endpromptcard %} -{% promptcard Iframe Mode %} -#SyncfusionAspNetMvcAssistant How can I render the RichTextEditor inside an iframe for isolated styling? -{% endpromptcard %} -{% promptcard Undo and Redo %} -#SyncfusionAspNetMvcAssistant Enable undo and redo functionality in the RichTextEditor toolbar. -{% endpromptcard %} -{% promptcard Forms Integration %} -#SyncfusionAspNetMvcAssistant How do I integrate a ASP.NET MVC form and validate input? -{% endpromptcard %} -{% promptcard Content Import and Export %} -#SyncfusionAspNetMvcAssistant Export RichTextEditor content to HTML or import existing HTML content. -{% endpromptcard %} -{% promptcard Advanced Toolbar %} -#SyncfusionAspNetMvcAssistant Create a RichTextEditor with toolbar options for formatting, links, and undo/redo. -{% endpromptcard %} -{% promptcard Iframe and Forms Support %} -#SyncfusionAspNetMvcAssistant Use RichTextEditor in iframe mode and bind it to a form for submission. -{% endpromptcard %} -{% promptcard Undo/Redo and Export %} -#SyncfusionAspNetMvcAssistant Enable undo/redo and export content to HTML in RichTextEditor. -{% endpromptcard %} -{% endpromptcards %} - -### Calendar - -The Syncfusion ASP.NET MVC Calendar supports flexible date selection, localization, and custom rendering. - -{% promptcards %} -{% promptcard Date Range Selection %} -#SyncfusionAspNetMvcAssistant How do I enable date range selection in the Syncfusion ASP.NET MVC Calendar? -{% endpromptcard %} -{% promptcard Globalization Support %} -#SyncfusionAspNetMvcAssistant Configure the Calendar to support multiple cultures and languages. -{% endpromptcard %} -{% promptcard Multi-Date Selection %} -#SyncfusionAspNetMvcAssistant Show me how to allow users to select multiple dates in the Calendar. -{% endpromptcard %} -{% promptcard Islamic Calendar Support %} -#SyncfusionAspNetMvcAssistant How can I switch the Calendar to use the Islamic calendar system? -{% endpromptcard %} -{% promptcard Skip Months Feature %} -#SyncfusionAspNetMvcAssistant Enable skipping months in the Calendar navigation for faster browsing. -{% endpromptcard %} -{% promptcard Calendar Showing Other Month Days %} -#SyncfusionAspNetMvcAssistant How do I show days from adjacent months in the current Calendar view? -{% endpromptcard %} -{% promptcard Custom Day Cell Format %} -#SyncfusionAspNetMvcAssistant Customize the day cell format in the Calendar to show short weekday names. -{% endpromptcard %} -{% promptcard Calendar Highlighting Weekends %} -#SyncfusionAspNetMvcAssistant Highlight weekends in the Calendar with a different background color. -{% endpromptcard %} -{% promptcard Globalization and Islamic Calendar %} -#SyncfusionAspNetMvcAssistant Configure the Calendar for Arabic culture using Islamic calendar and localization. -{% endpromptcard %} -{% promptcard Multi-Selection and Range %} -#SyncfusionAspNetMvcAssistant Enable both multi-date selection and range selection in the Calendar. -{% endpromptcard %} -{% promptcard Troubleshooting Calendar Date Range %} -#SyncfusionAspNetMvcAssistant Why isn’t my Calendar selecting the correct date range? -{% endpromptcard %} -{% promptcard Advanced Calendar Setup %} -#SyncfusionAspNetMvcAssistant Create a Calendar with date range, multi-selection, globalization, and weekend highlights. -{% endpromptcard %} -{% endpromptcards %} - -## See also - -* [AI Coding Assistant Overview](https://ej2.syncfusion.com/aspnetmvc/documentation/ai-coding-assistant/overview) -* [SyncfusionAspNetMvcAssistant MCP Server](https://ej2.syncfusion.com/aspnetmvc/documentation/ai-coding-assistant/mcp-server) diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/ai-coding-assistant/prompt-library.md b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/ai-coding-assistant/prompt-library.md deleted file mode 100644 index efea4fbb57..0000000000 --- a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/ai-coding-assistant/prompt-library.md +++ /dev/null @@ -1,270 +0,0 @@ ---- -layout: post -title: Syncfusion AI Coding Assistant Prompt Library | Syncfusion -description: Explore the AI Coding Assistant Prompt Library to enhance ASP.NET Core development productivity with code generation, configuration example, contextual guidance -control: Syncfusion AI Coding Assistant Prompt Library -platform: ej2-asp-core-mvc -documentation: ug -domainurl: ##DomainURL## ---- - -# Prompt Library - AI Coding Assistant - -Speed up your A projects using these ready-made prompts for popular Syncfusion components. Each prompt is short, easy to understand, and focused on real tasks—like quick setups, tweaks, and fixes. - -## How to Use - -Before starting, make sure your MCP Server is set up and running. - -* Choose a prompt that fits your need. -* Copy the full prompt with the #SyncfusionAspNetCoreAssistant handle. -* Customize the prompt for your specific use case. -* Execute via the MCP Server. -* Always check and test the code before adding it to your project. - -## Component-Specific Prompts - -### Grid - -The Syncfusion ASP.NET Core Data Grid delivers fast, flexible tables for large datasets with built-in interactivity. - -{% promptcards %} -{% promptcard Paging and Sorting %} -#SyncfusionAspNetCoreAssistant How do I enable paging and sorting in the Syncfusion ASP.NET Core Grid? -{% endpromptcard %} -{% promptcard Grouping and Filtering %} -#SyncfusionAspNetCoreAssistant Show me an example of grouping and filtering data in the Grid component. -{% endpromptcard %} -{% promptcard CRUD Operations %} -#SyncfusionAspNetCoreAssistant What’s the code to implement full CRUD operations in Syncfusion ASP.NET Core Grid? -{% endpromptcard %} -{% promptcard Grid Export to PDF and Excel %} -#SyncfusionAspNetCoreAssistant How can I add PDF and Excel export options to the Grid toolbar? -{% endpromptcard %} -{% promptcard Virtual Scrolling %} -#SyncfusionAspNetCoreAssistant How do I configure virtual scrolling for large datasets in the Grid? -{% endpromptcard %} -{% promptcard Multicolumn Grid Setup %} -#SyncfusionAspNetCoreAssistant Create a multicolumn Grid to display product details with sorting and filtering. -{% endpromptcard %} -{% promptcard Chat Integration %} -#SyncfusionAspNetCoreAssistant How can I integrate a chat widget inside each row of the Syncfusion Grid? -{% endpromptcard %} -{% promptcard Advanced Grid Features %} -#SyncfusionAspNetCoreAssistant Show me a Grid with paging, sorting, grouping, filtering, and virtual scrolling -{% endpromptcard %} -{% promptcard Troubleshooting Grid Export %} -#SyncfusionAspNetCoreAssistant Why isn’t my Grid exporting to PDF and Excel correctly? -{% endpromptcard %} -{% promptcard Inline Editing %} -#SyncfusionAspNetCoreAssistant How do I enable inline editing for CRUD operations in the Grid? -{% endpromptcard %} -{% promptcard Custom Toolbar %} -#SyncfusionAspNetCoreAssistant Add custom toolbar buttons for PDF and Excel export in the Grid. -{% endpromptcard %} -{% promptcard Dynamic Column Configuration %} -#SyncfusionAspNetCoreAssistant How can I dynamically configure multicolumn layout with filtering and sorting? -{% endpromptcard %} -{% endpromptcards %} - -### Chart - -The Syncfusion ASP.NET Core Chart suite offers versatile visualization tools across various series types for insightful data representation. - -{% promptcards %} -{% promptcard Local and Remote Data %} -#SyncfusionAspNetCoreAssistant How do I bind both local and remote data sources to a Syncfusion Chart? -{% endpromptcard %} -{% promptcard Range Selection %} -#SyncfusionAspNetCoreAssistant Show me how to enable range selection in a Syncfusion ASP.NET Core Chart. -{% endpromptcard %} -{% promptcard Chart Types Overview %} -#SyncfusionAspNetCoreAssistant What chart types are available in Syncfusion ASP.NET Core Chart and how to configure them? -{% endpromptcard %} -{% promptcard Markers and Data Labels %} -#SyncfusionAspNetCoreAssistant How can I display markers and data labels on a line chart? -{% endpromptcard %} -{% promptcard Annotations %} -#SyncfusionAspNetCoreAssistant Add custom annotations to highlight specific data points in a chart. -{% endpromptcard %} -{% promptcard Chart Export to Image or PDF %} -#SyncfusionAspNetCoreAssistant How do I export a Syncfusion Chart to PDF or image format? -{% endpromptcard %} -{% promptcard Print Support %} -#SyncfusionAspNetCoreAssistant Enable print functionality for a Syncfusion ASP.NET Core Chart component. -{% endpromptcard %} -{% promptcard Dynamic Chart with Remote Data %} -#SyncfusionAspNetCoreAssistant Create a chart that updates dynamically with remote API data. -{% endpromptcard %} -{% promptcard Multiple Series Types %} -#SyncfusionAspNetCoreAssistant How do I combine bar and line chart types in a single Syncfusion Chart? -{% endpromptcard %} -{% promptcard Troubleshooting Chart Data Binding %} -#SyncfusionAspNetCoreAssistant Why isn’t my remote data showing up in the Syncfusion Chart? -{% endpromptcard %} -{% promptcard Interactive Range Selector %} -#SyncfusionAspNetCoreAssistant Configure a range selector for zooming and filtering in a time-series chart. -{% endpromptcard %} -{% promptcard Custom Markers and Labels %} -#SyncfusionAspNetCoreAssistant Show me an example of customizing chart markers and data label styles. -{% endpromptcard %} -{% endpromptcards %} - -### Schedule - -The Syncfusion ASP.NET Core Schedule component helps manage events, resources, and timelines with powerful views and customization. - -{% promptcards %} -{% promptcard Remote Data Binding %} -#SyncfusionAspNetCoreAssistant Bind the Schedule component to a remote API for dynamic event loading. -{% endpromptcard %} -{% promptcard CRUD Actions %} -#SyncfusionAspNetCoreAssistant Show me how to implement full CRUD operations in the Schedule component. -{% endpromptcard %} -{% promptcard Virtual Scrolling %} -#SyncfusionAspNetCoreAssistant Enable virtual scrolling for large event datasets in the Schedule view. -{% endpromptcard %} -{% promptcard Timezone Support %} -#SyncfusionAspNetCoreAssistant How can I configure timezone support in the Syncfusion ASP.NET Core Schedule? -{% endpromptcard %} -{% promptcard Export Schedule to PDF or Excel %} -#SyncfusionAspNetCoreAssistant Add export functionality to download the Schedule view as PDF or Excel. -{% endpromptcard %} -{% promptcard Timeline Header Rows %} -#SyncfusionAspNetCoreAssistant How do I customize timeline header rows in the Schedule component? -{% endpromptcard %} -{% promptcard Troubleshooting Schedule CRUD %} -#SyncfusionAspNetCoreAssistant Why aren’t my CRUD actions working correctly in the Schedule component? -{% endpromptcard %} -{% promptcard Local and Remote Data %} -#SyncfusionAspNetCoreAssistant Bind both local and remote event data to the Schedule component. -{% endpromptcard %} -{% promptcard Export and Timezone %} -#SyncfusionAspNetCoreAssistant Configure timezone-aware exporting for the Schedule view. -{% endpromptcard %} -{% endpromptcards %} - -### Kanban - -The Syncfusion ASP.NET Core Kanban organizes tasks in columns with drag-and-drop, swimlanes, and templating for agile workflows. - -{% promptcards %} -{% promptcard Data Binding %} -#SyncfusionAspNetCoreAssistant How do I bind local or remote data to the Syncfusion ASP.NET Core Kanban board? -{% endpromptcard %} -{% promptcard Sorting %} -#SyncfusionAspNetCoreAssistant Enable sorting of cards within columns in the Kanban component. -{% endpromptcard %} -{% promptcard Swimlane View %} -#SyncfusionAspNetCoreAssistant Show me how to group Kanban cards using swimlane headers. -{% endpromptcard %} -{% promptcard Kanban Card Editing %} -#SyncfusionAspNetCoreAssistant How can I enable inline editing of Kanban cards? -{% endpromptcard %} -{% promptcard Virtualization %} -#SyncfusionAspNetCoreAssistant Configure virtualization for performance with large Kanban datasets. -{% endpromptcard %} -{% promptcard Localization %} -#SyncfusionAspNetCoreAssistant How do I localize labels and messages in the Kanban component? -{% endpromptcard %} -{% promptcard Drag and Drop %} -#SyncfusionAspNetCoreAssistant Enable drag-and-drop functionality for moving cards between columns. -{% endpromptcard %} -{% promptcard Sorting and Swimlane %} -#SyncfusionAspNetCoreAssistant Create a Kanban board with swimlane grouping and sortable cards. -{% endpromptcard %} -{% promptcard Editable Cards and Localization %} -#SyncfusionAspNetCoreAssistant Show me how to edit cards and apply localization in Kanban. -{% endpromptcard %} -{% promptcard Troubleshooting Kanban Drag and Drop %} -#SyncfusionAspNetCoreAssistant Why isn’t drag-and-drop working correctly in my Kanban board? -{% endpromptcard %} -{% promptcard Remote Data and Virtualization %} -#SyncfusionAspNetCoreAssistant Bind remote data to Kanban and enable virtualization for performance. -{% endpromptcard %} -{% promptcard Advanced Kanban Setup %} -#SyncfusionAspNetCoreAssistant Create a Kanban board with data binding, swimlane, card editing, and drag-and-drop. -{% endpromptcard %} -{% endpromptcards %} - -### RichTextEditor - -The Syncfusion ASP.NET Core RichTextEditor offers a modern WYSIWYG editor with extensive formatting, media, and integration features. - -{% promptcards %} -{% promptcard Toolbar Configuration %} -#SyncfusionAspNetCoreAssistant How do I customize the toolbar options in the Syncfusion RichTextEditor? -{% endpromptcard %} -{% promptcard Link Manipulation %} -#SyncfusionAspNetCoreAssistant Show me how to add, edit, and remove hyperlinks in RichTextEditor content. -{% endpromptcard %} -{% promptcard Iframe Mode %} -#SyncfusionAspNetCoreAssistant How can I render the RichTextEditor inside an iframe for isolated styling? -{% endpromptcard %} -{% promptcard Undo and Redo %} -#SyncfusionAspNetCoreAssistant Enable undo and redo functionality in the RichTextEditor toolbar. -{% endpromptcard %} -{% promptcard Forms Integration %} -#SyncfusionAspNetCoreAssistant How do I integrate a ASP.NET Core form and validate input? -{% endpromptcard %} -{% promptcard Content Import and Export %} -#SyncfusionAspNetCoreAssistant Export RichTextEditor content to HTML or import existing HTML content. -{% endpromptcard %} -{% promptcard Advanced Toolbar %} -#SyncfusionAspNetCoreAssistant Create a RichTextEditor with toolbar options for formatting, links, and undo/redo. -{% endpromptcard %} -{% promptcard Iframe and Forms Support %} -#SyncfusionAspNetCoreAssistant Use RichTextEditor in iframe mode and bind it to a form for submission. -{% endpromptcard %} -{% promptcard Undo/Redo and Export %} -#SyncfusionAspNetCoreAssistant Enable undo/redo and export content to HTML in RichTextEditor. -{% endpromptcard %} -{% endpromptcards %} - -### Calendar - -The Syncfusion ASP.NET Core Calendar supports flexible date selection, localization, and custom rendering. - -{% promptcards %} -{% promptcard Date Range Selection %} -#SyncfusionAspNetCoreAssistant How do I enable date range selection in the Syncfusion ASP.NET Core Calendar? -{% endpromptcard %} -{% promptcard Globalization Support %} -#SyncfusionAspNetCoreAssistant Configure the Calendar to support multiple cultures and languages. -{% endpromptcard %} -{% promptcard Multi-Date Selection %} -#SyncfusionAspNetCoreAssistant Show me how to allow users to select multiple dates in the Calendar. -{% endpromptcard %} -{% promptcard Islamic Calendar Support %} -#SyncfusionAspNetCoreAssistant How can I switch the Calendar to use the Islamic calendar system? -{% endpromptcard %} -{% promptcard Skip Months Feature %} -#SyncfusionAspNetCoreAssistant Enable skipping months in the Calendar navigation for faster browsing. -{% endpromptcard %} -{% promptcard Calendar Showing Other Month Days %} -#SyncfusionAspNetCoreAssistant How do I show days from adjacent months in the current Calendar view? -{% endpromptcard %} -{% promptcard Custom Day Cell Format %} -#SyncfusionAspNetCoreAssistant Customize the day cell format in the Calendar to show short weekday names. -{% endpromptcard %} -{% promptcard Calendar Highlighting Weekends %} -#SyncfusionAspNetCoreAssistant Highlight weekends in the Calendar with a different background color. -{% endpromptcard %} -{% promptcard Globalization and Islamic Calendar %} -#SyncfusionAspNetCoreAssistant Configure the Calendar for Arabic culture using Islamic calendar and localization. -{% endpromptcard %} -{% promptcard Multi-Selection and Range %} -#SyncfusionAspNetCoreAssistant Enable both multi-date selection and range selection in the Calendar. -{% endpromptcard %} -{% promptcard Troubleshooting Calendar Date Range %} -#SyncfusionAspNetCoreAssistant Why isn’t my Calendar selecting the correct date range? -{% endpromptcard %} -{% promptcard Advanced Calendar Setup %} -#SyncfusionAspNetCoreAssistant Create a Calendar with date range, multi-selection, globalization, and weekend highlights. -{% endpromptcard %} -{% endpromptcards %} - -## See also - -* [AI Coding Assistant Overview](https://ej2.syncfusion.com/aspnetcore/documentation/ai-coding-assistant/overview) -* [SyncfusionAspNetCoreAssistant MCP Server](https://ej2.syncfusion.com/aspnetcore/documentation/ai-coding-assistant/mcp-server) diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/appearance.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/appearance.md similarity index 85% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/appearance.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/appearance.md index 763fe05678..a7fa0fe9a9 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/appearance.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/appearance.md @@ -1,14 +1,14 @@ --- layout: post -title: Appearance in ##Platform_Name## Block Editor Control | Syncfusion -description: Checkout and learn about appearance with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +title: Appearance in ASP.NET MVC Block Editor Control | Syncfusion +description: Checkout and learn about appearance with Syncfusion Essential ASP.NET MVC BlockEditor control, its elements, and more details. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- -# Appearance in ##Platform_Name## Block Editor control +# Appearance in ASP.NET MVC Block Editor control The Block Editor control provides various appearance customization options to match your application's design requirements. These properties allow you to control the visual styling, layout, and overall look and feel of the editor. @@ -55,11 +55,11 @@ You can use the [CssClass](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusi {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/appearance/razor %} +{% include code-snippet/block-editor/appearance/razor %} {% endhighlight %} {% highlight c# tabtitle="Appearance.cs" %} -{% include code-snippet/blockeditor/appearance/appearance.cs %} +{% include code-snippet/block-editor/appearance/appearance.cs %} {% endhighlight %} {% endtabs %} -![Appearance](images/appearance.png) +![Appearance](./../images/appearance.png) diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/built-in-blocks.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/built-in-blocks.md similarity index 64% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/built-in-blocks.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/built-in-blocks.md index 25cd9f1b3e..6fc95a1e9e 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/built-in-blocks.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/built-in-blocks.md @@ -1,7 +1,7 @@ --- layout: post -title: Blocks in ##Platform_Name## Block Editor control | Syncfusion -description: Checkout and learn about Blocks with ##Platform_Name## Block Editor control of Syncfusion Essential JS 2 and more. +title: Blocks in ASP.NET MVC Block Editor control | Syncfusion +description: Checkout and learn about Blocks with ASP.NET MVC Block Editor control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## @@ -9,15 +9,15 @@ documentation: ug domainurl: ##DomainURL## --- -# Blocks in ##Platform_Name## Block Editor control +# Blocks in ASP.NET MVC Block Editor control -The Block Editor control enables you to create block-based content editing solution using various types of blocks. The [Blocks](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Blocks.html) property allows you to define and manage the content structure of your editor. +The Block Editor control enables you to create block-based content editing solution using various types of blocks. The [Blocks](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_Blocks) property allows you to define and manage the content structure of your editor. ## Blocks Blocks are the fundamental building elements of the Block Editor. Each block represents a distinct content unit such as a `Paragraph`, `Heading`, `List`, or specialized content like `Code Snippets` or `Images`. The Block Editor organizes content as a collection of `blocks`, allowing for better structure and formatting options. -You can configure blocks with various properties such as `id`, `blockType`, `content` and more to create rich and structured editor. +You can configure blocks with various properties such as `id`, [blockType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html), `content` and more to create rich and structured editor. ## Block types @@ -46,43 +46,43 @@ By default, the `indent` property is set to `0`. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/blocks/indent/razor %} +{% include code-snippet/block-editor/blocks/indent/razor %} {% endhighlight %} {% highlight c# tabtitle="Indent.cs" %} -{% include code-snippet/blockeditor/blocks/indent/indent.cs %} +{% include code-snippet/block-editor/blocks/indent/indent.cs %} {% endhighlight %} {% endtabs %} -![Block Indent](images/block-indent.png) +![Block Indent](./../../images/block-indent.png) ## Configure CSS Class -You can apply custom styling to individual blocks using the `cssClass` property. This property accepts a string containing one or more CSS class names. +You can apply custom styling to individual blocks using the [cssClass](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_CssClass) property. This property accepts a string containing one or more CSS class names. Custom CSS classes allow you to define specialized styling for specific blocks in your editor. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/blocks/cssClass/razor %} +{% include code-snippet/block-editor/blocks/cssClass/razor %} {% endhighlight %} {% highlight c# tabtitle="CssClass.cs" %} -{% include code-snippet/blockeditor/blocks/cssClass/cssclass.cs %} +{% include code-snippet/block-editor/blocks/cssClass/cssclass.cs %} {% endhighlight %} {% endtabs %} -![Block cssClass](images/block-cssClass.png) +![Block cssClass](./../../images/block-cssClass.png) ## Configure templates -The Block Editor allows you to use custom templates for specialized content using the `template` property. Templates can be defined as strings, functions, or HTML elements. +The Block Editor allows you to use custom templates for specialized content using the [template](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Template) property. Templates can be defined as strings, functions, or HTML elements. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/blocks/blockTypes/paragraph-block/razor %} +{% include code-snippet/block-editor/blocks/blockTypes/paragraph-block/razor %} {% endhighlight %} {% highlight c# tabtitle="Template.cs" %} -{% include code-snippet/blockeditor/blocks/blockTypes/template-block/template.cs %} +{% include code-snippet/block-editor/blocks/blockTypes/template-block/template.cs %} {% endhighlight %} {% endtabs %} -![Template Block](images/block-template.png) \ No newline at end of file +![Template Block](./../../images/block-template.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/code-block.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/code-block.md new file mode 100644 index 0000000000..f000c3124e --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/code-block.md @@ -0,0 +1,52 @@ +--- +layout: post +title: Code Block in ASP.NET MVC Block Editor control | Syncfusion +description: Checkout and learn about Code Block with ASP.NET MVC Block Editor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: BlockEditor +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# Code Blocks in ASP.NET MVC Block Editor control + +You can render Code blocks by setting the [blockType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [Code](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Code). By setting the `properties` property, you can configure the default language. The default language is `plainText`. + +## Global Code Settings + +You can configure global settings for code blocks using the [CodeBlockSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_CodeBlockSettings) property in the Block Editor root configuration. This ensures consistent behavior for syntax highlighting and language options across all code blocks. + +The [CodeBlockSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_CodeBlockSettings) property supports the following options: + +| Property | Description | Default Value | +|----------|-------------|---------------| +| `languages` | Specifies the array of language options for syntax highlighting. | [] | +| `defaultLanguage`| Defines the default language to use for syntax highlighting. | 'plaintext' | + +Each language object in the `languages` array should have: +- `language`: The language value used for syntax highlighting +- `label`: The display name shown in the language selector + +## Configure code properties + +For Individual Code blocks, you can configure default language using the `properties` property in the block model. + +The property supports the following options: + +| Property | Description | Default Value | +|----------|-------------|---------------| +| language | The default language to use for syntax highlighting | '' | + +Below example illustrates how to render the different code block in the Block Editor. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/blockTypes/paragraph-block/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Code.cs" %} +{% include code-snippet/block-editor/blocks/blockTypes/code-block/code.cs %} +{% endhighlight %} +{% endtabs %} + +![Code Block](./../../images/block-code.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/embed.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/embed.md new file mode 100644 index 0000000000..5b14447161 --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/embed.md @@ -0,0 +1,82 @@ +--- +layout: post +title: Embed Blocks in ASP.NET MVC Block Editor control | Syncfusion +description: Checkout and learn about Embed Blocks with ASP.NET MVC Block Editor control of Syncfusion Essential JS 2 and more. +platform: ej2-javascript +control: BlockEditor +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# Embed Blocks in ASP.NET MVC Block Editor control + +Block Editor supports addition of embeds to help you organize, showcase contents and format your content effectively. + +## Image Block + +You can use the [Image](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Image) block to showcase an image content within your editor. + +### Configure Image Block + +You can render an [Image](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Image) block by setting the [blockType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property to [Image](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Image) in the block model. The `properties` property allows you to configure the image source, allowed file types, display dimensions, and more. + +#### Global Image Settings + +You can configure global settings for image blocks using the [ImageBlockSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_ImageBlockSettings) property in the Block Editor root configuration. This ensures consistent behavior for image uploads, resizing, and display. + +The [ImageBlockSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_ImageBlockSettings) property supports the following options: + +| Property | Description | Default Value | +|----------|-------------|---------------| +| saveFormat | Specifies the format to save the image. | `Base64` | +| allowedTypes | Specifies allowed image file types for upload. | `['.jpg', '.jpeg', '.png']` | +| width | Specifies the default display width of the image. | `auto` | +| height | Specifies the default display height of the image. | `auto` | +| enableResize | Enables or disables image resizing. | `true` | +| minWidth | Minimum width allowed for resizing. | `''` | +| maxWidth | Maximum width allowed for resizing. | `''` | +| minHeight | Minimum height allowed for resizing. | `''` | +| maxHeight | Maximum height allowed for resizing. | `''` | + +#### Configure Image Block Properties + +The [Image](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Image) block `properties` property in the block model supports the following options: + +| Property | Description | Default Value | +|----------|-------------|---------------| +| src | Specifies the image path. | `''` | +| width | Specifies the display width of the image. | `''` | +| height | Specifies the display height of the image. | `''` | +| altText | Specifies the alternative text to display when the image cannot be loaded. | `''` | + +### BlockType & Properties + +The following example demonstrates how to pre-configure an [Image](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Image) block in the editor. + +```typescript +// Adding image block + { + blockType = "Image", + properties = new + { + src = "https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png", + width = '200px', + height = '100px', + altText = '', + } +} +``` + +The below sample demonstrates the configuration of image block in the Block Editor. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/blockTypes/image-block/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Image.cs" %} +{% include code-snippet/block-editor/blocks/blockTypes/image-block/image.cs %} +{% endhighlight %} +{% endtabs %} + +![Image Block](./../../images/block-image.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/inline-content.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/inline-content.md similarity index 77% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/inline-content.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/inline-content.md index c9395e2ee5..ce36d88ed0 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/inline-content.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/inline-content.md @@ -1,7 +1,7 @@ --- layout: post -title: Inline Content in ##Platform_Name## Block Editor control | Syncfusion -description: Checkout and learn about Inline Content with ##Platform_Name## Block Editor control of Syncfusion Essential JS 2 and more. +title: Inline Content in ASP.NET MVC Block Editor control | Syncfusion +description: Checkout and learn about Inline Content with ASP.NET MVC Block Editor control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## @@ -9,7 +9,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Inline Content in ##Platform_Name## Block Editor control +# Inline Content in ASP.NET MVC Block Editor control Content in the Block Editor is managed through the `content` property of blocks. @@ -28,6 +28,19 @@ You can specify the type of content using the `contentType` property. The Block > By default, the content type is set to `Text`. +### ContentType + +```typescript +// Adding inline text +{ + blockType = "Paragraph", + content = new List() + { + new { contentType = 'Text', content = "Inline Text" } + } +} +``` + ## Configure text content You can configure Text content by setting the `contentType` property to `Text`. The default content type is `Text`. @@ -46,6 +59,25 @@ Link settings accepts the following options: | ------------------------- | ----------------------------------------------------------------- | ------------- | |`url`| Specifies the destination URL of the link. | `''` | +### ContentType & Properties + +```typescript +{ + blockType = "Paragraph", + content = new List() + { + new + { + contentType = 'Link', + content = 'hyperlinks', + properties = { + url = 'https://ej2.syncfusion.com/documentation', + } + } + } +} +``` + ## Configure Label You can render labels by setting the `contentType` property as `Label`. Additionally, by configuring the `properties` property, you can customize how labels behave in your editor. This setup allows you to define the trigger character and specify the available label items. @@ -61,6 +93,19 @@ The Block Editor comes with offers different built-in options. These include: You can customize the labels by using the `properties` property with type `Label`. +### ContentType & Properties + +```typescript +// Adding inline label +{ + blockType = "Paragraph", + content = new List() + { + new {contentType = 'Label', properties = { lableId = "progress" }} + } +} +``` + ### Trigger Character configuration You can use the `triggerChar` property to specify the character that will trigger the label suggestions popup while typing. The default trigger character is `$`. @@ -87,14 +132,14 @@ The below sample demonstrates the customization of labels in the Block Editor. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/blocks/label-settings/razor %} +{% include code-snippet/block-editor/blocks/label-settings/razor %} {% endhighlight %} {% highlight c# tabtitle="Label.cs" %} -{% include code-snippet/blockeditor/blocks/label-settings/label.cs %} +{% include code-snippet/block-editor/blocks/label-settings/label.cs %} {% endhighlight %} {% endtabs %} -![Block label-settings](images/block-label.png) +![Block label-settings](./../../images/block-label.png) ## Configure mention @@ -102,6 +147,21 @@ Mentions are references to users or entities that can be inserted into your cont Mentions are typically triggered by the `@` character and are linked to the `Users` collection defined in the Block Editor. +### ContentType + +```typescript +// Adding inline code +{ + blockType = "Paragraph", + content = new List() + { + new { + contentType = "Mention", properties = new { userId = "user1" } + } + } +} +``` + ## Applying inline styles The Block Editor allows you to apply rich formatting to block contents using the `styles` property. diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/list-types.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/list-types.md new file mode 100644 index 0000000000..0739fff258 --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/list-types.md @@ -0,0 +1,145 @@ +--- +layout: post +title: Lists in ASP.NET MVC Block Editor control | Syncfusion +description: Checkout and learn about List Blocks with ASP.NET MVC Block Editor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: BlockEditor +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# Lists in ASP.NET MVC Block Editor control + +List blocks in the BlockEditor component are used to organize content into structured lists. You can render List blocks by setting the [blockType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [BulletList](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_BulletList), [NumberedList](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_NumberedList), or [Checklist](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Checklist). Bullet lists and numbered lists are ideal for unordered and ordered items, respectively, while checklist blocks enable interactive to-do lists with checkable items. + +## Configure bullet list + +You can render Bullet List block by setting the [blockType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [BulletList](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_BulletList). This block type is used for unordered lists. + +### BlockType + +```typescript +// Adding bulletlist block +{ + blockType = 'BulletList', + content = new List() + { + new + { + contentType = "Text" + content = 'your content' + } + } +} +``` + +### Configure placeholder + +You can configure placeholder text for block using the `placeholder` in the `properties` property. This text appears when the block is empty. The default placeholder for bullet list is `Add item`. + +```typescript +// Adding placeholder value +{ + blockType = 'BulletList', + properties = new { placeholder = "Add item" } +} +``` + +## Configure numbered list + +You can render Numbered List block by setting the [blockType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [NumberedList](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_NumberedList),. This block type is used for ordered lists. + +### BlockType + +```typescript +// Adding bulletlist block +{ + blockType = 'NumberedList', + content = new List() + { + new + { + contentType = "Text" + content = 'your content' + } + } +} +``` + +### Configure placeholder + +You can configure placeholder text for block using the `placeholder` in the `properties` property. This text appears when the block is empty. The default placeholder for numbered list is `Add item`. + +```typescript +// Adding placeholder value +{ + blockType = 'NumberedList', + properties = new { placeholder = "Add item" } +} +``` + +## Configure checklist + +You can render Checklist block by setting the [blockType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [Checklist](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Checklist). This block type is used for creating interactive to-do lists. + +### BlockType + +```typescript +// Adding bulletlist block +{ + blockType = 'CheckList', + content = new List() + { + new + { + contentType = "Text" + content = 'your content' + } + } +} +``` + +### Configure checked state + +For blocks that support selection states such as [Checklist](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Checklist), you can configure the checked state using the `properties` property with `isChecked`. + +By default, the `isChecked` property is set to `false`. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/isChecked/razor %} +{% endhighlight %} +{% highlight c# tabtitle="IsChecked.cs" %} +{% include code-snippet/block-editor/blocks/isChecked/ischecked.cs %} +{% endhighlight %} +{% endtabs %} + +![Block isChecked](./../../images/block-ischecked.png) + +### Configure placeholder + +You can configure placeholder text for block using the `placeholder` in the `properties` property. This text appears when the block is empty. The default placeholder for check list is `Todo`. + +```typescript +// Adding placeholder value +{ + blockType = 'Checklist', + properties = new { placeholder = "Todo" } +} +``` + +## Configure list blocks + +Below example illustrates how to render the different types of list blocks in the Block Editor. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/blockTypes/list-block/razor %} +{% endhighlight %} +{% highlight c# tabtitle="List.cs" %} +{% include code-snippet/block-editor/blocks/blockTypes/list-block/list.cs %} +{% endhighlight %} +{% endtabs %} + +![List Block](./../../images/block-list.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/table-block.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/table-block.md new file mode 100644 index 0000000000..0c17c5c64f --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/table-block.md @@ -0,0 +1,40 @@ +--- +layout: post +title: Table Block in ASP.NET MVC Block Editor control | Syncfusion +description: Checkout and learn about Table Blocks with ASP.NET MVC Block Editor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: BlockEditor +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# Table Blocks in ASP.NET MVC Block Editor control + +The Block Editor control allows you to render structured data in rows and columns by setting the block's [blockType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property to [Table](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Table). You can customize the table layout, header, row numbers, and define columns and rows using the `properties` property. + +### Configure Table Block + +For Table blocks, you can configure layout and structure using the `properties` property. This property supports the following options: + +| Property | Description | Default Value | +|----------|-------------|---------------| +| width | Specifies the display width of the table. | `100%` | +| enableHeader | Specifies whether to enable header for the table. | `true` | +| enableRowNumbers | Specifies whether to enable row numbers for the table. | `true` | +| readOnly | Specifies whether to render the table in read-only mode, disabling edits. | `false` | +| columns | Defines the columns of the table, including their types and headers. | `[]` | +| rows | Defines the rows of the table, each containing cells tied to columns. | `[]` | + +This sample demonstrates the configuration of the [Table](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Table) block in the Block Editor. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/blockTypes/table-block/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Table.cs" %} +{% include code-snippet/block-editor/blocks/blockTypes/table-block/table.cs %} +{% endhighlight %} +{% endtabs %} + +![Table Block](./../../images/block-table.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/typography.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/typography.md new file mode 100644 index 0000000000..ce7a2e50bd --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/typography.md @@ -0,0 +1,357 @@ +--- +layout: post +title: Typography Blocks in ASP.NET MVC Block Editor control | Syncfusion +description: Checkout and learn about Typography Blocks with ASP.NET MVC Block Editor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: BlockEditor +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# Typography Blocks in ASP.NET MVC Block Editor control + +Typography blocks are essential for organizing and presenting text-based content in your documents. The BlockEditor component supports various structural blocks—such as Paragraph, Heading, Collapsible Block, Divider, Quote, and Callout to help you format and structure content effectively. + +## Configure paragraph block + +You can render Paragraph blocks by setting the [blockType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [Paragraph](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Paragraph). Paragraph blocks are the most common type, used for regular text content. They provide standard text formatting options and serve as the default block type. + +### BlockType + +```typescript +// Adding paragraph block +{ + blockType = 'Paragraph', + content = new List + { + new + { + contentType = 'Text', + content = 'This is a paragraph block example.' + } + } +} +``` + +The below sample demonstrates the configuration of paragraph block in the Block Editor. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/blockTypes/paragraph-block/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Paragraph.cs" %} +{% include code-snippet/block-editor/blocks/blockTypes/paragraph-block/paragraph.cs %} +{% endhighlight %} +{% endtabs %} + +![Paragraph Block](./../../images/block-paragraph.png) + +### Configure placeholder + +You can configure placeholder text for block using the `placeholder` in the `properties` property. This text appears when the block is empty. The default placeholder for the paragraph block is `Write something or ‘/’ for commands.`. + +### BlockType & Properties + +```typescript +// Adding placeholder + { + blockType = 'Paragraph', + properties = new { placeholder = "Start typing ..." } +} +``` + +The below sample demonstrates the configuration of placeholder in the Block Editor for the paragraph block. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/placeholder/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Placeholder.cs" %} +{% include code-snippet/block-editor/blocks/placeholder/placeholder.cs %} +{% endhighlight %} +{% endtabs %} + +![Block placeholder](./../../images/block-placeholder.png) + +## Configure heading block + +You can render Heading blocks by setting the [blockType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [Heading](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Heading). Heading blocks are used to create document titles and section headers of varying importance. These blocks help structure your content hierarchically, making it easier to read and navigate. + +### Configure levels + +You can configure the heading blocks using the property `level` in the `properties` property. +The heading level representing a title `level: 1`, heading `level: 2`, subheading `level: 3` and a subsection by `level: 4`. + +### BlockType & Properties + +```typescript +// Adding heading block +{ + blockType = "Heading", + content = new List + { + new { contentType = "Text", content = "Heading" } + }, + // levels range from 1 to 4 + properties = new { level = 4 } +} +``` + +The below sample demonstrates the configuration of heading block in the Block Editor. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/blockTypes/paragraph-block/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Heading.cs" %} +{% include code-snippet/block-editor/blocks/blockTypes/heading-block/heading.cs %} +{% endhighlight %} +{% endtabs %} + +![Heading Block](./../../images/block-heading.png) + +### Configure placeholder + +You can configure placeholder text for block using the `placeholder` in the `properties` property. This text appears when the block is empty. The default placeholder for heading block is `Heading{level}`. + +### BlockType & Properties + +```typescript +// Adding placeholder + { + blockType = 'Paragraph', + properties = new {level = 4 , placeholder = "Heading block" } +} +``` + +## Configure collapsible blocks + +You can render Collapsible blocks by setting the [blockType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [CollapsibleParagraph](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_CollapsibleParagraph) or [CollapsibleHeading](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_CollapsibleHeading). Collapsible blocks allow users to expand or collapse sections, providing a way to hide or show content as needed. + +### Configure levels + +You can configure the CollapsibleHeading using the property `level` inside the `properties` property . The levels can be varied from `level: 1` to `level: 4`. + +### Configure children + +The Block Editor supports hierarchical content structures through the `children` property. This property can be achieved through `properties` property that allows you to create nested blocks, which is applicable only for Callout and Collapsible blocks. + +Child blocks can be configured with all the same properties as top-level blocks. + +### Configure parent id + +To establish a clear parent-child relationship, the `parentId` in the `properties` of each child block must match the `id` of its parent block. + +This structure is essential for maintaining nested relationships within the editor. + +### Configure expanded state + +You can control whether a block is expanded or collapsed using the `isExpanded` in the `properties` property. By default, this property is set to `false`, meaning the block will be collapsed initially. This setting is only applicable to Collapsible blocks. + +### BlockType & Properties + +```typescript + // Configuring CollapsibleHeading block + new BlockModel + { + blockType = "CollapsibleHeading", + properties = new + { + level=1, + isExpanded = true, + children = new List(){ + // your actions + } + } + }, + // Configuring CollapsibleParagraph block + new BlockModel + { + blockType = "CollapsibleParagraph", + properties = new + { + isExpanded = false, + children = new List() + { + // your actions + } + } + } +``` + +The below sample demonstrates the configuration of [CollapsibleParagraph](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_CollapsibleParagraph) and [CollapsibleHeading](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_CollapsibleHeading) blocks in the Block Editor. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/blockTypes/paragraph-block/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Toggle.cs" %} +{% include code-snippet/block-editor/blocks/blockTypes/toggle-block/toggle.cs %} +{% endhighlight %} +{% endtabs %} + +![Toggle Block](./../../images/block-toggle.png) + +### Configure placeholder + +You can configure placeholder text for block using the `placeholder` in the `properties` property. This text appears when the block is empty. The default placeholder for collapsible heading and collapsible paragraph is `Collapsible Heading{level}` and `Collapsible Paragraph` respectively. + +```typescript + // Configuring CollapsibleHeading block + new BlockModel + { + blockType = "CollapsibleHeading", + properties = new + { + level=1, + isExpanded = true, + placeholder = "collapsible heading" + } + }, + // Configuring CollapsibleParagraph block + new BlockModel + { + blockType = "CollapsibleParagraph", + properties = new + { + isExpanded = false, + placeholder = "collapsible paragraph" + } + } +``` + +## Configure divider block + +Divider blocks insert horizontal lines that separate different sections of content. You can render Divider blocks by setting the [blockType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [Divider](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Divider). + +### BlockType + +```typescript +// Adding divider block +{ + blockType = "Divider" +}, +``` + +The below sample demonstrates the configuration of divider block in the Block Editor. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/blockTypes/paragraph-block/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Divider.cs" %} +{% include code-snippet/block-editor/blocks/blockTypes/divider-block/divider.cs %} +{% endhighlight %} +{% endtabs %} + +![Divider Block](./../../images/block-divider.png) + +## Configure quote block + +You can render Quote blocks by setting the [blockType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [Quote](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Quote). Quote blocks are specially styled for quotations or excerpts. + +### BlockType & Properties + +```typescript +// Adding divider block +{ + blockType = "Quote", + content = new List + { + new { contentType = "Text", content = "“Quotes are perfect for highlighting key messages or testimonials.”" } + } +} +``` + +The below sample demonstrates the configuration of quote block in the Block Editor. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/blockTypes/paragraph-block/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Quote.cs" %} +{% include code-snippet/block-editor/blocks/blockTypes/quote-block/quote.cs %} +{% endhighlight %} +{% endtabs %} + +![Quote Block](./../../images/block-quote.png) + +### Configure placeholder + +You can configure placeholder text for block using the `placeholder` in the `properties` property. This text appears when the block is empty. The default placeholder for quote block is `Write a quote`. + +```typescript +// Adding placeholder value to blocktype +{ + blockType = 'Quote', + properties = new { placeholder = "Quote" } +} +``` + +## Configure callout block + +You can render Callout blocks by setting the [blockType](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [Callout](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Callout). They're useful for notes, warnings, or tips that require special attention. + +### BlockType & Properties + +```typescript +// Adding callout block + { + blockType = "Callout", + properties = new { + children = new List() + { + new BlockModel() + { + blockType = "Paragraph", + content = new List(){ + new{ + contentType = "Text", + content = "Important information: This is a callout block used to highlight important content" + } + } + } + } + } + } + +``` + +The below sample demonstrates the configuration of callout block in the Block Editor. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/blockTypes/paragraph-block/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Callout.cs" %} +{% include code-snippet/block-editor/blocks/blockTypes/callout-block/callout.cs %} +{% endhighlight %} +{% endtabs %} + +![Callout Block](./../../images/block-callout.png) + +### Configure children + +The Block Editor supports hierarchical content structures through the `children` in the `properties` property. This property allows you to create nested blocks, which is applicable only for Callout and Collapsible blocks. + +Child blocks can be configured with all the same properties as top-level blocks. + +### Configure parent id + +To establish a clear parent-child relationship, the `parentId` in the `properties` of each child block must match the `id` of its parent block. + +This structure is essential for maintaining nested relationships within the editor. + +The below sample demonstrates the configuration of children in the Block Editor using parentId. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/children/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Children.cs" %} +{% include code-snippet/block-editor/blocks/children/children.cs %} +{% endhighlight %} +{% endtabs %} + +![Block children](./../../images/block-children.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/drag-drop.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/drag-drop.md similarity index 80% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/drag-drop.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/drag-drop.md index 047915ecf3..fab8588572 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/drag-drop.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/drag-drop.md @@ -1,14 +1,14 @@ --- layout: post -title: Drag and drop in ##Platform_Name## Block Editor Control | Syncfusion -description: Checkout and learn about Drag and drop with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +title: Drag and drop in ASP.NET MVC Block Editor Control | Syncfusion +description: Checkout and learn about Drag and drop with Syncfusion Essential ASP.NET MVC BlockEditor control, its elements, and more details. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- -# Drag and drop in ##Platform_Name## Block Editor control +# Drag and drop in ASP.NET MVC Block Editor control The drag and drop feature in Block Editor allows users to easily rearrange blocks within the editor by dragging them to different positions. @@ -30,11 +30,11 @@ During the drag operation, the editor provides visual cues to indicate where the {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/drag-drop/razor %} +{% include code-snippet/block-editor/drag-drop/razor %} {% endhighlight %} {% highlight c# tabtitle="DragDrop.cs" %} -{% include code-snippet/blockeditor/drag-drop/dragdrop.cs %} +{% include code-snippet/block-editor/drag-drop/dragdrop.cs %} {% endhighlight %} {% endtabs %} -![Drag and Drop](images/drag-drop.png) +![Drag and Drop](./../images/drag-drop.png) diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/editor-menus.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/editor-menus.md similarity index 88% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/editor-menus.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/editor-menus.md index 3f1d516f53..122d4335c5 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/editor-menus.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/editor-menus.md @@ -1,14 +1,14 @@ --- layout: post -title: Editor Menus in ##Platform_Name## Block Editor Control | Syncfusion -description: Checkout and learn about Editor Menus with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +title: Editor Menus in ASP.NET MVC Block Editor Control | Syncfusion +description: Checkout and learn about Editor Menus with Syncfusion Essential ASP.NET MVC BlockEditor control, its elements, and more details. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- -# Editor Menus in ##Platform_Name## Block Editor control +# Editor Menus in ASP.NET MVC Block Editor control The Block Editor control provides several interactive menus to enhance content creation and editing. These menus offer quick access to various commands and formatting options. @@ -50,14 +50,14 @@ Below example demonstrates the customization of the Slash Command menu. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/editor-menus/slash-command/razor %} +{% include code-snippet/block-editor/editor-menus/slash-command/razor %} {% endhighlight %} {% highlight c# tabtitle="SlashCommand.cs" %} -{% include code-snippet/blockeditor/editor-menus/slash-command/slashCommand.cs %} +{% include code-snippet/block-editor/editor-menus/slash-command/slashCommand.cs %} {% endhighlight %} {% endtabs %} -![Slash Command](images/editor-slashcommand.png) +![Slash Command](./../images/editor-slashcommand.png) ## Context menu @@ -90,14 +90,14 @@ Below example demonstrates the customization of the Context menu. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/editor-menus/context-menu/razor %} +{% include code-snippet/block-editor/editor-menus/context-menu/razor %} {% endhighlight %} {% highlight c# tabtitle="ContextMenu.cs" %} -{% include code-snippet/blockeditor/editor-menus/context-menu/contextMenu.cs %} +{% include code-snippet/block-editor/editor-menus/context-menu/contextMenu.cs %} {% endhighlight %} {% endtabs %} -![Context Menu](images/editor-contextmenu.png) +![Context Menu](./../images/editor-contextmenu.png) ## Block action menu @@ -134,14 +134,14 @@ Below example demonstrates the customization of the Block action menu. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/editor-menus/block-action/razor %} +{% include code-snippet/block-editor/editor-menus/block-action/razor %} {% endhighlight %} {% highlight c# tabtitle="BlockAction.cs" %} -{% include code-snippet/blockeditor/editor-menus/block-action/blockAction.cs %} +{% include code-snippet/block-editor/editor-menus/block-action/blockAction.cs %} {% endhighlight %} {% endtabs %} -![Block Action](images/editor-blockaction.png) +![Block Action](./../images/editor-blockaction.png) ## Inline Toolbar @@ -179,9 +179,9 @@ Below example demonstrates the customization of the Inline Toolbar. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/editor-menus/inline-toolbar/razor %} +{% include code-snippet/block-editor/editor-menus/inline-toolbar/razor %} {% endhighlight %} {% highlight c# tabtitle="InlineToolbar.cs" %} -{% include code-snippet/blockeditor/editor-menus/inline-toolbar/inlineToolbar.cs %} +{% include code-snippet/block-editor/editor-menus/inline-toolbar/inlineToolbar.cs %} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/editor-security/cross-site-script.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/editor-security/cross-site-script.md similarity index 79% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/editor-security/cross-site-script.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/editor-security/cross-site-script.md index 44d860578e..bb660cb922 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/editor-security/cross-site-script.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/editor-security/cross-site-script.md @@ -1,14 +1,14 @@ --- layout: post -title: Cross-Site scripting in ##Platform_Name## Block Editor | Syncfusion -description: Checkout and learn about Cross-Site scripting with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +title: Cross-Site scripting in ASP.NET MVC Block Editor | Syncfusion +description: Checkout and learn about Cross-Site scripting with Syncfusion Essential ASP.NET MVC BlockEditor control, its elements, and more details. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- -# Cross-Site scripting(XSS) prevention in ##Platform_Name## Block Editor control +# Prevent XSS in ASP.NET MVC Block Editor Control The Block Editor control allows users to edit the content with security by preventing cross-site scripting (XSS). By default, it provides built-in support to remove elements from editor content that cause XSS attacks. The editor removes the elements based on the attributes if it is possible to execute a script. diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/editor-security/read-only-mode.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/editor-security/read-only-mode.md similarity index 81% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/editor-security/read-only-mode.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/editor-security/read-only-mode.md index 94d968ead6..c23d1961d8 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/editor-security/read-only-mode.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/editor-security/read-only-mode.md @@ -1,14 +1,14 @@ --- layout: post -title: Controlled Access in ##Platform_Name## Block Editor Control | Syncfusion -description: Checkout and learn about Controlling Editor Access with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +title: Controlled Access in ASP.NET MVC Block Editor Control | Syncfusion +description: Checkout and learn about Controlling Editor Access with Syncfusion Essential ASP.NET MVC BlockEditor control, its elements, and more details. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- -# Controlling Editor Access in ##Platform_Name## Block Editor control +# Controlling Editor Access in ASP.NET MVC Block Editor control The Block Editor control provides read-only modes to control user interaction with the editor. This allows users to view formatted content without editing. This features are useful for displaying content without modifications or temporarily restricting input. diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/events.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/events.md similarity index 96% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/events.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/events.md index d8205bc966..32b71e65cd 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/events.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/events.md @@ -1,14 +1,14 @@ --- layout: post -title: Events in ##Platform_Name## Block Editor Control | Syncfusion -description: Checkout and learn about Events with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +title: Events in ASP.NET MVC Block Editor Control | Syncfusion +description: Checkout and learn about Events with Syncfusion Essential ASP.NET MVC BlockEditor control, its elements, and more details. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- -# Events in ##Platform_Name## Block Editor control +# Events in ASP.NET MVC Block Editor control The Block Editor control provides a comprehensive set of events that allow you to monitor and respond to various user interactions and editor state changes. These events enable you to implement custom behaviors, validation, logging, and integration with other systems. diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/getting-started.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/getting-started.md similarity index 90% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/getting-started.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/getting-started.md index eb534d12f6..1319b040e2 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/getting-started.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/getting-started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with ##Platform_Name## BlockEditor Control | Syncfusion -description: Checkout and learn about getting started with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more. +title: Getting Started with ASP.NET MVC BlockEditor Control | Syncfusion +description: Checkout and learn about getting started with Syncfusion Essential ASP.NET MVC BlockEditor control, its elements, and more. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## @@ -9,7 +9,7 @@ documentation: ug --- -# Getting Started with ASP.NET MVC BlockEditor control +# Getting Started with ASP.NET MVC Block Editor control This section briefly explains about how to include `ASP.NET MVC BlockEditor` control in your ASP.NET MVC application using Visual Studio. @@ -21,7 +21,7 @@ This section briefly explains about how to include `ASP.NET MVC BlockEditor` con * [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) +* [Create a Project using Syncfusion® ASP.NET MVC Extension](https://ej2.syncfusion.com/aspnetmvc/documentation/visual-studio-integration/create-project) ## Install ASP.NET MVC package in the application @@ -89,13 +89,13 @@ Now, add the Syncfusion® ASP.NET MVC BlockE {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/getting-started/razor %} +{% include code-snippet/block-editor/getting-started/razor %} {% endhighlight %} {% highlight c# tabtitle="Default.cs" %} -{% include code-snippet/blockeditor/getting-started/gettingstarted.cs %} +{% include code-snippet/block-editor/getting-started/gettingstarted.cs %} {% endhighlight %} {% endtabs %} Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET MVC BlockEditor control will be rendered in the default web browser. -![ASP.NET MVC BlockEditor Control](images/block-editor-control.png) \ No newline at end of file +![ASP.NET MVC BlockEditor Control](./../images/block-editor-control.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/globalization.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/globalization.md similarity index 79% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/globalization.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/globalization.md index a992666be9..e1faa406d4 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/globalization.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/globalization.md @@ -1,14 +1,14 @@ --- layout: post -title: Globalization in ##Platform_Name## Block Editor Control | Syncfusion -description: Checkout and learn about Globalization with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +title: Globalization in ASP.NET MVC Block Editor Control | Syncfusion +description: Checkout and learn about Globalization with Syncfusion Essential ASP.NET MVC BlockEditor control, its elements, and more details. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- -# Globalization in ##Platform_Name## Block Editor control +# Globalization in ASP.NET MVC Block Editor control ## Localization @@ -50,14 +50,14 @@ The below example shows adding the German culture locale(`de-DE`) {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/globalization/locale/razor %} +{% include code-snippet/block-editor/globalization/locale/razor %} {% endhighlight %} {% highlight c# tabtitle="Locale.cs" %} -{% include code-snippet/blockeditor/globalization/locale/locale.cs %} +{% include code-snippet/block-editor/globalization/locale/locale.cs %} {% endhighlight %} {% endtabs %} -![Locale](images/locale.png) +![Locale](./../images/locale.png) ## RTL @@ -65,11 +65,11 @@ RTL provides an option to switch the text direction and layout of the Block Edit {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/globalization/rtl/razor %} +{% include code-snippet/block-editor/globalization/rtl/razor %} {% endhighlight %} {% highlight c# tabtitle="Rtl.cs" %} -{% include code-snippet/blockeditor/globalization/rtl/rtl.cs %} +{% include code-snippet/block-editor/globalization/rtl/rtl.cs %} {% endhighlight %} {% endtabs %} -![RTL](images/rtl.png) +![RTL](./../images/rtl.png) diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/keyboard-shortcuts.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/keyboard-shortcuts.md similarity index 96% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/keyboard-shortcuts.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/keyboard-shortcuts.md index fac47e4596..03f4ba5df5 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/keyboard-shortcuts.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/keyboard-shortcuts.md @@ -1,14 +1,14 @@ --- layout: post -title: Keyboard Shortcuts in ##Platform_Name## Block Editor | Syncfusion -description: Checkout and learn about Keyboard Shortcuts with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +title: Keyboard Shortcuts in ASP.NET MVC Block Editor | Syncfusion +description: Checkout and learn about Keyboard Shortcuts with Syncfusion Essential ASP.NET MVC BlockEditor control, its elements, and more details. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- -# Keyboard Shortcuts in ##Platform_Name## Block Editor control +# Keyboard Shortcuts in ASP.NET MVC Block Editor control The Block Editor control provides comprehensive keyboard shortcuts to enhance productivity and streamline content creation. These shortcuts are organized into different categories based on their functionality, allowing users to quickly access various features without relying on mouse interactions. diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/methods.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/methods.md similarity index 90% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/methods.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/methods.md index a4e6eb38ea..28ee46ad5b 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/methods.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/methods.md @@ -1,14 +1,14 @@ --- layout: post -title: Methods in ##Platform_Name## Block Editor | Syncfusion -description: Checkout and learn about Methods with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +title: Methods in ASP.NET MVC Block Editor | Syncfusion +description: Checkout and learn about Methods with Syncfusion Essential ASP.NET MVC BlockEditor control, its elements, and more details. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- -# Methods in ##Platform_Name## Block Editor control +# Methods in ASP.NET MVC Block Editor control The Block Editor control provides a comprehensive set of public methods that allow you to programmatically interact with and manipulate the editor content. These methods enable you to add, remove, update, and manage blocks, as well as control selection, formatting, and other editor operations. @@ -86,14 +86,14 @@ Below example demonstrates the usage of the above methods. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/methods/block/razor %} +{% include code-snippet/block-editor/methods/block/razor %} {% endhighlight %} {% highlight c# tabtitle="Block.cs" %} -{% include code-snippet/blockeditor/methods/block/block.cs %} +{% include code-snippet/block-editor/methods/block/block.cs %} {% endhighlight %} {% endtabs %} -![Block Method](images/method-block.png) +![Block Method](./../images/method-block.png) ## Selection and Cursor Methods @@ -164,14 +164,14 @@ Below example demonstrates the usage of the above methods. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/methods/selection/razor %} +{% include code-snippet/block-editor/methods/selection/razor %} {% endhighlight %} {% highlight c# tabtitle="Selection.cs" %} -{% include code-snippet/blockeditor/methods/selection/selection.cs %} +{% include code-snippet/block-editor/methods/selection/selection.cs %} {% endhighlight %} {% endtabs %} -![Selection Method](images/method-selection.png) +![Selection Method](./../images/method-selection.png) ## Focus Management Methods @@ -235,14 +235,14 @@ Below example demonstrates the usage of the above methods. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/methods/formatting/razor %} +{% include code-snippet/block-editor/methods/formatting/razor %} {% endhighlight %} {% highlight c# tabtitle="Formatting.cs" %} -{% include code-snippet/blockeditor/methods/formatting/formatting.cs %} +{% include code-snippet/block-editor/methods/formatting/formatting.cs %} {% endhighlight %} {% endtabs %} -![Formatting Method](images/method-formatting.png) +![Formatting Method](./../images/method-formatting.png) ## Data Export Methods @@ -307,11 +307,11 @@ Below example demonstrates the usage of the above methods. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/methods/data/razor %} +{% include code-snippet/block-editor/methods/data/razor %} {% endhighlight %} {% highlight c# tabtitle="Data.cs" %} -{% include code-snippet/blockeditor/methods/data/data.cs %} +{% include code-snippet/block-editor/methods/data/data.cs %} {% endhighlight %} {% endtabs %} -![Data Method](images/method-data.png) +![Data Method](./../images/method-data.png) diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/paste-cleanup.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/paste-cleanup.md new file mode 100644 index 0000000000..f3484738ca --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/paste-cleanup.md @@ -0,0 +1,127 @@ +--- +layout: post +title: Undo redo in ASP.NET MVC Block Editor | Syncfusion +description: Checkout and learn about undo redo with Syncfusion Essential ASP.NET MVC BlockEditor control, its elements, and more details. +platform: ej2-asp-core-mvc +control: BlockEditor +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Paste Clean-up in ASP.NET MVC Block Editor control + +The Block Editor control provides robust paste clean-up functionalities to ensure that pasted content integrates seamlessly and maintains consistency with the editor's styling and structure. This helps in removing unwanted formatting, scripts, or elements often copied from external sources like web pages or word processors. + +You can configure the paste settings using the [PasteCleanupSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.PasteCleanupSettings.html) property in the Block Editor control. This property allows you to define various options to control how content is pasted into the editor. + +## Configuring allowed styles + +The [AllowedStyles](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.PasteCleanupSettings.html#Syncfusion_EJ2_BlockEditor_PasteCleanupSettings_AllowedStyles) property in the [`PasteCleanupSettings`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.PasteCleanupSettings.html) model allows you to define which CSS styles are permitted when content is pasted into the editor. Any style not included in this list will be stripped from the pasted content. This ensures that only desired visual attributes are preserved, maintaining a clean and consistent look. + +By default, following styles are allowed: + +['font-weight', 'font-style', 'text-decoration', 'text-transform']. + +In the below example, only `font-weight` and `font-style` styles will be retained from the pasted content. All other inline styles will be removed. + +```cshtml +@{ + var allowedStyles = new string[] { "font-style", "font-weight" }; +} +
+ @Html.EJS().BlockEditor("block-editor").PasteCleanupSettings(new PasteCleanupSettings() { AllowedStyles = allowedStyles }).Render() +
+``` + +## Setting denied tags + +The [DeniedTags](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.PasteCleanupSettings.html#Syncfusion_EJ2_BlockEditor_PasteCleanupSettings_DeniedTags) property in [`PasteCleanupSettings`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.PasteCleanupSettings.html) enables you to specify HTML tags that should be completely removed from the pasted content. This is particularly useful for stripping out potentially problematic or irrelevant tags, such as `script` tags, `iframe`s, or any other elements you don't want to allow in the editor. By default, the [DeniedTags](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.PasteCleanupSettings.html#Syncfusion_EJ2_BlockEditor_PasteCleanupSettings_DeniedTags) property is an empty array, meaning no tags are removed by default. + +In the below example, any ` + +``` \ No newline at end of file diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/undo-redo.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/undo-redo.md similarity index 75% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/undo-redo.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/undo-redo.md index 24e907ab51..b310a699cc 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/undo-redo.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/undo-redo.md @@ -1,14 +1,14 @@ --- layout: post -title: Undo redo in ##Platform_Name## Block Editor | Syncfusion -description: Checkout and learn about undo redo with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +title: Undo redo in ASP.NET MVC Block Editor | Syncfusion +description: Checkout and learn about undo redo with Syncfusion Essential ASP.NET MVC BlockEditor control, its elements, and more details. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- -# Undo redo in ##Platform_Name## Block Editor control +# Undo redo in ASP.NET MVC Block Editor control The undo/redo feature in Block Editor enables users to revert or reapply changes made to the content, offering a safety net for edits and enhancing the overall editing experience. @@ -25,11 +25,11 @@ Block Editor allows up to `30` Undo/Redo actions by default. You can modify the {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/undo-redo/razor %} +{% include code-snippet/block-editor/undo-redo/razor %} {% endhighlight %} {% highlight c# tabtitle="UndoRedo.cs" %} -{% include code-snippet/blockeditor/undo-redo/undoredo.cs %} +{% include code-snippet/block-editor/undo-redo/undoredo.cs %} {% endhighlight %} {% endtabs %} -![Undo Redo](images/undo-redo.png) +![Undo Redo](./../images/undo-redo.png) diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/appearance.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/appearance.md similarity index 85% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/appearance.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/appearance.md index b6c5f92fe2..a7d7978e36 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/appearance.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/appearance.md @@ -1,14 +1,14 @@ --- layout: post -title: Appearance in ##Platform_Name## Block Editor Control | Syncfusion -description: Checkout and learn about appearance with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +title: Appearance in ASP.NET Core Block Editor Control | Syncfusion +description: Checkout and learn about appearance with Syncfusion Essential ASP.NET Core BlockEditor control, its elements, and more details. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- -# Appearance in ##Platform_Name## Block Editor control +# Appearance in ASP.NET Core Block Editor control The Block Editor control provides various appearance customization options to match your application's design requirements. These properties allow you to control the visual styling, layout, and overall look and feel of the editor. @@ -55,11 +55,11 @@ You can use the [cssClass](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfus {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/appearance/tagHelper %} +{% include code-snippet/block-editor/appearance/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Appearance.cs" %} -{% include code-snippet/blockeditor/appearance/appearance.cs %} +{% include code-snippet/block-editor/appearance/appearance.cs %} {% endhighlight %} {% endtabs %} -![Appearance](images/appearance.png) +![Appearance](./../images/appearance.png) diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/built-in-blocks/built-in-blocks.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/built-in-blocks/built-in-blocks.md similarity index 65% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/built-in-blocks/built-in-blocks.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/built-in-blocks/built-in-blocks.md index bb5e4c6c27..b1a5b07e45 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/built-in-blocks/built-in-blocks.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/built-in-blocks/built-in-blocks.md @@ -1,7 +1,7 @@ --- layout: post -title: Blocks in ##Platform_Name## Block Editor control | Syncfusion -description: Checkout and learn about Blocks with ##Platform_Name## Block Editor control of Syncfusion Essential JS 2 and more. +title: Blocks in ASP.NET Core Block Editor control | Syncfusion +description: Checkout and learn about Blocks with ASP.NET Core Block Editor control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## @@ -9,9 +9,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Blocks in ##Platform_Name## Block Editor control +# Blocks in ASP.NET Core Block Editor control -The Block Editor control enables you to create block-based content editing solution using various types of blocks. The [e-blocks](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Blocks.html) tag helper allows you to define and manage the content structure of your editor. +The Block Editor control enables you to create block-based content editing solution using various types of blocks. The [blocks](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_Blocks) tag helper allows you to define and manage the content structure of your editor. ## Blocks @@ -46,43 +46,43 @@ By default, the `indent` property is set to `0`. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/blocks/indent/tagHelper %} +{% include code-snippet/block-editor/blocks/indent/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Indent.cs" %} -{% include code-snippet/blockeditor/blocks/indent/indent.cs %} +{% include code-snippet/block-editor/blocks/indent/indent.cs %} {% endhighlight %} {% endtabs %} -![Block Indent](images/block-indent.png) +![Block Indent](./../../images/block-indent.png) ## Configure CSS Class -You can apply custom styling to individual blocks using the `cssClass` property. This property accepts a string containing one or more CSS class names. +You can apply custom styling to individual blocks using the [cssClass](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_CssClass) property. This property accepts a string containing one or more CSS class names. Custom CSS classes allow you to define specialized styling for specific blocks in your editor. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/blocks/cssClass/tagHelper %} +{% include code-snippet/block-editor/blocks/cssClass/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="CssClass.cs" %} -{% include code-snippet/blockeditor/blocks/cssClass/cssclass.cs %} +{% include code-snippet/block-editor/blocks/cssClass/cssclass.cs %} {% endhighlight %} {% endtabs %} -![Block cssClass](images/block-cssClass.png) +![Block cssClass](./../../images/block-cssClass.png) ## Configure templates -The Block Editor allows you to use custom templates for specialized content using the `template` property. Templates can be defined as strings, functions, or HTML elements. +The Block Editor allows you to use custom templates for specialized content using the [template](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Template) property. Templates can be defined as strings, functions, or HTML elements. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/blocks/blockTypes/paragraph-block/tagHelper %} +{% include code-snippet/block-editor/blocks/blockTypes/paragraph-block/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Template.cs" %} -{% include code-snippet/blockeditor/blocks/blockTypes/template-block/template.cs %} +{% include code-snippet/block-editor/blocks/blockTypes/template-block/template.cs %} {% endhighlight %} {% endtabs %} -![Template Block](images/block-template.png) \ No newline at end of file +![Template Block](./../../images/block-template.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/built-in-blocks/code-block.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/built-in-blocks/code-block.md new file mode 100644 index 0000000000..b24236feb3 --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/built-in-blocks/code-block.md @@ -0,0 +1,52 @@ +--- +layout: post +title: Code Block in ASP.NET Core Block Editor control | Syncfusion +description: Checkout and learn about Code Block with ASP.NET Core Block Editor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: BlockEditor +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# Code Blocks in ASP.NET Core Block Editor control + +You can render Code blocks by setting the [blockType](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [Code](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Code). By setting the `properties` property, you can configure the default language. The default language is `plainText`. + +## Global Code Settings + +You can configure global settings for code blocks using the [CodeBlockSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_CodeBlockSettings) property in the Block Editor root configuration. This ensures consistent behavior for syntax highlighting and language options across all code blocks. + +The [CodeBlockSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_CodeBlockSettings) property supports the following options: + +| Property | Description | Default Value | +|----------|-------------|---------------| +| `languages` | Specifies the array of language options for syntax highlighting. | [] | +| `defaultLanguage`| Defines the default language to use for syntax highlighting. | 'plaintext' | + +Each language object in the `languages` array should have: +- `language`: The language value used for syntax highlighting +- `label`: The display name shown in the language selector + +## Configure code properties + +For Individual Code blocks, you can configure default language using the `properties` property in the block model. + +The property supports the following options: + +| Property | Description | Default Value | +|----------|-------------|---------------| +| language | The default language to use for syntax highlighting | '' | + +Below example illustrates how to render the code block in the Block Editor. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/blockTypes/paragraph-block/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Code.cs" %} +{% include code-snippet/block-editor/blocks/blockTypes/code-block/code.cs %} +{% endhighlight %} +{% endtabs %} + +![Code Block](./../../images/block-code.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/built-in-blocks/embed.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/built-in-blocks/embed.md new file mode 100644 index 0000000000..1c43eba3df --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/built-in-blocks/embed.md @@ -0,0 +1,82 @@ +--- +layout: post +title: Embed Blocks in ASP.NET Core Block Editor control | Syncfusion +description: Checkout and learn about Embed Blocks with ASP.NET Core Block Editor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: BlockEditor +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# Embed Blocks in ASP.NET Core Block Editor control + +Block Editor supports addition of embeds to help you organize, showcase contents and format your content effectively. + +## Image Block + +You can use the [Image](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Image) block to showcase an image content within your editor. + +### Configure Image Block + +You can render an [Image](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Image) block by setting the [blockType](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property to [Image](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Image) in the block model. The `properties` property allows you to configure the image source, allowed file types, display dimensions, and more. + +#### Global Image Settings + +You can configure global settings for image blocks using the [ImageBlockSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_ImageBlockSettings) property in the Block Editor root configuration. This ensures consistent behavior for image uploads, resizing, and display. + +The [ImageBlockSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_ImageBlockSettings) property supports the following options: + +| Property | Description | Default Value | +|----------|-------------|---------------| +| saveFormat | Specifies the format to save the image. | `Base64` | +| allowedTypes | Specifies allowed image file types for upload. | `['.jpg', '.jpeg', '.png']` | +| width | Specifies the default display width of the image. | `auto` | +| height | Specifies the default display height of the image. | `auto` | +| enableResize | Enables or disables image resizing. | `true` | +| minWidth | Minimum width allowed for resizing. | `''` | +| maxWidth | Maximum width allowed for resizing. | `''` | +| minHeight | Minimum height allowed for resizing. | `''` | +| maxHeight | Maximum height allowed for resizing. | `''` | + +#### Configure Image Block Properties + +The [Image](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Image) block `properties` property in the block model supports the following options: + +| Property | Description | Default Value | +|----------|-------------|---------------| +| src | Specifies the image path. | `''` | +| width | Specifies the display width of the image. | `''` | +| height | Specifies the display height of the image. | `''` | +| altText | Specifies the alternative text to display when the image cannot be loaded. | `''` | + +### BlockType & Properties + +The following example demonstrates how to pre-configure an [Image](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Image) block in the editor. + +```typescript +// Adding image block + { + blockType = "Image", + properties = new + { + src = "https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png", + width = '200px', + height = '100px', + altText = '', + } +} +``` + +The below sample demonstrates the configuration of image block in the Block Editor. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/blockTypes/image-block/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Image.cs" %} +{% include code-snippet/block-editor/blocks/blockTypes/image-block/image.cs %} +{% endhighlight %} +{% endtabs %} + +![Image Block](./../../images/block-image.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/built-in-blocks/inline-content.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/built-in-blocks/inline-content.md similarity index 77% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/built-in-blocks/inline-content.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/built-in-blocks/inline-content.md index a1f1b5f2cb..83e52e34f6 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/built-in-blocks/inline-content.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/built-in-blocks/inline-content.md @@ -1,7 +1,7 @@ --- layout: post -title: Inline Content in ##Platform_Name## Block Editor control | Syncfusion -description: Checkout and learn about Inline Content with ##Platform_Name## Block Editor control of Syncfusion Essential JS 2 and more. +title: Inline Content in ASP.NET Core Block Editor control | Syncfusion +description: Checkout and learn about Inline Content with ASP.NET Core Block Editor control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## @@ -9,7 +9,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Inline Content in ##Platform_Name## Block Editor control +# Inline Content in ASP.NET Core Block Editor control Content in the Block Editor is managed through the `content` property of blocks. @@ -28,6 +28,19 @@ You can specify the type of content using the `contentType` property. The Block > By default, the content type is set to `Text`. +### ContentType + +```typescript +// Adding inline text +{ + blockType = "Paragraph", + content = new List() + { + new { contentType = 'Text', content = "Inline Text" } + } +} +``` + ## Configure text content You can configure Text content by setting the `contentType` property to `Text`. The default content type is `Text`. @@ -46,6 +59,25 @@ Link settings accepts the following options: | ------------------------- | ----------------------------------------------------------------- | ------------- | |`url`| Specifies the destination URL of the link. | `''` | +### ContentType & Properties + +```typescript +{ + blockType = "Paragraph", + content = new List() + { + new + { + contentType = 'Link', + content = 'hyperlinks', + properties = { + url = 'https://ej2.syncfusion.com/documentation', + } + } + } +} +``` + ## Configure Label You can render labels by setting the `contentType` property as `Label`. Additionally, by configuring the `properties` property, you can customize how labels behave in your editor. This setup allows you to define the trigger character and specify the available label items. @@ -61,6 +93,19 @@ The Block Editor comes with offers different built-in options. These include: You can customize the labels by using the `properties` property with type `Label`. +### ContentType & Properties + +```typescript +// Adding inline label +{ + blockType = "Paragraph", + content = new List() + { + new {contentType = 'Label', properties = { lableId = "progress" }} + } +} +``` + ### Trigger Character configuration You can use the `triggerChar` property to specify the character that will trigger the label suggestions popup while typing. The default trigger character is `$`. @@ -87,14 +132,14 @@ The below sample demonstrates the customization of labels in the Block Editor. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/blocks/label-settings/tagHelper %} +{% include code-snippet/block-editor/blocks/label-settings/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Label.cs" %} -{% include code-snippet/blockeditor/blocks/label-settings/label.cs %} +{% include code-snippet/block-editor/blocks/label-settings/label.cs %} {% endhighlight %} {% endtabs %} -![Block label-settings](images/block-label.png) +![Block label-settings](./../../images/block-label.png) ## Configure mention @@ -102,6 +147,21 @@ Mentions are references to users or entities that can be inserted into your cont Mentions are typically triggered by the `@` character and are linked to the `users` collection defined in the Block Editor. +### ContentType + +```typescript +// Adding inline code +{ + blockType = "Paragraph", + content = new List() + { + new { + contentType = "Mention", properties = new { userId = "user1" } + } + } +} +``` + ## Applying inline styles The Block Editor allows you to apply rich formatting to block contents using the `styles` property. diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/built-in-blocks/list-types.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/built-in-blocks/list-types.md new file mode 100644 index 0000000000..bb385c0103 --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/built-in-blocks/list-types.md @@ -0,0 +1,145 @@ +--- +layout: post +title: Lists in ASP.NET Core Block Editor control | Syncfusion +description: Checkout and learn about List Blocks with ASP.NET Core Block Editor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: BlockEditor +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# Lists in ASP.NET Core Block Editor control + +List blocks in the Block Editor component are used to organize content into structured lists. You can render List blocks by setting the [blockType](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [BulletList](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_BulletList), [NumberedList](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_NumberedList),, or [Checklist](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Checklist). Bullet lists and numbered lists are ideal for unordered and ordered items, respectively, while checklist blocks enable interactive to-do lists with checkable items. + +## Configure bullet list + +You can render Bullet List block by setting the [blockType](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [BulletList](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_BulletList). This block type is used for unordered lists. + +### BlockType + +```typescript +// Adding bulletlist block +{ + blockType = 'BulletList', + content = new List() + { + new + { + contentType = "Text" + content = 'your content' + } + } +} +``` + +### Configure placeholder + +You can configure placeholder text for block using the `placeholder` in the `properties` property. This text appears when the block is empty. The default placeholder for bullet list is `Add item`. + +```typescript +// Adding placeholder value +{ + blockType = 'BulletList', + properties = new { placeholder = "Add item" } +} +``` + +## Configure numbered list + +You can render Numbered List block by setting the [blockType](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [NumberedList](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_NumberedList),. This block type is used for ordered lists. + +### BlockType + +```typescript +// Adding bulletlist block +{ + blockType = 'NumberedList', + content = new List() + { + new + { + contentType = "Text" + content = 'your content' + } + } +} +``` + +### Configure placeholder + +You can configure placeholder text for block using the `placeholder` in the `properties` property. This text appears when the block is empty. The default placeholder for numbered list is `Add item`. + +```typescript +// Adding placeholder value +{ + blockType = 'NumberedList', + properties = new { placeholder = "Add item" } +} +``` + +## Configure checklist + +You can render Check List block by setting the [blockType](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property property as [Checklist](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Checklist). This block type is used for creating interactive to-do lists. + +### BlockType + +```typescript +// Adding bulletlist block +{ + blockType = 'CheckList', + content = new List() + { + new + { + contentType = "Text" + content = 'your content' + } + } +} +``` + +### Configure checked state + +For blocks that support selection states such as `Checklist`, you can configure the checked state using the `properties` property with `isChecked`. + +By default, the `isChecked` property is set to `false`. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/isChecked/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="IsChecked.cs" %} +{% include code-snippet/block-editor/blocks/isChecked/ischecked.cs %} +{% endhighlight %} +{% endtabs %} + +![Block isChecked](./../../images/block-ischecked.png) + +### Configure placeholder + +You can configure placeholder text for block using the `placeholder` in the `properties` property. This text appears when the block is empty. The default placeholder for check list is `Todo`. + +```typescript +// Adding placeholder value +{ + blockType = 'Checklist', + properties = new { placeholder = "Todo" } +} +``` + +## Configure list blocks + +Below example illustrates how to render the different types of list blocks in the Block Editor. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/blockTypes/list-block/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="List.cs" %} +{% include code-snippet/block-editor/blocks/blockTypes/list-block/list.cs %} +{% endhighlight %} +{% endtabs %} + +![List Block](./../../images/block-list.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/built-in-blocks/table-block.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/built-in-blocks/table-block.md new file mode 100644 index 0000000000..be90ea4dba --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/built-in-blocks/table-block.md @@ -0,0 +1,40 @@ +--- +layout: post +title: Table Block in ASP.NET Core Block Editor control | Syncfusion +description: Checkout and learn about Table Blocks with ASP.NET Core Block Editor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: BlockEditor +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# Table Blocks in ASP.NET Core Block Editor control + +The Block Editor control allows you to render structured data in rows and columns by setting the block's [blockType](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property to [Table](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Table). You can customize the table layout, header, row numbers, and define columns and rows using the `properties` property. + +### Configure Table Block + +For Table blocks, you can configure layout and structure using the `properties` property. This property supports the following options: + +| Property | Description | Default Value | +|----------|-------------|---------------| +| width | Specifies the display width of the table. | `100%` | +| enableHeader | Specifies whether to enable header for the table. | `true` | +| enableRowNumbers | Specifies whether to enable row numbers for the table. | `true` | +| readOnly | Specifies whether to render the table in read-only mode, disabling edits. | `false` | +| columns | Defines the columns of the table, including their types and headers. | `[]` | +| rows | Defines the rows of the table, each containing cells tied to columns. | `[]` | + +This sample demonstrates the configuration of the [Table](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Table) block in the Block Editor. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/blockTypes/paragraph-block/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Table.cs" %} +{% include code-snippet/block-editor/blocks/blockTypes/table-block/table.cs %} +{% endhighlight %} +{% endtabs %} + +![Table Block](./../../images/block-table.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/built-in-blocks/typography.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/built-in-blocks/typography.md new file mode 100644 index 0000000000..7f4150ff5b --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/built-in-blocks/typography.md @@ -0,0 +1,357 @@ +--- +layout: post +title: Typography Blocks in ASP.NET Core Block Editor control | Syncfusion +description: Checkout and learn about Typography Blocks with ASP.NET Core Block Editor control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: BlockEditor +publishingplatform: ##Platform_Name## +documentation: ug +domainurl: ##DomainURL## +--- + +# Typography Blocks in ASP.NET Core Block Editor control + +Typography blocks are essential for organizing and presenting text-based content in your documents. The Block Editor component supports various structural blocks—such as Paragraph, Heading, Collapsible Block, Divider, Quote, and Callout to help you format and structure content effectively. + +## Configure paragraph block + +You can render Paragraph blocks by setting the [blockType](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [Paragraph](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Paragraph). Paragraph blocks are the most common type, used for regular text content. They provide standard text formatting options and serve as the default block type. + +### BlockType + +```typescript +// Adding paragraph block +{ + blockType = 'Paragraph', + content = new List + { + new + { + contentType = 'Text', + content = 'This is a paragraph block example.' + } + } +} +``` + +The below sample demonstrates the configuration of paragraph block in the Block Editor. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/blockTypes/paragraph-block/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Paragraph.cs" %} +{% include code-snippet/block-editor/blocks/blockTypes/paragraph-block/paragraph.cs %} +{% endhighlight %} +{% endtabs %} + +![Paragraph Block](./../../images/block-paragraph.png) + +### Configure placeholder + +You can configure placeholder text for block using the `placeholder` in the `properties` property. This text appears when the block is empty. The default placeholder for the paragraph block is `Write something or ‘/’ for commands.`. + +### BlockType & Properties + +```typescript +// Adding placeholder + { + blockType = 'Paragraph', + properties = new { placeholder = "Start typing ..." } +} +``` + +The below sample demonstrates the configuration of placeholder in the Block Editor for the paragraph block. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/placeholder/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Placeholder.cs" %} +{% include code-snippet/block-editor/blocks/placeholder/placeholder.cs %} +{% endhighlight %} +{% endtabs %} + +![Block placeholder](./../../images/block-placeholder.png) + +## Configure heading block + +You can render Heading blocks by setting the [blockType](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [Heading](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Heading). Heading blocks are used to create document titles and section headers of varying importance. These blocks help structure your content hierarchically, making it easier to read and navigate. + +### Configure levels + +You can configure the heading blocks using the property `level` in the `properties` property. +The heading level representing a title `level: 1`, heading `level: 2`, subheading `level: 3` and a subsection by `level: 4`. + +### BlockType & Properties + +```typescript +// Adding heading block +{ + blockType = "Heading", + content = new List + { + new { contentType = "Text", content = "Heading" } + }, + // levels range from 1 to 4 + properties = new { level = 4 } +} +``` + +The below sample demonstrates the configuration of heading block in the Block Editor. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/blockTypes/paragraph-block/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Heading.cs" %} +{% include code-snippet/block-editor/blocks/blockTypes/heading-block/heading.cs %} +{% endhighlight %} +{% endtabs %} + +![Heading Block](./../../images/block-heading.png) + +### Configure placeholder + +You can configure placeholder text for block using the `placeholder` in the `properties` property. This text appears when the block is empty. The default placeholder for heading block is `Heading{level}`. + +### BlockType & Properties + +```typescript +// Adding placeholder + { + blockType = 'Paragraph', + properties = new {level = 4 , placeholder = "Heading block" } +} +``` + +## Configure collapsible blocks + +You can render Collapsible blocks by setting the [blockType](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [CollapsibleParagraph](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_CollapsibleParagraph) or [CollapsibleHeading](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_CollapsibleHeading). Collapsible blocks allow users to expand or collapse sections, providing a way to hide or show content as needed. + +### Configure levels + +You can configure the CollapsibleHeading using the property `level` inside the `properties` property . The levels can be varied from `level: 1` to `level: 4`. + +### Configure children + +The Block Editor supports hierarchical content structures through the `children` property. This property can be achieved through `properties` property that allows you to create nested blocks, which is applicable only for Callout and Collapsible blocks. + +Child blocks can be configured with all the same properties as top-level blocks. + +### Configure parent id + +To establish a clear parent-child relationship, the `parentId` in the `properties` of each child block must match the `id` of its parent block. + +This structure is essential for maintaining nested relationships within the editor. + +### Configure expanded state + +You can control whether a block is expanded or collapsed using the `isExpanded` in the `properties` property. By default, this property is set to `false`, meaning the block will be collapsed initially. This setting is only applicable to Collapsible blocks. + +### BlockType & Properties + +```typescript + // Configuring CollapsibleHeading block + new BlockModel + { + blockType = "CollapsibleHeading", + properties = new + { + level=1, + isExpanded = true, + children = new List(){ + // your actions + } + } + }, + // Configuring CollapsibleParagraph block + new BlockModel + { + blockType = "CollapsibleParagraph", + properties = new + { + isExpanded = false, + children = new List() + { + // your actions + } + } + } +``` + +The below sample demonstrates the configuration of collapsibleHeading and collapsibleParagraph blocks in the Block Editor. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/blockTypes/paragraph-block/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Toggle.cs" %} +{% include code-snippet/block-editor/blocks/blockTypes/toggle-block/toggle.cs %} +{% endhighlight %} +{% endtabs %} + +![Toggle Block](./../../images/block-toggle.png) + +### Configure placeholder + +You can configure placeholder text for block using the `placeholder` in the `properties` property. This text appears when the block is empty. The default placeholder for collapsible heading and collapsible paragraph is [CollapsibleParagraph](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_CollapsibleParagraph) and [CollapsibleHeading](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_CollapsibleHeading) respectively. + +```typescript + // Configuring CollapsibleHeading block + new BlockModel + { + blockType = "CollapsibleHeading", + properties = new + { + level=1, + isExpanded = true, + placeholder = "collapsible heading" + } + }, + // Configuring CollapsibleParagraph block + new BlockModel + { + blockType = "CollapsibleParagraph", + properties = new + { + isExpanded = false, + placeholder = "collapsible paragraph" + } + } +``` + +## Configure divider block + +Divider blocks insert horizontal lines that separate different sections of content. You can render Divider blocks by setting the [blockType](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [Divider](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Divider). + +### BlockType + +```typescript +// Adding divider block +{ + blockType = "Divider" +}, +``` + +The below sample demonstrates the configuration of divider block in the Block Editor. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/blockTypes/paragraph-block/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Divider.cs" %} +{% include code-snippet/block-editor/blocks/blockTypes/divider-block/divider.cs %} +{% endhighlight %} +{% endtabs %} + +![Divider Block](./../../images/block-divider.png) + +## Configure quote block + +You can render Quote blocks by setting the [blockType](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [Quote](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Quote). Quote blocks are specially styled for quotations or excerpts. + +### BlockType & Properties + +```typescript +// Adding divider block +{ + blockType = "Quote", + content = new List + { + new { contentType = "Text", content = "“Quotes are perfect for highlighting key messages or testimonials.”" } + } +} +``` + +The below sample demonstrates the configuration of quote block in the Block Editor. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/blockTypes/paragraph-block/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Quote.cs" %} +{% include code-snippet/block-editor/blocks/blockTypes/quote-block/quote.cs %} +{% endhighlight %} +{% endtabs %} + +![Quote Block](./../../images/block-quote.png) + +### Configure placeholder + +You can configure placeholder text for block using the `placeholder` in the `properties` property. This text appears when the block is empty. The default placeholder for quote block is `Write a quote`. + +```typescript +// Adding placeholder value to blocktype +{ + blockType = 'Quote', + properties = new { placeholder = "Quote" } +} +``` + +## Configure callout block + +You can render Callout blocks by setting the [blockType](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as [Callout](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html#Syncfusion_EJ2_BlockEditor_BlockType_Callout). They're useful for notes, warnings, or tips that require special attention. + +### BlockType & Properties + +```typescript +// Adding callout block + { + blockType = "Callout", + properties = new { + children = new List() + { + new BlockModel() + { + blockType = "Paragraph", + content = new List(){ + new{ + contentType = "Text", + content = "Important information: This is a callout block used to highlight important content" + } + } + } + } + } + } + +``` + +The below sample demonstrates the configuration of callout block in the Block Editor. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/blockTypes/paragraph-block/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Callout.cs" %} +{% include code-snippet/block-editor/blocks/blockTypes/callout-block/callout.cs %} +{% endhighlight %} +{% endtabs %} + +![Callout Block](./../../images/block-callout.png) + +### Configure children + +The Block Editor supports hierarchical content structures through the `children` in the `properties` property. This property allows you to create nested blocks, which is applicable only for Callout and Collapsible blocks. + +Child blocks can be configured with all the same properties as top-level blocks. + +### Configure parent id + +To establish a clear parent-child relationship, the `parentId` in the `properties` of each child block must match the `id` of its parent block. + +This structure is essential for maintaining nested relationships within the editor. + +The below sample demonstrates the configuration of children in the Block Editor using parentId. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/block-editor/blocks/children/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Children.cs" %} +{% include code-snippet/block-editor/blocks/children/children.cs %} +{% endhighlight %} +{% endtabs %} + +![Block children](./../../images/block-children.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/drag-drop.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/drag-drop.md similarity index 80% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/drag-drop.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/drag-drop.md index a24dee1ecf..fbbf94fb34 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/drag-drop.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/drag-drop.md @@ -1,14 +1,14 @@ --- layout: post -title: Drag and drop in ##Platform_Name## Block Editor Control | Syncfusion -description: Checkout and learn about Drag and drop with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +title: Drag and drop in ASP.NET Core Block Editor Control | Syncfusion +description: Checkout and learn about Drag and drop with Syncfusion Essential ASP.NET Core BlockEditor control, its elements, and more details. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- -# Drag and drop in ##Platform_Name## Block Editor control +# Drag and drop in ASP.NET Core Block Editor control The drag and drop feature in Block Editor allows users to easily rearrange blocks within the editor by dragging them to different positions. @@ -30,11 +30,11 @@ During the drag operation, the editor provides visual cues to indicate where the {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/drag-drop/tagHelper %} +{% include code-snippet/block-editor/drag-drop/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="DragDrop.cs" %} -{% include code-snippet/blockeditor/drag-drop/dragdrop.cs %} +{% include code-snippet/block-editor/drag-drop/dragdrop.cs %} {% endhighlight %} {% endtabs %} -![Drag and Drop](images/drag-drop.png) +![Drag and Drop](./../images/drag-drop.png) diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/editor-menus.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/editor-menus.md similarity index 88% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/editor-menus.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/editor-menus.md index 52b92e3792..3bd6925553 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/editor-menus.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/editor-menus.md @@ -1,14 +1,14 @@ --- layout: post -title: Editor Menus in ##Platform_Name## Block Editor Control | Syncfusion -description: Checkout and learn about Editor Menus with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +title: Editor Menus in ASP.NET Core Block Editor Control | Syncfusion +description: Checkout and learn about Editor Menus with Syncfusion Essential ASP.NET Core BlockEditor control, its elements, and more details. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- -# Editor Menus in ##Platform_Name## Block Editor control +# Editor Menus in ASP.NET Core Block Editor control The Block Editor control provides several interactive menus to enhance content creation and editing. These menus offer quick access to various commands and formatting options. @@ -50,14 +50,14 @@ Below example demonstrates the customization of the Slash Command menu. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/editor-menus/slash-command/tagHelper %} +{% include code-snippet/block-editor/editor-menus/slash-command/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="SlashCommand.cs" %} -{% include code-snippet/blockeditor/editor-menus/slash-command/slashCommand.cs %} +{% include code-snippet/block-editor/editor-menus/slash-command/slashCommand.cs %} {% endhighlight %} {% endtabs %} -![Slash Command](images/editor-slashcommand.png) +![Slash Command](./../images/editor-slashcommand.png) ## Context menu @@ -90,14 +90,14 @@ Below example demonstrates the customization of the Context menu. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/editor-menus/context-menu/tagHelper %} +{% include code-snippet/block-editor/editor-menus/context-menu/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="ContextMenu.cs" %} -{% include code-snippet/blockeditor/editor-menus/context-menu/contextMenu.cs %} +{% include code-snippet/block-editor/editor-menus/context-menu/contextMenu.cs %} {% endhighlight %} {% endtabs %} -![Context Menu](images/editor-contextmenu.png) +![Context Menu](./../images/editor-contextmenu.png) ## Block action menu @@ -134,14 +134,14 @@ Below example demonstrates the customization of the Block action menu. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/editor-menus/block-action/tagHelper %} +{% include code-snippet/block-editor/editor-menus/block-action/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="BlockAction.cs" %} -{% include code-snippet/blockeditor/editor-menus/block-action/blockAction.cs %} +{% include code-snippet/block-editor/editor-menus/block-action/blockAction.cs %} {% endhighlight %} {% endtabs %} -![Block Action](images/editor-blockaction.png) +![Block Action](./../images/editor-blockaction.png) ## Inline Toolbar @@ -177,9 +177,9 @@ Below example demonstrates the customization of the Inline Toolbar. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/editor-menus/inline-toolbar/tagHelper %} +{% include code-snippet/block-editor/editor-menus/inline-toolbar/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="InlineToolbar.cs" %} -{% include code-snippet/blockeditor/editor-menus/inline-toolbar/inlineToolbar.cs %} +{% include code-snippet/block-editor/editor-menus/inline-toolbar/inlineToolbar.cs %} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/editor-security/cross-site-script.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/editor-security/cross-site-script.md similarity index 79% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/editor-security/cross-site-script.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/editor-security/cross-site-script.md index 6e9be84745..39543fdbfe 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/editor-security/cross-site-script.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/editor-security/cross-site-script.md @@ -1,14 +1,14 @@ --- layout: post -title: Cross-Site scripting in ##Platform_Name## Block Editor | Syncfusion -description: Checkout and learn about Cross-Site scripting with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +title: Cross-Site scripting in ASP.NET Core Block Editor | Syncfusion +description: Checkout and learn about Cross-Site scripting with Syncfusion Essential ASP.NET Core BlockEditor control, its elements, and more details. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- -# Cross-Site scripting(XSS) prevention in ##Platform_Name## Block Editor control +# Prevent XSS in ASP.NET Core Block Editor Control The Block Editor control allows users to edit the content with security by preventing cross-site scripting (XSS). By default, it provides built-in support to remove elements from editor content that cause XSS attacks. The editor removes the elements based on the attributes if it is possible to execute a script. diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/editor-security/read-only-mode.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/editor-security/read-only-mode.md similarity index 81% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/editor-security/read-only-mode.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/editor-security/read-only-mode.md index beddc8576f..5448bd3e3b 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/editor-security/read-only-mode.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/editor-security/read-only-mode.md @@ -1,14 +1,14 @@ --- layout: post -title: Controlled Access in ##Platform_Name## Block Editor Control | Syncfusion -description: Checkout and learn about Controlling Editor Access with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +title: Controlled Access in ASP.NET Core Block Editor Control | Syncfusion +description: Checkout and learn about Controlling Editor Access with Syncfusion Essential ASP.NET Core BlockEditor control, its elements, and more details. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- -# Controlling Editor Access in ##Platform_Name## Block Editor control +# Controlling Editor Access in ASP.NET Core Block Editor control The Block Editor control provides read-only modes to control user interaction with the editor. This allows users to view formatted content without editing. This features are useful for displaying content without modifications or temporarily restricting input. diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/events.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/events.md similarity index 96% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/events.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/events.md index 2338eec373..1924aaff0c 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/events.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/events.md @@ -1,14 +1,14 @@ --- layout: post -title: Events in ##Platform_Name## Block Editor Control | Syncfusion -description: Checkout and learn about Events with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +title: Events in ASP.NET Core Block Editor Control | Syncfusion +description: Checkout and learn about Events with Syncfusion Essential ASP.NET Core BlockEditor control, its elements, and more details. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- -# Events in ##Platform_Name## Block Editor control +# Events in ASP.NET Core Block Editor control The Block Editor control provides a comprehensive set of events that allow you to monitor and respond to various user interactions and editor state changes. These events enable you to implement custom behaviors, validation, logging, and integration with other systems. diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/getting-started.md similarity index 91% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/getting-started.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/getting-started.md index 51d76a9287..9cf5031cbe 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/getting-started.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/getting-started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with ##Platform_Name## BlockEditor Control | Syncfusion -description: Checkout and learn about getting started with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +title: Getting Started with ASP.NET Core BlockEditor Control | Syncfusion +description: Checkout and learn about getting started with Syncfusion Essential ASP.NET Core BlockEditor control, its elements, and more details. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## @@ -9,7 +9,7 @@ documentation: ug --- -# Getting Started with ASP.NET Core BlockEditor control +# Getting Started with ASP.NET Core Block Editor control This section briefly explains about how to include `ASP.NET Core BlockEditor` control in your ASP.NET Core application using Visual Studio. @@ -93,13 +93,13 @@ Now, add the Syncfusion® ASP.NET Core Block {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/getting-started/tagHelper %} +{% include code-snippet/block-editor/getting-started/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Default.cs" %} -{% include code-snippet/blockeditor/getting-started/gettingstarted.cs %} +{% include code-snippet/block-editor/getting-started/gettingstarted.cs %} {% endhighlight %} {% endtabs %} Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core BlockEditor control will be rendered in the default web browser. -![ASP.NET Core BlockEditor Control](images/block-editor-control.png) \ No newline at end of file +![ASP.NET Core BlockEditor Control](./../images/block-editor-control.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/globalization.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/globalization.md similarity index 79% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/globalization.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/globalization.md index ce22e1b351..d8299314fc 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/globalization.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/globalization.md @@ -1,14 +1,14 @@ --- layout: post -title: Globalization in ##Platform_Name## Block Editor Control | Syncfusion -description: Checkout and learn about Globalization with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +title: Globalization in ASP.NET Core Block Editor Control | Syncfusion +description: Checkout and learn about Globalization with Syncfusion Essential ASP.NET Core BlockEditor control, its elements, and more details. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- -# Globalization in ##Platform_Name## Block Editor control +# Globalization in ASP.NET Core Block Editor control ## Localization @@ -50,14 +50,14 @@ The below example shows adding the German culture locale(`de-DE`) {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/globalization/locale/tagHelper %} +{% include code-snippet/block-editor/globalization/locale/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Locale.cs" %} -{% include code-snippet/blockeditor/globalization/locale/locale.cs %} +{% include code-snippet/block-editor/globalization/locale/locale.cs %} {% endhighlight %} {% endtabs %} -![Locale](images/locale.png) +![Locale](./../images/locale.png) ## RTL @@ -65,11 +65,11 @@ RTL provides an option to switch the text direction and layout of the Block Edit {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/globalization/rtl/tagHelper %} +{% include code-snippet/block-editor/globalization/rtl/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Rtl.cs" %} -{% include code-snippet/blockeditor/globalization/rtl/rtl.cs %} +{% include code-snippet/block-editor/globalization/rtl/rtl.cs %} {% endhighlight %} {% endtabs %} -![RTL](images/rtl.png) +![RTL](./../images/rtl.png) diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/keyboard-shortcuts.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/keyboard-shortcuts.md similarity index 96% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/keyboard-shortcuts.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/keyboard-shortcuts.md index 0dba961df7..031a0877e8 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/keyboard-shortcuts.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/keyboard-shortcuts.md @@ -1,14 +1,14 @@ --- layout: post -title: Keyboard Shortcuts in ##Platform_Name## Block Editor Control | Syncfusion -description: Checkout and learn about Keyboard Shortcuts with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +title: Keyboard Shortcuts in ASP.NET Core Block Editor Control | Syncfusion +description: Checkout and learn about Keyboard Shortcuts with Syncfusion Essential ASP.NET Core BlockEditor control, its elements, and more details. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- -# Keyboard Shortcuts in ##Platform_Name## Block Editor control +# Keyboard Shortcuts in ASP.NET Core Block Editor control The Block Editor control provides comprehensive keyboard shortcuts to enhance productivity and streamline content creation. These shortcuts are organized into different categories based on their functionality, allowing users to quickly access various features without relying on mouse interactions. diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/methods.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/methods.md similarity index 90% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/methods.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/methods.md index 5893b77dd9..c7fd78e0dc 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/methods.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/methods.md @@ -1,14 +1,14 @@ --- layout: post -title: Methods in ##Platform_Name## Block Editor Control | Syncfusion -description: Checkout and learn about Methods with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +title: Methods in ASP.NET Core Block Editor Control | Syncfusion +description: Checkout and learn about Methods with Syncfusion Essential ASP.NET Core BlockEditor control, its elements, and more details. platform: ej2-asp-core-mvc control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- -# Methods in ##Platform_Name## Block Editor control +# Methods in ASP.NET Core Block Editor control The Block Editor control provides a comprehensive set of public methods that allow you to programmatically interact with and manipulate the editor content. These methods enable you to add, remove, update, and manage blocks, as well as control selection, formatting, and other editor operations. @@ -86,14 +86,14 @@ Below example demonstrates the usage of the above methods. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/methods/block/tagHelper %} +{% include code-snippet/block-editor/methods/block/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Block.cs" %} -{% include code-snippet/blockeditor/methods/block/block.cs %} +{% include code-snippet/block-editor/methods/block/block.cs %} {% endhighlight %} {% endtabs %} -![Block Method](images/method-block.png) +![Block Method](./../images/method-block.png) ## Selection and Cursor Methods @@ -164,14 +164,14 @@ Below example demonstrates the usage of the above methods. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/methods/selection/tagHelper %} +{% include code-snippet/block-editor/methods/selection/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Selection.cs" %} -{% include code-snippet/blockeditor/methods/selection/selection.cs %} +{% include code-snippet/block-editor/methods/selection/selection.cs %} {% endhighlight %} {% endtabs %} -![Selection Method](images/method-selection.png) +![Selection Method](./../images/method-selection.png) ## Focus Management Methods @@ -235,14 +235,14 @@ Below example demonstrates the usage of the above methods. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/methods/formatting/tagHelper %} +{% include code-snippet/block-editor/methods/formatting/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Formatting.cs" %} -{% include code-snippet/blockeditor/methods/formatting/formatting.cs %} +{% include code-snippet/block-editor/methods/formatting/formatting.cs %} {% endhighlight %} {% endtabs %} -![Formatting Method](images/method-formatting.png) +![Formatting Method](./../images/method-formatting.png) ## Data Export Methods @@ -307,11 +307,11 @@ Below example demonstrates the usage of the above methods. {% tabs %} {% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/methods/data/tagHelper %} +{% include code-snippet/block-editor/methods/data/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Data.cs" %} -{% include code-snippet/blockeditor/methods/data/data.cs %} +{% include code-snippet/block-editor/methods/data/data.cs %} {% endhighlight %} {% endtabs %} -![Data Method](images/method-data.png) +![Data Method](./../images/method-data.png) diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/paste-cleanup.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/paste-cleanup.md similarity index 56% rename from ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/paste-cleanup.md rename to ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/paste-cleanup.md index a1d5bbf561..0176d3f8f6 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/paste-cleanup.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/paste-cleanup.md @@ -1,7 +1,7 @@ --- layout: post -title: Paste Clean-up in ##Platform_Name## Block Editor control | Syncfusion -description: Checkout and learn about paste clean-up with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. +title: Paste Clean-up in ASP.NET Core Block Editor control | Syncfusion +description: Checkout and learn about paste clean-up with Syncfusion Essential ASP.NET Core BlockEditor control, its elements, and more details. platform: ej2-javascript control: BlockEditor publishingplatform: ##Platform_Name## @@ -9,7 +9,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Paste Clean-up in ##Platform_Name## Block Editor control +# Paste Clean-up in ASP.NET Core Block Editor control The Block Editor control provides robust paste clean-up functionalities to ensure that pasted content integrates seamlessly and maintains consistency with the editor's styling and structure. This helps in removing unwanted formatting, scripts, or elements often copied from external sources like web pages or word processors. @@ -17,7 +17,7 @@ You can configure the paste settings using the [e-blockeditor-pastesettings](htt ## Configuring allowed styles -The [allowedStyles](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.PasteCleanupSettings.htmlAllowedStyles) property in the [e-blockeditor-pastesettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.PasteCleanupSettings.html) tag helper allows you to define which CSS styles are permitted when content is pasted into the editor. Any style not included in this list will be stripped from the pasted content. This ensures that only desired visual attributes are preserved, maintaining a clean and consistent look. +The [AllowedStyles](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.PasteCleanupSettings.html#Syncfusion_EJ2_BlockEditor_PasteCleanupSettings_AllowedStyles) property in the [`PasteCleanupSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.PasteCleanupSettings.html) model allows you to define which CSS styles are permitted when content is pasted into the editor. Any style not included in this list will be stripped from the pasted content. This ensures that only desired visual attributes are preserved, maintaining a clean and consistent look. By default, following styles are allowed: @@ -40,7 +40,7 @@ In the below example, only `font-weight` and `font-style` styles will be retaine ## Setting denied tags -The [deniedTags](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.PasteCleanupSettings.htmlDeniedTags) property in [e-blockeditor-pastesettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.PasteCleanupSettings.html) tag helper enables you to specify HTML tags that should be completely removed from the pasted content. This is particularly useful for stripping out potentially problematic or irrelevant tags, such as `script` tags, `iframe`s, or any other elements you don't want to allow in the editor. By default, the [deniedTags](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.PasteCleanupSettings.htmlDeniedTags) property is an empty array, meaning no tags are removed by default. +The [DeniedTags](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.PasteCleanupSettings.html#Syncfusion_EJ2_BlockEditor_PasteCleanupSettings_DeniedTags) property in [`PasteCleanupSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.PasteCleanupSettings.html) enables you to specify HTML tags that should be completely removed from the pasted content. This is particularly useful for stripping out potentially problematic or irrelevant tags, such as `script` tags, `iframe`s, or any other elements you don't want to allow in the editor. By default, the [DeniedTags](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.PasteCleanupSettings.html#Syncfusion_EJ2_BlockEditor_PasteCleanupSettings_DeniedTags) property is an empty array, meaning no tags are removed by default. In the below example, any ` - -``` \ No newline at end of file diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/built-in-blocks/code-block.md b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/built-in-blocks/code-block.md deleted file mode 100644 index b58c834ae1..0000000000 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/built-in-blocks/code-block.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -layout: post -title: Code Block in ##Platform_Name## Block Editor control | Syncfusion -description: Checkout and learn about Code Block with ##Platform_Name## Block Editor control of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: BlockEditor -publishingplatform: ##Platform_Name## -documentation: ug -domainurl: ##DomainURL## ---- - -# Code Blocks in ##Platform_Name## Block Editor control - -You can render Code blocks by setting the `blockType` property as `Code`. By setting the `properties` property, you can configure the default language. The default language is `plainText`. - -## Global Code Settings - -You can configure global settings for code blocks using the `codeBlockSettings` property in the Block Editor root configuration. This ensures consistent behavior for syntax highlighting and language options across all code blocks. - -The `codeBlockSettings` property supports the following options: - -| Property | Description | Default Value | -|----------|-------------|---------------| -| [languages](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.CodeBlockSettingsModel.html#Syncfusion_EJ2_BlockEditor_CodeBlockSettingsModel_Languages) | Specifies the array of language options for syntax highlighting. | [] | -| [defaultLanguage](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.CodeBlockSettingsModel.html#Syncfusion_EJ2_BlockEditor_CodeBlockSettingsModel_DefaultLanguage) | Defines the default language to use for syntax highlighting. | 'plaintext' | - -Each language object in the `languages` array should have: -- `language`: The language value used for syntax highlighting -- `label`: The display name shown in the language selector - -## Configure code properties - -For Individual Code blocks, you can configure default language using the `properties` property in the block model. - -The property supports the following options: - -| Property | Description | Default Value | -|----------|-------------|---------------| -| language | The default language to use for syntax highlighting | '' | - -Below example illustrates how to render the code block in the Block Editor. - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/blocks/blockTypes/paragraph-block/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Code.cs" %} -{% include code-snippet/blockeditor/blocks/blockTypes/code-block/code.cs %} -{% endhighlight %} -{% endtabs %} - -![Code Block](images/block-code.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/built-in-blocks/embed.md b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/built-in-blocks/embed.md deleted file mode 100644 index f729be9c54..0000000000 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/built-in-blocks/embed.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -layout: post -title: Embed Blocks in ##Platform_Name## Block Editor control | Syncfusion -description: Checkout and learn about Embed Blocks with ##Platform_Name## Block Editor control of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: BlockEditor -publishingplatform: ##Platform_Name## -documentation: ug -domainurl: ##DomainURL## ---- - -# Embed Blocks in ##Platform_Name## Block Editor control - -Block Editor supports addition of embeds to help you organize, showcase contents and format your content effectively. - -## Image Block - -You can use the `Image` block to showcase an image content within your editor. - -### Configure Image Block - -You can render an `Image` block by setting the `blockType` property to `Image` in the block model. The `properties` property allows you to configure the image source, allowed file types, display dimensions, and more. - -#### Global Image Settings - -You can configure global settings for image blocks using the `imageBlockSettings` property in the Block Editor root configuration. This ensures consistent behavior for image uploads, resizing, and display. - -The `imageBlockSettings` property supports the following options: - -| Property | Description | Default Value | -|----------|-------------|---------------| -| saveFormat | Specifies the format to save the image. | `Base64` | -| allowedTypes | Specifies allowed image file types for upload. | `['.jpg', '.jpeg', '.png']` | -| width | Specifies the default display width of the image. | `auto` | -| height | Specifies the default display height of the image. | `auto` | -| enableResize | Enables or disables image resizing. | `true` | -| minWidth | Minimum width allowed for resizing. | `''` | -| maxWidth | Maximum width allowed for resizing. | `''` | -| minHeight | Minimum height allowed for resizing. | `''` | -| maxHeight | Maximum height allowed for resizing. | `''` | - -#### Configure Image Block Properties - -The `Image` block `properties` property in the block model supports the following options: - -| Property | Description | Default Value | -|----------|-------------|---------------| -| src | Specifies the image path. | `''` | -| width | Specifies the display width of the image. | `''` | -| height | Specifies the display height of the image. | `''` | -| altText | Specifies the alternative text to display when the image cannot be loaded. | `''` | - -The below sample demonstrates the configuration of image block in the Block Editor. - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/blocks/blockTypes/image-block/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Image.cs" %} -{% include code-snippet/blockeditor/blocks/blockTypes/image-block/image.cs %} -{% endhighlight %} -{% endtabs %} - -![Image Block](images/block-image.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/built-in-blocks/list-types.md b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/built-in-blocks/list-types.md deleted file mode 100644 index 5a837e7e40..0000000000 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/built-in-blocks/list-types.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -layout: post -title: Lists in ##Platform_Name## Block Editor control | Syncfusion -description: Checkout and learn about List Blocks with ##Platform_Name## Block Editor control of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: BlockEditor -publishingplatform: ##Platform_Name## -documentation: ug -domainurl: ##DomainURL## ---- - -# Lists in ##Platform_Name## Block Editor control - -List blocks in the Block Editor component are used to organize content into structured lists. You can render List blocks by setting the `blockType` property as `BulletList`, `NumberedList`, or `Checklist`. Bullet lists and numbered lists are ideal for unordered and ordered items, respectively, while checklist blocks enable interactive to-do lists with checkable items. - -## Configure bullet list - -You can render Bullet List block by setting the `blockType` property as `BulletList`. This block type is used for unordered lists. - -### Configure placeholder - -You can configure placeholder text for block using the `placeholder` in the `properties` property. This text appears when the block is empty. The default placeholder for bullet list is `Add item`. - -## Configure numbered list - -You can render Numbered List block by setting the `blockType` property as `NumberedList`. This block type is used for ordered lists. - -### Configure placeholder - -You can configure placeholder text for block using the `placeholder` in the `properties` property. This text appears when the block is empty. The default placeholder for numbered list is `Add item`. - -## Configure checklist - -You can render Check List block by setting the `blockType` property property as `Checklist`. This block type is used for creating interactive to-do lists. - -### Configure checked state - -For blocks that support selection states such as `Checklist`, you can configure the checked state using the `properties` property with `isChecked`. - -By default, the `isChecked` property is set to `false`. - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/blocks/isChecked/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="IsChecked.cs" %} -{% include code-snippet/blockeditor/blocks/isChecked/ischecked.cs %} -{% endhighlight %} -{% endtabs %} - -![Block isChecked](images/block-ischecked.png) - -### Configure placeholder - -You can configure placeholder text for block using the `placeholder` in the `properties` property. This text appears when the block is empty. The default placeholder for check list is `Todo`. - -## Configure list blocks - -Below example illustrates how to render the different types of list blocks in the Block Editor. - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/blocks/blockTypes/paragraph-block/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="List.cs" %} -{% include code-snippet/blockeditor/blocks/blockTypes/list-block/list.cs %} -{% endhighlight %} -{% endtabs %} - -![List Block](images/block-list.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/built-in-blocks/table-block.md b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/built-in-blocks/table-block.md deleted file mode 100644 index 575de645b3..0000000000 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/built-in-blocks/table-block.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -layout: post -title: Table Block in ##Platform_Name## Block Editor control | Syncfusion -description: Checkout and learn about Table Blocks with ##Platform_Name## Block Editor control of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: BlockEditor -publishingplatform: ##Platform_Name## -documentation: ug -domainurl: ##DomainURL## ---- - -# Table Blocks in ##Platform_Name## Block Editor control - -The Block Editor control allows you to render structured data in rows and columns by setting the block's `blockType` property to `Table`. You can customize the table layout, header, row numbers, and define columns and rows using the `properties` property. - -### Configure Table Block - -For Table blocks, you can configure layout and structure using the `properties` property. This property supports the following options: - -| Property | Description | Default Value | -|----------|-------------|---------------| -| width | Specifies the display width of the table. | `100%` | -| enableHeader | Specifies whether to enable header for the table. | `true` | -| enableRowNumbers | Specifies whether to enable row numbers for the table. | `true` | -| readOnly | Specifies whether to render the table in read-only mode, disabling edits. | `false` | -| columns | Defines the columns of the table, including their types and headers. | `[]` | -| rows | Defines the rows of the table, each containing cells tied to columns. | `[]` | - -This sample demonstrates the configuration of the `Table` block in the Block Editor. diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/built-in-blocks/typography.md b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/built-in-blocks/typography.md deleted file mode 100644 index 5559607792..0000000000 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.NETCORE/built-in-blocks/typography.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -layout: post -title: Typography Blocks in ##Platform_Name## Block Editor control | Syncfusion -description: Checkout and learn about Typography Blocks with ##Platform_Name## Block Editor control of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: BlockEditor -publishingplatform: ##Platform_Name## -documentation: ug -domainurl: ##DomainURL## ---- - -# Typography Blocks in ##Platform_Name## Block Editor control - -Typography blocks are essential for organizing and presenting text-based content in your documents. The Block Editor component supports various structural blocks—such as Paragraph, Heading, Collapsible Block, Divider, Quote, and Callout to help you format and structure content effectively. - -## Configure paragraph block - -You can render Paragraph blocks by setting the `blockType` property as `Paragraph`. Paragraph blocks are the most common type, used for regular text content. They provide standard text formatting options and serve as the default block type. - -The below sample demonstrates the configuration of paragraph block in the Block Editor. - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/blocks/blockTypes/paragraph-block/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Paragraph.cs" %} -{% include code-snippet/blockeditor/blocks/blockTypes/paragraph-block/paragraph.cs %} -{% endhighlight %} -{% endtabs %} - -![Paragraph Block](images/block-paragraph.png) - -### Configure placeholder - -You can configure placeholder text for block using the `placeholder` in the `properties` property. This text appears when the block is empty. The default placeholder for the paragraph block is `Write something or ‘/’ for commands.`. - -The below sample demonstrates the configuration of placeholder in the Block Editor for the paragraph block. - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/blocks/placeholder/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Placeholder.cs" %} -{% include code-snippet/blockeditor/blocks/placeholder/placeholder.cs %} -{% endhighlight %} -{% endtabs %} - -![Block placeholder](images/block-placeholder.png) - -## Configure heading block - -You can render Heading blocks by setting the `blockType` property as `Heading`. Heading blocks are used to create document titles and section headers of varying importance. These blocks help structure your content hierarchically, making it easier to read and navigate. - -### Configure levels - -You can configure the heading blocks using the property `level` in the `properties` property. -The heading level representing a title `level: 1`, heading `level: 2`, subheading `level: 3` and a subsection by `level: 4`. - -The below sample demonstrates the configuration of heading block in the Block Editor. - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/blocks/blockTypes/paragraph-block/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Heading.cs" %} -{% include code-snippet/blockeditor/blocks/blockTypes/heading-block/heading.cs %} -{% endhighlight %} -{% endtabs %} - -![Heading Block](images/block-heading.png) - -### Configure placeholder - -You can configure placeholder text for block using the `placeholder` in the `properties` property. This text appears when the block is empty. The default placeholder for heading block is `Heading{level}`. - -## Configure collapsible blocks - -You can render Collapsible blocks by setting the `blockType` property as `CollapsibleParagraph` or `CollapsibleHeading`. Collapsible blocks allow users to expand or collapse sections, providing a way to hide or show content as needed. - -### Configure levels - -You can configure the CollapsibleHeading using the property `level` inside the `properties` property . The levels can be varied from `level: 1` to `level: 4`. - -### Configure children - -The Block Editor supports hierarchical content structures through the `children` property. This property can be achieved through `properties` property that allows you to create nested blocks, which is applicable only for Callout and Collapsible blocks. - -Child blocks can be configured with all the same properties as top-level blocks. - -### Configure parent id - -To establish a clear parent-child relationship, the `parentId` in the `properties` of each child block must match the `id` of its parent block. - -This structure is essential for maintaining nested relationships within the editor. - -### Configure expanded state - -You can control whether a block is expanded or collapsed using the `isExpanded` in the `properties` property. By default, this property is set to `false`, meaning the block will be collapsed initially. This setting is only applicable to Collapsible blocks. - -The below sample demonstrates the configuration of collapsibleHeading and collapsibleParagraph blocks in the Block Editor. - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/blocks/blockTypes/paragraph-block/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Toggle.cs" %} -{% include code-snippet/blockeditor/blocks/blockTypes/toggle-block/toggle.cs %} -{% endhighlight %} -{% endtabs %} - -![Toggle Block](images/block-toggle.png) - -### Configure placeholder - -You can configure placeholder text for block using the `placeholder` in the `properties` property. This text appears when the block is empty. The default placeholder for collapsible heading and collapsible paragraph is `Collapsible Heading{level}` and `Collapsible Paragraph` respectively. - -## Configure divider block - -Divider blocks insert horizontal lines that separate different sections of content. You can render Divider blocks by setting the `blockType` property as `Divider`. - -The below sample demonstrates the configuration of divider block in the Block Editor. - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/blocks/blockTypes/paragraph-block/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Divider.cs" %} -{% include code-snippet/blockeditor/blocks/blockTypes/divider-block/divider.cs %} -{% endhighlight %} -{% endtabs %} - -![Divider Block](images/block-divider.png) - -## Configure quote block - -You can render Quote blocks by setting the `blockType` property as `Quote`. Quote blocks are specially styled for quotations or excerpts. - -The below sample demonstrates the configuration of quote block in the Block Editor. - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/blocks/blockTypes/paragraph-block/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Quote.cs" %} -{% include code-snippet/blockeditor/blocks/blockTypes/quote-block/quote.cs %} -{% endhighlight %} -{% endtabs %} - -![Quote Block](images/block-quote.png) - -### Configure placeholder - -You can configure placeholder text for block using the `placeholder` in the `properties` property. This text appears when the block is empty. The default placeholder for quote block is `Write a quote`. - -## Configure callout block - -You can render Callout blocks by setting the `blockType` property as `Callout`. They're useful for notes, warnings, or tips that require special attention. - -The below sample demonstrates the configuration of callout block in the Block Editor. - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/blocks/blockTypes/paragraph-block/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Callout.cs" %} -{% include code-snippet/blockeditor/blocks/blockTypes/callout-block/callout.cs %} -{% endhighlight %} -{% endtabs %} - -![Callout Block](images/block-callout.png) - -### Configure children - -The Block Editor supports hierarchical content structures through the `children` in the `properties` property. This property allows you to create nested blocks, which is applicable only for Callout and Collapsible blocks. - -Child blocks can be configured with all the same properties as top-level blocks. - -### Configure parent id - -To establish a clear parent-child relationship, the `parentId` in the `properties` of each child block must match the `id` of its parent block. - -This structure is essential for maintaining nested relationships within the editor. - -The below sample demonstrates the configuration of children in the Block Editor using parentId. - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/blockeditor/blocks/children/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Children.cs" %} -{% include code-snippet/blockeditor/blocks/children/children.cs %} -{% endhighlight %} -{% endtabs %} - -![Block children](images/block-children.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/appearance/appearance.cs b/ej2-asp-core-mvc/code-snippet/block-editor/appearance/appearance.cs similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/appearance/appearance.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/appearance/appearance.cs diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/appearance/razor b/ej2-asp-core-mvc/code-snippet/block-editor/appearance/razor similarity index 94% rename from ej2-asp-core-mvc/code-snippet/blockeditor/appearance/razor rename to ej2-asp-core-mvc/code-snippet/block-editor/appearance/razor index 46eecaaff6..89a7f32790 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/appearance/razor +++ b/ej2-asp-core-mvc/code-snippet/block-editor/appearance/razor @@ -1,7 +1,7 @@ @using Syncfusion.EJ2.BlockEditor
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewData["BlocksData"]).Created("onCreated").Focus("displayOutput('Editor focused. You can now type or edit content.')").Blur("displayOutput('Editor lost focus.')").Render() + @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewData["BlocksData"]).Created("onCreated").Focus("displayOutput('Editor focused. You can now type or edit content.')").Blur("displayOutput('Editor lost focus.')").Render()

Appearance Configuration Demo

diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/appearance/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/appearance/tagHelper similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/appearance/tagHelper rename to ej2-asp-core-mvc/code-snippet/block-editor/appearance/tagHelper diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/callout-block/callout.cs b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/callout-block/callout.cs similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/callout-block/callout.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/callout-block/callout.cs diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/heading-block/razor b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/callout-block/razor similarity index 60% rename from ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/heading-block/razor rename to ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/callout-block/razor index 88dc542283..7c1125a52d 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/heading-block/razor +++ b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/callout-block/razor @@ -1,7 +1,7 @@ @using Syncfusion.EJ2.BlockEditor
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Render() + @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Render()
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/code-block/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/code-block/tagHelper similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/code-block/tagHelper rename to ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/code-block/tagHelper diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/divider-block/divider.cs b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/divider-block/divider.cs similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/divider-block/divider.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/divider-block/divider.cs diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/callout-block/razor b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/divider-block/razor similarity index 60% rename from ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/callout-block/razor rename to ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/divider-block/razor index 88dc542283..7c1125a52d 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/callout-block/razor +++ b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/divider-block/razor @@ -1,7 +1,7 @@ @using Syncfusion.EJ2.BlockEditor
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Render() + @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Render()
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/list-block/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/list-block/tagHelper similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/list-block/tagHelper rename to ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/list-block/tagHelper diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/paragraph-block/paragraph.cs b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/paragraph-block/paragraph.cs similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/paragraph-block/paragraph.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/paragraph-block/paragraph.cs diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/paragraph-block/razor b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/paragraph-block/razor new file mode 100644 index 0000000000..7c1125a52d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/paragraph-block/razor @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.BlockEditor + +
+ @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/paragraph-block/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/paragraph-block/tagHelper similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/paragraph-block/tagHelper rename to ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/paragraph-block/tagHelper diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/quote-block/quote.cs b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/quote-block/quote.cs similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/quote-block/quote.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/quote-block/quote.cs diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/quote-block/razor b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/quote-block/razor new file mode 100644 index 0000000000..7c1125a52d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/quote-block/razor @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.BlockEditor + +
+ @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/quote-block/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/quote-block/tagHelper similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/quote-block/tagHelper rename to ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/quote-block/tagHelper diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/table-block/razor b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/table-block/razor new file mode 100644 index 0000000000..7c1125a52d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/table-block/razor @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.BlockEditor + +
+ @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/table-block/table.cs b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/table-block/table.cs new file mode 100644 index 0000000000..7c8d145372 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/table-block/table.cs @@ -0,0 +1,51 @@ +using Syncfusion.EJ2.BlockEditor; + +public List BlocksData { get; set; } = new List(); + +public class BlockModel +{ + public string id { get; set; } + public string blockType { get; set; } + public object properties { get; set; } + public List content { get; set; } +} + +public ActionResult Quote() +{ + BlocksData.Add(new BlockModel + { + blockType = "Paragraph", + content = new List + { + new { contentType = "Text", content = "You can customize the table further by configuring properties like width, enableHeader to show a header row, enableRowNumbers to display row indices, and readOnly to prevent edits." } + } + }); + BlocksData.Add(new BlockModel + { + blockType = "Table", + properties = new + { + rows = new List + { + new + { + cells = new List + { + new { blocks = new List { new BlockModel { blockType = "Paragraph", content = new List { new { contentType = "Text", content = "Cell 1" } } } } }, + new { blocks = new List { new BlockModel { blockType = "Paragraph", content = new List { new { contentType = "Text", content = "Cell 2" } } } } } + } + }, + new + { + cells = new List + { + new { blocks = new List { new BlockModel { blockType = "Paragraph", content = new List { new { contentType = "Text", content = "Cell 3" } } } } }, + new { blocks = new List { new BlockModel { blockType = "Paragraph", content = new List { new { contentType = "Text", content = "Cell 4" } } } } } + } + } + } + } + }); + ViewBag.BlocksData = BlocksData; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/toggle-block/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/table-block/tagHelper similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/toggle-block/tagHelper rename to ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/table-block/tagHelper diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/template-block/razor b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/template-block/razor similarity index 91% rename from ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/template-block/razor rename to ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/template-block/razor index aa9cf48fa0..0ef93c002e 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/template-block/razor +++ b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/template-block/razor @@ -1,7 +1,7 @@ @using Syncfusion.EJ2.BlockEditor
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Render() + @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Render()
\ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/children/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/toggle-block/tagHelper similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/blocks/children/tagHelper rename to ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/toggle-block/tagHelper diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/toggle-block/toggle.cs b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/toggle-block/toggle.cs similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/toggle-block/toggle.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/toggle-block/toggle.cs diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/blocks/children/children.cs b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/children/children.cs new file mode 100644 index 0000000000..53b45c7dcd --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/children/children.cs @@ -0,0 +1,100 @@ +using Syncfusion.EJ2.BlockEditor; + +public List BlocksData { get; set; } = new List(); + +public class BlockModel +{ + public string id { get; set; } + public string blockType { get; set; } + public object properties { get; set; } + public List content { get; set; } + public string parentId { get; set; } + public List children { get; set; } + public int indent { get; set; } +} + +public ActionResult Children() +{ + BlocksData.Add(new BlockModel + { + blockType = "Callout", + properties = new + { + children = new List() + { + new BlockModel() + { + parentId = "security-callout", + blockType = "Heading", + properties = new { level = 3 }, + content = new List() + { + new + { + contentType = "Text", + content = "Security Notice" + } + } + }, + + new BlockModel + { + parentId = "security-callout", + blockType = "Paragraph", + content = new List() + { + new + { + contentType = "Text", + content = "Always validate user input before processing to prevent security vulnerabilities." + } + } + }, + new BlockModel + { + parentId = "security-callout", + blockType = "Paragraph", + indent = 1, + content = new List() + { + new + { + contentType = "Text", + content = "Use HTTPS for all data transmission" + } + } + }, + new BlockModel + { + parentId = "security-callout", + blockType = "Paragraph", + indent = 1, + content = new List() + { + new + { + contentType = "Text", + content = "Implement proper authentication mechanisms" + } + } + }, + new BlockModel + { + parentId = "security-callout", + blockType = "Paragraph", + indent = 1, + content = new List() + { + new + { + contentType = "Text", + content = "Regularly update dependencies and libraries" + } + } + } + } + } + }); + ViewBag.BlocksData = BlocksData; + return View(); +} diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/blocks/children/razor b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/children/razor new file mode 100644 index 0000000000..7c1125a52d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/children/razor @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.BlockEditor + +
+ @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/blocks/children/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/children/tagHelper new file mode 100644 index 0000000000..a1cba0eeb6 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/children/tagHelper @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.BlockEditor + +
+ +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/cssClass/cssclass.cs b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/cssClass/cssclass.cs similarity index 98% rename from ej2-asp-core-mvc/code-snippet/blockeditor/blocks/cssClass/cssclass.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/blocks/cssClass/cssclass.cs index 4c9a4bf944..75320e7a7e 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/cssClass/cssclass.cs +++ b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/cssClass/cssclass.cs @@ -6,6 +6,7 @@ public class BlockModel { public string id { get; set; } public string blockType { get; set; } + public string CssClass { get; set; } public object properties { get; set; } public List content { get; set; } } diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/cssClass/razor b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/cssClass/razor similarity index 92% rename from ej2-asp-core-mvc/code-snippet/blockeditor/blocks/cssClass/razor rename to ej2-asp-core-mvc/code-snippet/block-editor/blocks/cssClass/razor index a366261e4c..1d4176fd3a 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/cssClass/razor +++ b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/cssClass/razor @@ -1,7 +1,7 @@ @using Syncfusion.EJ2.BlockEditor
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Render() + @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Render()
\ No newline at end of file + diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/indent/indent.cs b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/indent/indent.cs similarity index 93% rename from ej2-asp-core-mvc/code-snippet/blockeditor/blocks/indent/indent.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/blocks/indent/indent.cs index 90deb56e25..0ef98cce75 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/indent/indent.cs +++ b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/indent/indent.cs @@ -8,6 +8,7 @@ public class BlockModel public string blockType { get; set; } public object properties { get; set; } public List content { get; set; } + public int indent { get; set; } } public ActionResult Indent() @@ -22,7 +23,7 @@ public ActionResult Indent() content = "This is a paragraph with no indentation (indent: 0)" } }, - Indent = 0 + indent= 0 }); BlocksData.Add(new BlockModel { @@ -35,7 +36,7 @@ public ActionResult Indent() content = "This paragraph has one level of indentation (indent: 1)" } }, - Indent = 1 + indent= 1 }); BlocksData.Add(new BlockModel { @@ -48,7 +49,7 @@ public ActionResult Indent() content = "This paragraph has two levels of indentation (indent: 2)" } }, - Indent = 2 + indent= 2 }); BlocksData.Add(new BlockModel { @@ -61,7 +62,7 @@ public ActionResult Indent() content = "Back to no indentation" } }, - Indent = 0 + indent = 0 }); ViewBag.BlocksData = BlocksData; return View(); diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/blocks/indent/razor b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/indent/razor new file mode 100644 index 0000000000..7c1125a52d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/indent/razor @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.BlockEditor + +
+ @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/blocks/indent/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/indent/tagHelper new file mode 100644 index 0000000000..5d0ba4071b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/indent/tagHelper @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.BlockEditor + +
+ +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/isChecked/ischecked.cs b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/isChecked/ischecked.cs similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/blocks/isChecked/ischecked.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/blocks/isChecked/ischecked.cs diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/blocks/isChecked/razor b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/isChecked/razor new file mode 100644 index 0000000000..7c1125a52d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/isChecked/razor @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.BlockEditor + +
+ @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/blocks/isChecked/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/isChecked/tagHelper new file mode 100644 index 0000000000..5d0ba4071b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/isChecked/tagHelper @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.BlockEditor + +
+ +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/label-settings/label.cs b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/label-settings/label.cs similarity index 97% rename from ej2-asp-core-mvc/code-snippet/blockeditor/blocks/label-settings/label.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/blocks/label-settings/label.cs index fa105a2cc4..74296ac59a 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/label-settings/label.cs +++ b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/label-settings/label.cs @@ -1,7 +1,7 @@ using Syncfusion.EJ2.BlockEditor; public List BlocksData { get; set; } = new List(); -public LabelSettingsModel labelSettings { get; set; } +public LabelSettings labelSettings { get; set; } private List labelItems { get; set; } public class BlockModel @@ -179,10 +179,10 @@ public ActionResult Label() groupHeader = "Priority" } }; - labelSettings = new object() + labelSettings = new LabelSettings() { - triggerChar = "#", - labelItems = labelItems + TriggerChar = "#", + Items = labelItems }; ViewBag.labelSettings = labelSettings; ViewBag.BlocksData = BlocksData; diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/blocks/label-settings/razor b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/label-settings/razor new file mode 100644 index 0000000000..358d4bebee --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/label-settings/razor @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.BlockEditor + +
+ @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).LabelSettings(ViewBag["labelSettings"]).Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/label-settings/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/label-settings/tagHelper similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/blocks/label-settings/tagHelper rename to ej2-asp-core-mvc/code-snippet/block-editor/blocks/label-settings/tagHelper diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/placeholder/placeholder.cs b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/placeholder/placeholder.cs similarity index 66% rename from ej2-asp-core-mvc/code-snippet/blockeditor/blocks/placeholder/placeholder.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/blocks/placeholder/placeholder.cs index 2a18d85493..5f94366bea 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/placeholder/placeholder.cs +++ b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/placeholder/placeholder.cs @@ -21,15 +21,12 @@ public ActionResult Placeholder() } } }); - BlocksData.Add(new BlockModel() { - blockType = "Paragraph", - content = new List(){ - new{ - contentType = "Text", - props= new { placeholder = "Start typing your notes or press \"/\" for commands..." } - } - } - }); + BlocksData.Add(new BlockModel() + { + + blockType = "Paragraph", + properties = new { placeholder = "Start typing your notes or press \"/\" for commands..." } + }); ViewBag.BlocksData = BlocksData; return View(); -} \ No newline at end of file +} diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/blocks/placeholder/razor b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/placeholder/razor new file mode 100644 index 0000000000..7c1125a52d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/placeholder/razor @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.BlockEditor + +
+ @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/blocks/placeholder/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/placeholder/tagHelper new file mode 100644 index 0000000000..5d0ba4071b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/placeholder/tagHelper @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.BlockEditor + +
+ +
+ + diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/drag-drop/dragdrop.cs b/ej2-asp-core-mvc/code-snippet/block-editor/drag-drop/dragdrop.cs similarity index 93% rename from ej2-asp-core-mvc/code-snippet/blockeditor/drag-drop/dragdrop.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/drag-drop/dragdrop.cs index 659a83996b..4506413a4a 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/drag-drop/dragdrop.cs +++ b/ej2-asp-core-mvc/code-snippet/block-editor/drag-drop/dragdrop.cs @@ -11,7 +11,6 @@ public class BlockModel public ActionResult DragDrop() { BlocksData.Add(new BlockModel() { - id = "block-1", blockType = "Heading", properties = new { level = 1}, content = new List() @@ -23,7 +22,6 @@ public ActionResult DragDrop() } }); BlocksData.Add(new BlockModel() { - id = "block-2", blockType = "Paragraph", content = new List() { @@ -34,7 +32,6 @@ public ActionResult DragDrop() } }); BlocksData.Add(new BlockModel() { - id = "block-3", blockType = "BulletList", content = new List() { @@ -45,7 +42,6 @@ public ActionResult DragDrop() } }); BlocksData.Add(new BlockModel() { - id = "block-4", blockType = "NumberedList", content = new List() { @@ -56,7 +52,6 @@ public ActionResult DragDrop() } }); BlocksData.Add(new BlockModel() { - id = "block-5", blockType = "NumberedList", content = new List() { @@ -68,4 +63,4 @@ public ActionResult DragDrop() }); ViewBag.BlocksData = BlocksData; return View(); -} \ No newline at end of file +} diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/drag-drop/razor b/ej2-asp-core-mvc/code-snippet/block-editor/drag-drop/razor new file mode 100644 index 0000000000..85dddedaa6 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/block-editor/drag-drop/razor @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.BlockEditor + +
+ @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).EnableDragAndDrop(true).Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/drag-drop/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/drag-drop/tagHelper similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/drag-drop/tagHelper rename to ej2-asp-core-mvc/code-snippet/block-editor/drag-drop/tagHelper diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/block-action/blockAction.cs b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/block-action/blockAction.cs similarity index 90% rename from ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/block-action/blockAction.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/block-action/blockAction.cs index 3976608bf6..99dc05b95a 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/block-action/blockAction.cs +++ b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/block-action/blockAction.cs @@ -15,7 +15,6 @@ public class BlockModel public ActionResult BlockAction() { BlocksData.Add(new BlockModel() { - id = "title-block", blockType = "Heading", properties = new { level = 1}, content = new List() @@ -28,7 +27,6 @@ public ActionResult BlockAction() }); BlocksData.Add(new BlockModel() { - id = "intro-block", blockType = "Quote", content = new List() { @@ -67,13 +65,12 @@ public ActionResult BlockAction() EnableTooltip = false, PopupHeight = "110px", PopupWidth = "180px", - Open = "open", - Close = "close", - ItemClick = "itemClick", + Opening = "open", + Closing = "close", + ItemSelect= "itemClick", Items = BlockItems }; - ViewData.BlockActionMenuSettings = BlockActionMenuSettings; ViewBag.BlockItems = BlockItems; ViewBag.BlocksData = BlocksData; return View(); -} \ No newline at end of file +} diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/block-action/razor b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/block-action/razor similarity index 90% rename from ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/block-action/razor rename to ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/block-action/razor index 6c044fc17e..78ef670317 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/block-action/razor +++ b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/block-action/razor @@ -1,7 +1,7 @@ @using Syncfusion.EJ2.BlockEditor
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewData["BlocksData"]).BlockActionsMenu((BlockActionMenuSettings)ViewData["BlockActionMenuSettings"]).Render() + @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewData["BlocksData"]).BlockActionsMenu((BlockActionMenuSettings)ViewData["BlockActionMenuSettings"]).Render()

Block Action Menu Configuration Demo

diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/block-action/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/block-action/tagHelper similarity index 88% rename from ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/block-action/tagHelper rename to ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/block-action/tagHelper index 3809abb581..0e2bdb7230 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/block-action/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/block-action/tagHelper @@ -1,13 +1,7 @@ @using Syncfusion.EJ2.BlockEditor
- - - @foreach (var block in ViewBag.BlocksData) - { - - } - +
diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/context-menu/contextMenu.cs b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/context-menu/contextMenu.cs similarity index 95% rename from ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/context-menu/contextMenu.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/context-menu/contextMenu.cs index 2cfe674f08..2d8b1d9e66 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/context-menu/contextMenu.cs +++ b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/context-menu/contextMenu.cs @@ -99,15 +99,13 @@ public ActionResult ContextMenu() { Enable = true, ShowItemOnClick = true, - BeforeClose = "beforeClose", - BeforeOpen = "beforeOpen", - Open = "open", - Close = "close", - ItemClick = "itemClick", + Opening = "open", + Closing = "close", + ItemSelect = "itemClick", Items = ContextMenuItems }; ViewData["ContextMenuItems"] = ContextMenuItems; ViewData["ContextMenuSettings"] = ContextMenuSettings; ViewData["BlocksData"] = BlocksData; return View(); -} \ No newline at end of file +} diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/context-menu/razor b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/context-menu/razor similarity index 91% rename from ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/context-menu/razor rename to ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/context-menu/razor index 997c5f12d2..b39ef25fee 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/context-menu/razor +++ b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/context-menu/razor @@ -1,7 +1,7 @@ @using Syncfusion.EJ2.BlockEditor
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewData["BlocksData"]).ContextMenu((ContextMenuSettings)ViewData["ContextMenuSettings"]).Render() + @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewData["BlocksData"]).ContextMenu((ContextMenuSettings)ViewData["ContextMenuSettings"]).Render()

Context Menu Configuration Demo

diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/context-menu/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/context-menu/tagHelper similarity index 88% rename from ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/context-menu/tagHelper rename to ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/context-menu/tagHelper index 5d6e8e428d..c985fdb9a5 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/context-menu/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/context-menu/tagHelper @@ -1,13 +1,7 @@ @using Syncfusion.EJ2.BlockEditor
- - - @foreach (var block in ViewBag.BlocksData) - { - - } - +
diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/inline-toolbar/inlineToolbar.cs b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/inline-toolbar/inlineToolbar.cs similarity index 92% rename from ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/inline-toolbar/inlineToolbar.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/inline-toolbar/inlineToolbar.cs index a106a84007..7d94e77c94 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/inline-toolbar/inlineToolbar.cs +++ b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/inline-toolbar/inlineToolbar.cs @@ -58,15 +58,12 @@ public ActionResult InlineToolbar() InlineToolbarSettings = new InlineToolbarSettings() { Enable = true, - EnableTooltip = true, - Width = "80px", - Open = "open", - Close = "close", - ItemClicked = "itemClicked", + PopupWidth = "80px", + ItemClick = "itemClicked", Items = InlineToolbarItems }; ViewData["InlineToolbarItems"] = InlineToolbarItems; ViewData["InlineToolbarSettings"] = InlineToolbarSettings; ViewData["BlocksData"] = BlocksData; return View(); -} \ No newline at end of file +} diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/inline-toolbar/razor b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/inline-toolbar/razor similarity index 90% rename from ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/inline-toolbar/razor rename to ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/inline-toolbar/razor index e0849376fe..66403b3387 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/inline-toolbar/razor +++ b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/inline-toolbar/razor @@ -1,7 +1,7 @@ @using Syncfusion.EJ2.BlockEditor
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewData["BlocksData"]).InlineToolbar((InlineToolbarSettings)ViewData["InlineToolbarSettings"]).Render() + @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewData["BlocksData"]).InlineToolbar((InlineToolbarSettings)ViewData["InlineToolbarSettings"]).Render()

Inline Toolbar Configuration Demo

diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/inline-toolbar/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/inline-toolbar/tagHelper similarity index 88% rename from ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/inline-toolbar/tagHelper rename to ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/inline-toolbar/tagHelper index 4b7da0b05c..a8916a29f3 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/inline-toolbar/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/inline-toolbar/tagHelper @@ -1,13 +1,7 @@ @using Syncfusion.EJ2.BlockEditor
- - - @foreach (var block in ViewBag.BlocksData) - { - - } - +
diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/slash-command/razor b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/slash-command/razor similarity index 91% rename from ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/slash-command/razor rename to ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/slash-command/razor index eb63c325b6..90d66a3888 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/slash-command/razor +++ b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/slash-command/razor @@ -1,7 +1,7 @@ @using Syncfusion.EJ2.BlockEditor
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewData["BlocksData"]).CommandMenu((CommandMenuSettings)ViewData["CommandMenuSettings"]).Render() + @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewData["BlocksData"]).CommandMenu((CommandMenuSettings)ViewData["CommandMenuSettings"]).Render()

Slash Command Menu Configuration Demo

diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/slash-command/slashCommand.cs b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/slash-command/slashCommand.cs similarity index 98% rename from ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/slash-command/slashCommand.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/slash-command/slashCommand.cs index 69a3eb6ec6..28e5097344 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/slash-command/slashCommand.cs +++ b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/slash-command/slashCommand.cs @@ -46,7 +46,6 @@ public ActionResult SlashCommand() }; CommandMenuSettings = new CommandMenuSettings() { - EnableTooltip = false, PopupWidth = "350px", PopupHeight = "400px", ItemSelect = "itemSelect", @@ -57,4 +56,4 @@ public ActionResult SlashCommand() ViewData["CommandMenuSettings"] = CommandMenuSettings; ViewData["BlocksData"] = BlocksData; return View(); -} \ No newline at end of file +} diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/slash-command/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/slash-command/tagHelper similarity index 88% rename from ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/slash-command/tagHelper rename to ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/slash-command/tagHelper index 5515138e51..4e987f65eb 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/editor-menus/slash-command/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/slash-command/tagHelper @@ -1,13 +1,7 @@ @using Syncfusion.EJ2.BlockEditor
- - - @foreach (var block in ViewBag.BlocksData) - { - - } - +
diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/getting-started/gettingstarted.cs b/ej2-asp-core-mvc/code-snippet/block-editor/getting-started/gettingstarted.cs similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/getting-started/gettingstarted.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/getting-started/gettingstarted.cs diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/getting-started/razor b/ej2-asp-core-mvc/code-snippet/block-editor/getting-started/razor similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/getting-started/razor rename to ej2-asp-core-mvc/code-snippet/block-editor/getting-started/razor diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/getting-started/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/getting-started/tagHelper similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/getting-started/tagHelper rename to ej2-asp-core-mvc/code-snippet/block-editor/getting-started/tagHelper diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/globalization/locale/locale.cs b/ej2-asp-core-mvc/code-snippet/block-editor/globalization/locale/locale.cs similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/globalization/locale/locale.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/globalization/locale/locale.cs diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/globalization/locale/razor b/ej2-asp-core-mvc/code-snippet/block-editor/globalization/locale/razor new file mode 100644 index 0000000000..b9e56842c4 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/block-editor/globalization/locale/razor @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.BlockEditor + +
+ @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Locale("de").Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/globalization/locale/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/globalization/locale/tagHelper similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/globalization/locale/tagHelper rename to ej2-asp-core-mvc/code-snippet/block-editor/globalization/locale/tagHelper diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/globalization/rtl/razor b/ej2-asp-core-mvc/code-snippet/block-editor/globalization/rtl/razor new file mode 100644 index 0000000000..58f9359d25 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/block-editor/globalization/rtl/razor @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.BlockEditor + +
+ @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).EnableRtl(true).Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/globalization/rtl/rtl.cs b/ej2-asp-core-mvc/code-snippet/block-editor/globalization/rtl/rtl.cs similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/globalization/rtl/rtl.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/globalization/rtl/rtl.cs diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/globalization/rtl/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/globalization/rtl/tagHelper similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/globalization/rtl/tagHelper rename to ej2-asp-core-mvc/code-snippet/block-editor/globalization/rtl/tagHelper diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/methods/block/block.cs b/ej2-asp-core-mvc/code-snippet/block-editor/methods/block/block.cs similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/methods/block/block.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/methods/block/block.cs diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/methods/block/razor b/ej2-asp-core-mvc/code-snippet/block-editor/methods/block/razor similarity index 97% rename from ej2-asp-core-mvc/code-snippet/blockeditor/methods/block/razor rename to ej2-asp-core-mvc/code-snippet/block-editor/methods/block/razor index 3f158d324d..46761cd97f 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/methods/block/razor +++ b/ej2-asp-core-mvc/code-snippet/block-editor/methods/block/razor @@ -1,7 +1,7 @@ @using Syncfusion.EJ2.BlockEditor
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewData["BlocksData"]).Created("onCreated").Render() + @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewData["BlocksData"]).Created("onCreated").Render()

Block Management Methods

diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/methods/block/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/methods/block/tagHelper similarity index 93% rename from ej2-asp-core-mvc/code-snippet/blockeditor/methods/block/tagHelper rename to ej2-asp-core-mvc/code-snippet/block-editor/methods/block/tagHelper index 0e558a62ea..229dc43cfb 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/methods/block/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/block-editor/methods/block/tagHelper @@ -1,13 +1,7 @@ @using Syncfusion.EJ2.BlockEditor
- - - @foreach (var block in ViewBag.BlocksData) - { - - } - +

Block Management Methods

diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/methods/data/data.cs b/ej2-asp-core-mvc/code-snippet/block-editor/methods/data/data.cs similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/methods/data/data.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/methods/data/data.cs diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/methods/data/razor b/ej2-asp-core-mvc/code-snippet/block-editor/methods/data/razor similarity index 96% rename from ej2-asp-core-mvc/code-snippet/blockeditor/methods/data/razor rename to ej2-asp-core-mvc/code-snippet/block-editor/methods/data/razor index 3279f44ed9..0d02130622 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/methods/data/razor +++ b/ej2-asp-core-mvc/code-snippet/block-editor/methods/data/razor @@ -1,7 +1,7 @@ @using Syncfusion.EJ2.BlockEditor
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewData["BlocksData"]).Created("onCreated").Render() + @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewData["BlocksData"]).Created("onCreated").Render()

Data Export Methods

diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/methods/data/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/methods/data/tagHelper similarity index 91% rename from ej2-asp-core-mvc/code-snippet/blockeditor/methods/data/tagHelper rename to ej2-asp-core-mvc/code-snippet/block-editor/methods/data/tagHelper index 444422c1ee..3c58605f98 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/methods/data/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/block-editor/methods/data/tagHelper @@ -1,13 +1,7 @@ @using Syncfusion.EJ2.BlockEditor
- - - @foreach (var block in ViewBag.BlocksData) - { - - } - +

Data Export Methods

diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/methods/formatting/formatting.cs b/ej2-asp-core-mvc/code-snippet/block-editor/methods/formatting/formatting.cs similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/methods/formatting/formatting.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/methods/formatting/formatting.cs diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/methods/formatting/razor b/ej2-asp-core-mvc/code-snippet/block-editor/methods/formatting/razor similarity index 96% rename from ej2-asp-core-mvc/code-snippet/blockeditor/methods/formatting/razor rename to ej2-asp-core-mvc/code-snippet/block-editor/methods/formatting/razor index 95d2923900..e9701f3711 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/methods/formatting/razor +++ b/ej2-asp-core-mvc/code-snippet/block-editor/methods/formatting/razor @@ -1,7 +1,7 @@ @using Syncfusion.EJ2.BlockEditor
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewData["BlocksData"]).Created("onCreated").Render() + @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewData["BlocksData"]).Created("onCreated").Render()

Formatting Methods

diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/methods/formatting/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/methods/formatting/tagHelper similarity index 91% rename from ej2-asp-core-mvc/code-snippet/blockeditor/methods/formatting/tagHelper rename to ej2-asp-core-mvc/code-snippet/block-editor/methods/formatting/tagHelper index cf5a7e4c5b..13c53ae5a3 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/methods/formatting/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/block-editor/methods/formatting/tagHelper @@ -1,14 +1,7 @@ @using Syncfusion.EJ2.BlockEditor
- - - @foreach (var block in ViewBag.BlocksData) - { - - } - - +

Formatting Methods

diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/methods/selection/razor b/ej2-asp-core-mvc/code-snippet/block-editor/methods/selection/razor similarity index 97% rename from ej2-asp-core-mvc/code-snippet/blockeditor/methods/selection/razor rename to ej2-asp-core-mvc/code-snippet/block-editor/methods/selection/razor index cb487d5cc2..d1186f836e 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/methods/selection/razor +++ b/ej2-asp-core-mvc/code-snippet/block-editor/methods/selection/razor @@ -1,7 +1,7 @@ @using Syncfusion.EJ2.BlockEditor
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewData["BlocksData"]).Created("onCreated").Render() + @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewData["BlocksData"]).Created("onCreated").Render()

Selection and Cursor Methods

diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/methods/selection/selection.cs b/ej2-asp-core-mvc/code-snippet/block-editor/methods/selection/selection.cs similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/methods/selection/selection.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/methods/selection/selection.cs diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/methods/selection/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/methods/selection/tagHelper similarity index 94% rename from ej2-asp-core-mvc/code-snippet/blockeditor/methods/selection/tagHelper rename to ej2-asp-core-mvc/code-snippet/block-editor/methods/selection/tagHelper index 0c8654a4e8..14253c3bb6 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/methods/selection/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/block-editor/methods/selection/tagHelper @@ -1,14 +1,7 @@ @using Syncfusion.EJ2.BlockEditor
- - - @foreach (var block in ViewBag.BlocksData) - { - - } - - +

Selection and Cursor Methods

diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/paste-cleanup/allowedStyle/allowedstyle.cs b/ej2-asp-core-mvc/code-snippet/block-editor/paste-cleanup/allowedStyle/allowedstyle.cs similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/paste-cleanup/allowedStyle/allowedstyle.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/paste-cleanup/allowedStyle/allowedstyle.cs diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/paste-cleanup/allowedStyle/razor b/ej2-asp-core-mvc/code-snippet/block-editor/paste-cleanup/allowedStyle/razor similarity index 88% rename from ej2-asp-core-mvc/code-snippet/blockeditor/paste-cleanup/allowedStyle/razor rename to ej2-asp-core-mvc/code-snippet/block-editor/paste-cleanup/allowedStyle/razor index 2b46b98624..c062f46f92 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/paste-cleanup/allowedStyle/razor +++ b/ej2-asp-core-mvc/code-snippet/block-editor/paste-cleanup/allowedStyle/razor @@ -15,7 +15,7 @@ Copy content from the test area above and paste it into the editor to see the cl }
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewData["BlocksData"]).PasteSettings(new PasteSettings() { AllowedStyles = allowedStyles, DeniedTags = deniedTags }).AfterPaste("function(e){ displayOutput(`After Paste Event: Processed content length: ${e.content.length} characters`); }").Created("onEditorCreated").Render() + @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewData["BlocksData"]).PasteSettings(new PasteSettings() { AllowedStyles = allowedStyles, DeniedTags = deniedTags }).AfterPaste("function(e){ displayOutput(`After Paste Event: Processed content length: ${e.content.length} characters`); }").Created("onEditorCreated").Render()

Test Content to Copy and Paste:

diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/paste-cleanup/allowedStyle/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/paste-cleanup/allowedStyle/tagHelper similarity index 88% rename from ej2-asp-core-mvc/code-snippet/blockeditor/paste-cleanup/allowedStyle/tagHelper rename to ej2-asp-core-mvc/code-snippet/block-editor/paste-cleanup/allowedStyle/tagHelper index 31f5b9db78..273f02a1f2 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/paste-cleanup/allowedStyle/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/block-editor/paste-cleanup/allowedStyle/tagHelper @@ -15,13 +15,7 @@ Copy content from the test area above and paste it into the editor to see the cl }
- - - @foreach (var block in ViewBag.BlocksData) - { - - } - +
diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/paste-cleanup/plainText/plaintext.cs b/ej2-asp-core-mvc/code-snippet/block-editor/paste-cleanup/plainText/plaintext.cs similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/paste-cleanup/plainText/plaintext.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/paste-cleanup/plainText/plaintext.cs diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/paste-cleanup/plainText/razor b/ej2-asp-core-mvc/code-snippet/block-editor/paste-cleanup/plainText/razor similarity index 88% rename from ej2-asp-core-mvc/code-snippet/blockeditor/paste-cleanup/plainText/razor rename to ej2-asp-core-mvc/code-snippet/block-editor/paste-cleanup/plainText/razor index c837c942c5..7ad2509c8a 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/paste-cleanup/plainText/razor +++ b/ej2-asp-core-mvc/code-snippet/block-editor/paste-cleanup/plainText/razor @@ -15,7 +15,7 @@ }
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewData["BlocksData"]).PasteSettings(new PasteSettings() { KeepFormat = false, PlainText = true }).AfterPaste("function(e){ displayOutput(`After Paste Event: Processed content length: ${e.content.length} characters`); }").Created("onEditorCreated").Render() + @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewData["BlocksData"]).PasteSettings(new PasteSettings() { KeepFormat = false, PlainText = true }).AfterPaste("function(e){ displayOutput(`After Paste Event: Processed content length: ${e.content.length} characters`); }").Created("onEditorCreated").Render()

Test Content to Copy and Paste:

diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/paste-cleanup/plainText/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/paste-cleanup/plainText/tagHelper similarity index 90% rename from ej2-asp-core-mvc/code-snippet/blockeditor/paste-cleanup/plainText/tagHelper rename to ej2-asp-core-mvc/code-snippet/block-editor/paste-cleanup/plainText/tagHelper index b983fc9cd3..4aa1e0b514 100644 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/paste-cleanup/plainText/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/block-editor/paste-cleanup/plainText/tagHelper @@ -15,13 +15,7 @@ Copy content from the test area above and paste it into the editor to see the cl }
- - - @foreach (var block in ViewBag.BlocksData) - { - - } - +
diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/undo-redo/razor b/ej2-asp-core-mvc/code-snippet/block-editor/undo-redo/razor new file mode 100644 index 0000000000..cb60425486 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/block-editor/undo-redo/razor @@ -0,0 +1,11 @@ +@using Syncfusion.EJ2.BlockEditor + +
+ @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).UndoRedoStack(20).Render() +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/undo-redo/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/undo-redo/tagHelper similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/undo-redo/tagHelper rename to ej2-asp-core-mvc/code-snippet/block-editor/undo-redo/tagHelper diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/undo-redo/undoredo.cs b/ej2-asp-core-mvc/code-snippet/block-editor/undo-redo/undoredo.cs similarity index 100% rename from ej2-asp-core-mvc/code-snippet/blockeditor/undo-redo/undoredo.cs rename to ej2-asp-core-mvc/code-snippet/block-editor/undo-redo/undoredo.cs diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/image-block/razor b/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/image-block/razor deleted file mode 100644 index 88dc542283..0000000000 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/image-block/razor +++ /dev/null @@ -1,11 +0,0 @@ -@using Syncfusion.EJ2.BlockEditor - -
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Render() -
- - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/list-block/razor b/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/list-block/razor deleted file mode 100644 index 88dc542283..0000000000 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/list-block/razor +++ /dev/null @@ -1,11 +0,0 @@ -@using Syncfusion.EJ2.BlockEditor - -
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Render() -
- - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/paragraph-block/razor b/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/paragraph-block/razor deleted file mode 100644 index 88dc542283..0000000000 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/paragraph-block/razor +++ /dev/null @@ -1,11 +0,0 @@ -@using Syncfusion.EJ2.BlockEditor - -
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Render() -
- - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/quote-block/razor b/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/quote-block/razor deleted file mode 100644 index 88dc542283..0000000000 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/quote-block/razor +++ /dev/null @@ -1,11 +0,0 @@ -@using Syncfusion.EJ2.BlockEditor - -
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Render() -
- - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/toggle-block/razor b/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/toggle-block/razor deleted file mode 100644 index 88dc542283..0000000000 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/toggle-block/razor +++ /dev/null @@ -1,11 +0,0 @@ -@using Syncfusion.EJ2.BlockEditor - -
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Render() -
- - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/children/children.cs b/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/children/children.cs deleted file mode 100644 index 0d5819c147..0000000000 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/children/children.cs +++ /dev/null @@ -1,104 +0,0 @@ -using Syncfusion.EJ2.BlockEditor; - -public List BlocksData { get; set; } = new List(); - -public class BlockModel -{ - public string id { get; set; } - public string blockType { get; set; } - public object properties { get; set; } - public List content { get; set; } - public string parentId { get; set; } - public int indent { get; set; } -} - -public ActionResult Children() -{ - BlocksData.Add(new BlockModel - { - id = "security-callout", - blockType = "Callout", - properties = new { - children = new List() - { - new BlockModel() - { - id = "security-title", - parentId = "security-callout", - blockType = "Heading", - properties = new { level = 3 }, - content = new List() - { - new - { - contentType = "Text", - content = "Security Notice" - } - } - } - } - } - }); - BlocksData.Add(new BlockModel - { - id = "security-warning", - parentId = "security-callout", - blockType = "Paragraph", - content = new List() - { - new - { - id = "paragraph1-content", - contentType = "Text", - content = "Always validate user input before processing to prevent security vulnerabilities." - } - } - }); - BlocksData.Add(new BlockModel - { - id = "security-tips", - parentId = "security-callout", - blockType = "Paragraph", - indent = 1, - content = new List() - { - new - { - contentType = "Text", - content = "Use HTTPS for all data transmission" - } - } - }); - BlocksData.Add(new BlockModel - { - id = "security-tips-2", - parentId = "security-callout", - blockType = "Paragraph", - indent = 1, - content = new List() - { - new - { - contentType = "Text", - content = "Implement proper authentication mechanisms" - } - } - }); - BlocksData.Add(new BlockModel - { - id = "security-tips-3", - parentId = "security-callout", - blockType = "Paragraph", - indent = 1, - content = new List() - { - new - { - contentType = "Text", - content = "Regularly update dependencies and libraries" - } - } - }); - ViewBag.BlocksData = BlocksData; - return View(); -} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/children/razor b/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/children/razor deleted file mode 100644 index 88dc542283..0000000000 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/children/razor +++ /dev/null @@ -1,11 +0,0 @@ -@using Syncfusion.EJ2.BlockEditor - -
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Render() -
- - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/indent/razor b/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/indent/razor deleted file mode 100644 index 88dc542283..0000000000 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/indent/razor +++ /dev/null @@ -1,11 +0,0 @@ -@using Syncfusion.EJ2.BlockEditor - -
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Render() -
- - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/indent/tagHelper b/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/indent/tagHelper deleted file mode 100644 index 32807f8690..0000000000 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/indent/tagHelper +++ /dev/null @@ -1,18 +0,0 @@ -@using Syncfusion.EJ2.BlockEditor - -
- - - @foreach (var block in ViewBag.BlocksData) - { - - } - - -
- - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/isChecked/razor b/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/isChecked/razor deleted file mode 100644 index 88dc542283..0000000000 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/isChecked/razor +++ /dev/null @@ -1,11 +0,0 @@ -@using Syncfusion.EJ2.BlockEditor - -
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Render() -
- - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/isChecked/tagHelper b/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/isChecked/tagHelper deleted file mode 100644 index 906573e08a..0000000000 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/isChecked/tagHelper +++ /dev/null @@ -1,18 +0,0 @@ -@using Syncfusion.EJ2.BlockEditor - -
- - - @foreach (var block in ViewBag.BlocksData) - { - - } - - -
- - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/label-settings/razor b/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/label-settings/razor deleted file mode 100644 index 326ce3d29d..0000000000 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/label-settings/razor +++ /dev/null @@ -1,11 +0,0 @@ -@using Syncfusion.EJ2.BlockEditor - -
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).LabelSettings(ViewBag["labelSettings"]).Render() -
- - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/placeholder/razor b/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/placeholder/razor deleted file mode 100644 index 88dc542283..0000000000 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/placeholder/razor +++ /dev/null @@ -1,11 +0,0 @@ -@using Syncfusion.EJ2.BlockEditor - -
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Render() -
- - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/placeholder/tagHelper b/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/placeholder/tagHelper deleted file mode 100644 index 35d8fec1f6..0000000000 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/blocks/placeholder/tagHelper +++ /dev/null @@ -1,18 +0,0 @@ -@using Syncfusion.EJ2.BlockEditor - -
- - - @foreach (var block in ViewBag.BlocksData) - { - - } - - -
- - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/drag-drop/razor b/ej2-asp-core-mvc/code-snippet/blockeditor/drag-drop/razor deleted file mode 100644 index ba292477f6..0000000000 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/drag-drop/razor +++ /dev/null @@ -1,11 +0,0 @@ -@using Syncfusion.EJ2.BlockEditor - -
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).EnableDragAndDrop(true).Render() -
- - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/globalization/locale/razor b/ej2-asp-core-mvc/code-snippet/blockeditor/globalization/locale/razor deleted file mode 100644 index 060e3ae7cf..0000000000 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/globalization/locale/razor +++ /dev/null @@ -1,11 +0,0 @@ -@using Syncfusion.EJ2.BlockEditor - -
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).Locale("de").Render() -
- - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/globalization/rtl/razor b/ej2-asp-core-mvc/code-snippet/blockeditor/globalization/rtl/razor deleted file mode 100644 index a637d5639e..0000000000 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/globalization/rtl/razor +++ /dev/null @@ -1,11 +0,0 @@ -@using Syncfusion.EJ2.BlockEditor - -
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).EnableRtl(true).Render() -
- - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/blockeditor/undo-redo/razor b/ej2-asp-core-mvc/code-snippet/blockeditor/undo-redo/razor deleted file mode 100644 index 4b389bc85d..0000000000 --- a/ej2-asp-core-mvc/code-snippet/blockeditor/undo-redo/razor +++ /dev/null @@ -1,11 +0,0 @@ -@using Syncfusion.EJ2.BlockEditor - -
- @Html.EJS().BlockEditor("block-editor").Blocks((List)ViewBag["BlocksData"]).UndoRedoStack(20).Render() -
- - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/HomeController_core.cs b/ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/HomeController_core.cs new file mode 100644 index 0000000000..c6e1574103 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/HomeController_core.cs @@ -0,0 +1,123 @@ +using System; +using System.Collections.Generic; +using System.Linq; +//File Manager's base functions are available in the below package +using Syncfusion.EJ2.FileManager.Base; +//File Manager's operations are available in the below package +using Syncfusion.EJ2.FileManager.PhysicalFileProvider; +using Newtonsoft.Json; +// use the package for hosting +using Microsoft.AspNetCore.Mvc; +using Microsoft.AspNetCore.Hosting; +using Microsoft.AspNetCore.Http; +using Microsoft.AspNetCore.Http.Features; + +namespace WebApplication.Controllers +{ + public class HomeController : Controller + { + public PhysicalFileProvider operation; + public string basePath; + // Root Path in which files and folders are available. + string root = "wwwroot\\Files"; + public HomeController(IHostingEnvironment hostingEnvironment) + { + // Map the path of the files to be accessed with the host + this.basePath = hostingEnvironment.ContentRootPath; + this.operation = new PhysicalFileProvider(); + // Assign the mapped path as root folder + this.operation.RootFolder(this.basePath + "\\" + this.root); + } + + public object FileOperations([FromBody] FileManagerDirectoryContent args) + { + // Restricting modification of the root folder + if (args.Action == "delete" || args.Action == "rename") + { + if ((args.TargetPath == null) && (args.Path == "")) + { + FileManagerResponse response = new FileManagerResponse(); + ErrorDetails er = new ErrorDetails + { + Code = "401", + Message = "Restricted to modify the root folder." + }; + response.Error = er; + return this.operation.ToCamelCase(response); + } + } + // Processing the File Manager operations + switch (args.Action) + { + case "read": + // Path - Current path; ShowHiddenItems - Boolean value to show/hide hidden items + return this.operation.ToCamelCase(this.operation.GetFiles(args.Path, args.ShowHiddenItems)); + case "delete": + // Path - Current path where of the folder to be deleted; Names - Name of the files to be deleted + return this.operation.ToCamelCase(this.operation.Delete(args.Path, args.Names)); + case "copy": + // Path - Path from where the file was copied; TargetPath - Path where the file/folder is to be copied; RenameFiles - Files with same name in the copied location that is confirmed for renaming; TargetData - Data of the copied file + return this.operation.ToCamelCase(this.operation.Copy(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData)); + case "move": + // Path - Path from where the file was cut; TargetPath - Path where the file/folder is to be moved; RenameFiles - Files with same name in the moved location that is confirmed for renaming; TargetData - Data of the moved file + return this.operation.ToCamelCase(this.operation.Move(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData)); + case "details": + // Path - Current path where details of file/folder is requested; Name - Names of the requested folders + return this.operation.ToCamelCase(this.operation.Details(args.Path, args.Names)); + case "create": + // Path - Current path where the folder is to be created; Name - Name of the new folder + return this.operation.ToCamelCase(this.operation.Create(args.Path, args.Name)); + case "search": + // Path - Current path where the search is performed; SearchString - String typed in the searchbox; CaseSensitive - Boolean value which specifies whether the search must be casesensitive + return this.operation.ToCamelCase(this.operation.Search(args.Path, args.SearchString, args.ShowHiddenItems, args.CaseSensitive)); + case "rename": + // Path - Current path of the renamed file; Name - Old file name; NewName - New file name + return this.operation.ToCamelCase(this.operation.Rename(args.Path, args.Name, args.NewName)); + } + return null; + } + + + + // Processing the Upload operation + public IActionResult Upload(string path, IList uploadFiles, string action) + { + // Here we have restricted the upload operation for our online samples + if (Response.HttpContext.Request.Host.Value == "ej2.syncfusion.com") + { + Response.Clear(); + Response.ContentType = "application/json; charset=utf-8"; + Response.StatusCode = 403; + Response.HttpContext.Features.Get().ReasonPhrase = "File Manager's upload functionality is restricted in the online demo. If you need to test upload functionality, please install Syncfusion Essential Studio on your machine and run the demo"; + } + // Use below code for performing upload operation + else + { + FileManagerResponse uploadResponse; + //Invoking upload operation with the required paramaters + // path - Current path where the file is to uploaded; uploadFiles - Files to be uploaded; action - name of the operation(upload) + uploadResponse = operation.Upload(path, uploadFiles, action, null); + } + return Content(""); + } + // Processing the Download operation + public IActionResult Download(string downloadInput) + { + FileManagerDirectoryContent args = JsonConvert.DeserializeObject(downloadInput); + //Invoking download operation with the required paramaters + // path - Current path where the file is downloaded; Names - Files to be downloaded; + return operation.Download(args.Path, args.Names); + } + // Processing the GetImage operation + public IActionResult GetImage(FileManagerDirectoryContent args) + { + //Invoking GetImage operation with the required paramaters + // path - Current path of the image file; Id - Image file id; + return this.operation.GetImage(args.Path, args.Id, false, null, null); + } + public IActionResult Index() + { + return View(); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/HomeController_mvc.cs b/ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/HomeController_mvc.cs new file mode 100644 index 0000000000..47fdf31a18 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/HomeController_mvc.cs @@ -0,0 +1,94 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Web.Mvc; +//File Manager's base functions are available in the below package +using Syncfusion.EJ2.FileManager.Base; +//File Manager's operations are available in the below package +using Syncfusion.EJ2.FileManager.PhysicalFileProvider; +using Newtonsoft.Json; +// Use the package for hosting +using System.Web.Hosting; + + +namespace WebApplication.Controllers +{ + public class HomeController : Controller + { + // Accessing the File Operations from File Manager package + PhysicalFileProvider operation = new PhysicalFileProvider(); + public HomeController() + { + // Map the path of the files to be accessed with the host + var path = HostingEnvironment.MapPath("~/Content/Files"); + // Assign the mapped path as root folder + operation.RootFolder(path); + } + public ActionResult FileOperations(FileManagerDirectoryContent args) + { + // Processing the File Manager operations + switch (args.Action) + { + case "read": + // Path - Current path; ShowHiddenItems - Boolean value to show/hide hidden items + return Json(operation.ToCamelCase(operation.GetFiles(args.Path, args.ShowHiddenItems))); + case "delete": + // Path - Current path where of the folder to be deleted; Names - Name of the files to be deleted + return Json(operation.ToCamelCase(operation.Delete(args.Path, args.Names))); + case "copy": + // Path - Path from where the file was copied; TargetPath - Path where the file/folder is to be copied; RenameFiles - Files with same name in the copied location that is confirmed for renaming; TargetData - Data of the copied file + return Json(operation.ToCamelCase(operation.Copy(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData))); + case "move": + // Path - Path from where the file was cut; TargetPath - Path where the file/folder is to be moved; RenameFiles - Files with same name in the moved location that is confirmed for renaming; TargetData - Data of the moved file + return Json(operation.ToCamelCase(operation.Move(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData))); + case "details": + if (args.Names == null) + { + args.Names = new string[] { }; + } + // Path - Current path where details of file/folder is requested; Name - Names of the requested folders + return Json(operation.ToCamelCase(operation.Details(args.Path, args.Names))); + case "create": + // Path - Current path where the folder is to be created; Name - Name of the new folder + return Json(operation.ToCamelCase(operation.Create(args.Path, args.Name))); + case "search": + // Path - Current path where the search is performed; SearchString - String typed in the searchbox; CaseSensitive - Boolean value which specifies whether the search must be casesensitive + return Json(operation.ToCamelCase(operation.Search(args.Path, args.SearchString, args.ShowHiddenItems, args.CaseSensitive))); + case "rename": + // Path - Current path of the renamed file; Name - Old file name; NewName - New file name + return Json(operation.ToCamelCase(operation.Rename(args.Path, args.Name, args.NewName))); + } + return null; + } + + // Processing the Upload operation + public ActionResult Upload(string path, IList uploadFiles, string action) + { + FileManagerResponse uploadResponse; + //Invoking upload operation with the required paramaters + // path - Current path where the file is to uploaded; uploadFiles - Files to be uploaded; action - name of the operation(upload) + uploadResponse = operation.Upload(path, uploadFiles, action, null); + + return Content(""); + } + // Processing the Download operation + public ActionResult Download(string downloadInput) + { + FileManagerDirectoryContent args = JsonConvert.DeserializeObject(downloadInput); + //Invoking download operation with the required paramaters + // path - Current path where the file is downloaded; Names - Files to be downloaded; + return operation.Download(args.Path, args.Names); + } + // Processing the GetImage operation + public ActionResult GetImage(FileManagerDirectoryContent args) + { + //Invoking GetImage operation with the required paramaters + // path - Current path of the image file; Id - Image file id; + return operation.GetImage(args.Path, args.Id, false, null, null); + } + public ActionResult Index() + { + return View(); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/razor b/ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/razor new file mode 100644 index 0000000000..c2bcfb5938 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/razor @@ -0,0 +1,39 @@ +
+
+ @Html.EJS().FileManager("filemanager").AjaxSettings( + new Syncfusion.EJ2.FileManager.FileManagerAjaxSettings + { + Url = "/Home/FileOperations", + GetImageUrl = "/Home/GetImage", + UploadUrl = "/Home/Upload", + DownloadUrl = "/Home/Download" + } + ).CssClass("fm_template").LargeIconsTemplate("#largeIconsTemplate").Render() +
+
+ + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/tagHelper b/ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/tagHelper new file mode 100644 index 0000000000..882b904e55 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/file-manager/large-icon-view-template/tagHelper @@ -0,0 +1,42 @@ +
+
+ + + + +
+
+ + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/file-manager/navigation-pane-template/HomeController_core.cs b/ej2-asp-core-mvc/code-snippet/file-manager/navigation-pane-template/HomeController_core.cs new file mode 100644 index 0000000000..c6e1574103 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/file-manager/navigation-pane-template/HomeController_core.cs @@ -0,0 +1,123 @@ +using System; +using System.Collections.Generic; +using System.Linq; +//File Manager's base functions are available in the below package +using Syncfusion.EJ2.FileManager.Base; +//File Manager's operations are available in the below package +using Syncfusion.EJ2.FileManager.PhysicalFileProvider; +using Newtonsoft.Json; +// use the package for hosting +using Microsoft.AspNetCore.Mvc; +using Microsoft.AspNetCore.Hosting; +using Microsoft.AspNetCore.Http; +using Microsoft.AspNetCore.Http.Features; + +namespace WebApplication.Controllers +{ + public class HomeController : Controller + { + public PhysicalFileProvider operation; + public string basePath; + // Root Path in which files and folders are available. + string root = "wwwroot\\Files"; + public HomeController(IHostingEnvironment hostingEnvironment) + { + // Map the path of the files to be accessed with the host + this.basePath = hostingEnvironment.ContentRootPath; + this.operation = new PhysicalFileProvider(); + // Assign the mapped path as root folder + this.operation.RootFolder(this.basePath + "\\" + this.root); + } + + public object FileOperations([FromBody] FileManagerDirectoryContent args) + { + // Restricting modification of the root folder + if (args.Action == "delete" || args.Action == "rename") + { + if ((args.TargetPath == null) && (args.Path == "")) + { + FileManagerResponse response = new FileManagerResponse(); + ErrorDetails er = new ErrorDetails + { + Code = "401", + Message = "Restricted to modify the root folder." + }; + response.Error = er; + return this.operation.ToCamelCase(response); + } + } + // Processing the File Manager operations + switch (args.Action) + { + case "read": + // Path - Current path; ShowHiddenItems - Boolean value to show/hide hidden items + return this.operation.ToCamelCase(this.operation.GetFiles(args.Path, args.ShowHiddenItems)); + case "delete": + // Path - Current path where of the folder to be deleted; Names - Name of the files to be deleted + return this.operation.ToCamelCase(this.operation.Delete(args.Path, args.Names)); + case "copy": + // Path - Path from where the file was copied; TargetPath - Path where the file/folder is to be copied; RenameFiles - Files with same name in the copied location that is confirmed for renaming; TargetData - Data of the copied file + return this.operation.ToCamelCase(this.operation.Copy(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData)); + case "move": + // Path - Path from where the file was cut; TargetPath - Path where the file/folder is to be moved; RenameFiles - Files with same name in the moved location that is confirmed for renaming; TargetData - Data of the moved file + return this.operation.ToCamelCase(this.operation.Move(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData)); + case "details": + // Path - Current path where details of file/folder is requested; Name - Names of the requested folders + return this.operation.ToCamelCase(this.operation.Details(args.Path, args.Names)); + case "create": + // Path - Current path where the folder is to be created; Name - Name of the new folder + return this.operation.ToCamelCase(this.operation.Create(args.Path, args.Name)); + case "search": + // Path - Current path where the search is performed; SearchString - String typed in the searchbox; CaseSensitive - Boolean value which specifies whether the search must be casesensitive + return this.operation.ToCamelCase(this.operation.Search(args.Path, args.SearchString, args.ShowHiddenItems, args.CaseSensitive)); + case "rename": + // Path - Current path of the renamed file; Name - Old file name; NewName - New file name + return this.operation.ToCamelCase(this.operation.Rename(args.Path, args.Name, args.NewName)); + } + return null; + } + + + + // Processing the Upload operation + public IActionResult Upload(string path, IList uploadFiles, string action) + { + // Here we have restricted the upload operation for our online samples + if (Response.HttpContext.Request.Host.Value == "ej2.syncfusion.com") + { + Response.Clear(); + Response.ContentType = "application/json; charset=utf-8"; + Response.StatusCode = 403; + Response.HttpContext.Features.Get().ReasonPhrase = "File Manager's upload functionality is restricted in the online demo. If you need to test upload functionality, please install Syncfusion Essential Studio on your machine and run the demo"; + } + // Use below code for performing upload operation + else + { + FileManagerResponse uploadResponse; + //Invoking upload operation with the required paramaters + // path - Current path where the file is to uploaded; uploadFiles - Files to be uploaded; action - name of the operation(upload) + uploadResponse = operation.Upload(path, uploadFiles, action, null); + } + return Content(""); + } + // Processing the Download operation + public IActionResult Download(string downloadInput) + { + FileManagerDirectoryContent args = JsonConvert.DeserializeObject(downloadInput); + //Invoking download operation with the required paramaters + // path - Current path where the file is downloaded; Names - Files to be downloaded; + return operation.Download(args.Path, args.Names); + } + // Processing the GetImage operation + public IActionResult GetImage(FileManagerDirectoryContent args) + { + //Invoking GetImage operation with the required paramaters + // path - Current path of the image file; Id - Image file id; + return this.operation.GetImage(args.Path, args.Id, false, null, null); + } + public IActionResult Index() + { + return View(); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/file-manager/navigation-pane-template/HomeController_mvc.cs b/ej2-asp-core-mvc/code-snippet/file-manager/navigation-pane-template/HomeController_mvc.cs new file mode 100644 index 0000000000..47fdf31a18 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/file-manager/navigation-pane-template/HomeController_mvc.cs @@ -0,0 +1,94 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Web.Mvc; +//File Manager's base functions are available in the below package +using Syncfusion.EJ2.FileManager.Base; +//File Manager's operations are available in the below package +using Syncfusion.EJ2.FileManager.PhysicalFileProvider; +using Newtonsoft.Json; +// Use the package for hosting +using System.Web.Hosting; + + +namespace WebApplication.Controllers +{ + public class HomeController : Controller + { + // Accessing the File Operations from File Manager package + PhysicalFileProvider operation = new PhysicalFileProvider(); + public HomeController() + { + // Map the path of the files to be accessed with the host + var path = HostingEnvironment.MapPath("~/Content/Files"); + // Assign the mapped path as root folder + operation.RootFolder(path); + } + public ActionResult FileOperations(FileManagerDirectoryContent args) + { + // Processing the File Manager operations + switch (args.Action) + { + case "read": + // Path - Current path; ShowHiddenItems - Boolean value to show/hide hidden items + return Json(operation.ToCamelCase(operation.GetFiles(args.Path, args.ShowHiddenItems))); + case "delete": + // Path - Current path where of the folder to be deleted; Names - Name of the files to be deleted + return Json(operation.ToCamelCase(operation.Delete(args.Path, args.Names))); + case "copy": + // Path - Path from where the file was copied; TargetPath - Path where the file/folder is to be copied; RenameFiles - Files with same name in the copied location that is confirmed for renaming; TargetData - Data of the copied file + return Json(operation.ToCamelCase(operation.Copy(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData))); + case "move": + // Path - Path from where the file was cut; TargetPath - Path where the file/folder is to be moved; RenameFiles - Files with same name in the moved location that is confirmed for renaming; TargetData - Data of the moved file + return Json(operation.ToCamelCase(operation.Move(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData))); + case "details": + if (args.Names == null) + { + args.Names = new string[] { }; + } + // Path - Current path where details of file/folder is requested; Name - Names of the requested folders + return Json(operation.ToCamelCase(operation.Details(args.Path, args.Names))); + case "create": + // Path - Current path where the folder is to be created; Name - Name of the new folder + return Json(operation.ToCamelCase(operation.Create(args.Path, args.Name))); + case "search": + // Path - Current path where the search is performed; SearchString - String typed in the searchbox; CaseSensitive - Boolean value which specifies whether the search must be casesensitive + return Json(operation.ToCamelCase(operation.Search(args.Path, args.SearchString, args.ShowHiddenItems, args.CaseSensitive))); + case "rename": + // Path - Current path of the renamed file; Name - Old file name; NewName - New file name + return Json(operation.ToCamelCase(operation.Rename(args.Path, args.Name, args.NewName))); + } + return null; + } + + // Processing the Upload operation + public ActionResult Upload(string path, IList uploadFiles, string action) + { + FileManagerResponse uploadResponse; + //Invoking upload operation with the required paramaters + // path - Current path where the file is to uploaded; uploadFiles - Files to be uploaded; action - name of the operation(upload) + uploadResponse = operation.Upload(path, uploadFiles, action, null); + + return Content(""); + } + // Processing the Download operation + public ActionResult Download(string downloadInput) + { + FileManagerDirectoryContent args = JsonConvert.DeserializeObject(downloadInput); + //Invoking download operation with the required paramaters + // path - Current path where the file is downloaded; Names - Files to be downloaded; + return operation.Download(args.Path, args.Names); + } + // Processing the GetImage operation + public ActionResult GetImage(FileManagerDirectoryContent args) + { + //Invoking GetImage operation with the required paramaters + // path - Current path of the image file; Id - Image file id; + return operation.GetImage(args.Path, args.Id, false, null, null); + } + public ActionResult Index() + { + return View(); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/file-manager/navigation-pane-template/razor b/ej2-asp-core-mvc/code-snippet/file-manager/navigation-pane-template/razor new file mode 100644 index 0000000000..a6dbaeafb8 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/file-manager/navigation-pane-template/razor @@ -0,0 +1,19 @@ +
+
+ @Html.EJS().FileManager("filemanager").AjaxSettings( + new Syncfusion.EJ2.FileManager.FileManagerAjaxSettings + { + Url = "/Home/FileOperations", + GetImageUrl = "/Home/GetImage", + UploadUrl = "/Home/Upload", + DownloadUrl = "/Home/Download" + } + ).NavigationPaneTemplate("#navigationPaneTemplate").Render() +
+
+ + diff --git a/ej2-asp-core-mvc/code-snippet/file-manager/navigation-pane-template/tagHelper b/ej2-asp-core-mvc/code-snippet/file-manager/navigation-pane-template/tagHelper new file mode 100644 index 0000000000..a16c74f78a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/file-manager/navigation-pane-template/tagHelper @@ -0,0 +1,19 @@ +
+
+ + + + +
+
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/hierarchy-grid/detail-row-events/html.cs b/ej2-asp-core-mvc/code-snippet/grid/hierarchy-grid/detail-row-events/html.cs deleted file mode 100644 index 99977ea8ca..0000000000 --- a/ej2-asp-core-mvc/code-snippet/grid/hierarchy-grid/detail-row-events/html.cs +++ /dev/null @@ -1,6 +0,0 @@ -public IActionResult Index() -{ - ViewBag.DataSource = OrderDetails.GetAllRecords(); - ViewBag.EmployeeDataSource = EmployeeDetails.GetAllRecords(); - return View(); -} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/hierarchy-grid/detail-row-events/razor b/ej2-asp-core-mvc/code-snippet/grid/hierarchy-grid/detail-row-events/razor deleted file mode 100644 index 8a69cfbafc..0000000000 --- a/ej2-asp-core-mvc/code-snippet/grid/hierarchy-grid/detail-row-events/razor +++ /dev/null @@ -1,38 +0,0 @@ -@{ - var ChildGrid = new Syncfusion.EJ2.Grids.Grid() - { - DataSource = (IEnumerable)ViewBag.DataSource, - QueryString = "EmployeeID", - Columns = new List { - new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", Width="120" }, - new Syncfusion.EJ2.Grids.GridColumn(){ Field="CustomerID", HeaderText="Customer ID", Width="150" }, - new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCity", HeaderText="Ship City", Width="120" }, - new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipName", HeaderText="Ship Name", Width="150" }, - }, - }; -} - -
- @Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.EmployeeDataSource).Columns(col => - { - col.Field("EmployeeID").HeaderText("Employee ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("FirstName").HeaderText("Name").Width("150").Add(); - col.Field("City").HeaderText("City").Width("150").Add(); - col.Field("Country").HeaderText("Country").Width("150").Add(); - }).ChildGrid(ChildGrid).DetailExpand("detailExpand").DetailCollapse("detailCollapse").Render() - - - diff --git a/ej2-asp-core-mvc/code-snippet/grid/hierarchy-grid/detail-row-events/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/hierarchy-grid/detail-row-events/tagHelper deleted file mode 100644 index d92f776a08..0000000000 --- a/ej2-asp-core-mvc/code-snippet/grid/hierarchy-grid/detail-row-events/tagHelper +++ /dev/null @@ -1,40 +0,0 @@ -@{ - ViewData["Title"] = "Home page"; - var ChildGrid = new Syncfusion.EJ2.Grids.Grid() - { - DataSource = ViewBag.DataSource, - QueryString = "EmployeeID", - Columns = new List { - new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", Width="120" }, - new Syncfusion.EJ2.Grids.GridColumn(){ Field="CustomerID", HeaderText="Customer ID", Width="150" }, - new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCity", HeaderText="Ship City", Width="120" }, - new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipName", HeaderText="Ship Name", Width="150" }, - }, - }; -} - -
- - - - - - - - -
- - diff --git a/ej2-asp-core-mvc/code-snippet/grid/selection/prevent-checkbox-selection/checkbox.cs b/ej2-asp-core-mvc/code-snippet/grid/selection/prevent-checkbox-selection/checkbox.cs deleted file mode 100644 index 63e5ad554e..0000000000 --- a/ej2-asp-core-mvc/code-snippet/grid/selection/prevent-checkbox-selection/checkbox.cs +++ /dev/null @@ -1,5 +0,0 @@ -public IActionResult Index() -{ - ViewBag.dataSource = OrderDetails.GetAllRecords(); - return View(); -} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/selection/prevent-checkbox-selection/razor b/ej2-asp-core-mvc/code-snippet/grid/selection/prevent-checkbox-selection/razor deleted file mode 100644 index d7563df6e6..0000000000 --- a/ej2-asp-core-mvc/code-snippet/grid/selection/prevent-checkbox-selection/razor +++ /dev/null @@ -1,16 +0,0 @@ -Html.EJS().Grid("grid").DataSource((IEnumerable)ViewBag.dataSource).Columns(col => -{ - col.Type("checkbox").Width("40").Add(); - col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("110").ValidationRules(new { required = true }).Add(); - col.Field("CustomerName").HeaderText("Customer Name").Width("120").ValidationRules(new { required = true }).Add(); - col.Field("Product").HeaderText("Product").Width("110").EditType("dropdownedit").Add(); - col.Field("Amount").HeaderText("Amount").Width("110").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).ValidationRules(new { required = true }).Add(); - col.Field("OrderDate").HeaderText("Order Date").Width("110").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).EditType("datepickeredit").Format("yMd").Add(); - col.Field("Status").HeaderText("Status").Width("110").EditType("dropdownedit").Add(); -}).AllowPaging().AllowSorting().AllowFiltering().Toolbar(new List() { "Edit", "Update", "Cancel" }).FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel)).EditSettings(edit => {edit.AllowEditing(true).AllowAdding(false).AllowDeleting(false).Mode(Syncfusion.EJ2.Grids.EditMode.Normal);}).SelectionSettings(select => select.PersistSelection(true)).IsRowSelectable("isRowSelectable").Render() - - diff --git a/ej2-asp-core-mvc/code-snippet/grid/selection/prevent-checkbox-selection/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/selection/prevent-checkbox-selection/tagHelper deleted file mode 100644 index 5ddd48af3a..0000000000 --- a/ej2-asp-core-mvc/code-snippet/grid/selection/prevent-checkbox-selection/tagHelper +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/ej2-asp-core-mvc/code-snippet/image-editor/how-to/clear-image/razor b/ej2-asp-core-mvc/code-snippet/image-editor/how-to/clear-image/razor index 1a2ebff96d..5f849b8f2f 100644 --- a/ej2-asp-core-mvc/code-snippet/image-editor/how-to/clear-image/razor +++ b/ej2-asp-core-mvc/code-snippet/image-editor/how-to/clear-image/razor @@ -4,6 +4,7 @@ @Html.EJS().Button("clearImage").CssClass("e-primary").Content("Clear Image").Click("clearImage").Render() - - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/image-editor/how-to/fit-to-width-and-height/tagHelper b/ej2-asp-core-mvc/code-snippet/image-editor/how-to/fit-to-width-and-height/tagHelper deleted file mode 100644 index 71c011a76d..0000000000 --- a/ej2-asp-core-mvc/code-snippet/image-editor/how-to/fit-to-width-and-height/tagHelper +++ /dev/null @@ -1,64 +0,0 @@ -
- -
- - - - - - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup-customize/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup-customize/controller.cs deleted file mode 100644 index e1cd786115..0000000000 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup-customize/controller.cs +++ /dev/null @@ -1,9 +0,0 @@ - public class HomeController : Controller - { - - public ActionResult Index() - { - return View(); - } - - } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup-customize/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup-customize/razor deleted file mode 100644 index 2dd9d003c5..0000000000 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup-customize/razor +++ /dev/null @@ -1,10 +0,0 @@ -@Html.EJS().RichTextEditor("clipboardCleanup").BeforeClipboardWrite("beforeClipboardWrite").Render() - - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup-customize/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup-customize/tagHelper deleted file mode 100644 index ecfb44b209..0000000000 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup-customize/tagHelper +++ /dev/null @@ -1,10 +0,0 @@ - - - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup/controller.cs deleted file mode 100644 index e1cd786115..0000000000 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup/controller.cs +++ /dev/null @@ -1,9 +0,0 @@ - public class HomeController : Controller - { - - public ActionResult Index() - { - return View(); - } - - } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup/razor deleted file mode 100644 index e37d66fec9..0000000000 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup/razor +++ /dev/null @@ -1,2 +0,0 @@ - -@Html.EJS().RichTextEditor("clipboardCleanup").Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup/tagHelper deleted file mode 100644 index fc14abcee9..0000000000 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/clipboard-cleanup/tagHelper +++ /dev/null @@ -1 +0,0 @@ - diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/controller.cs deleted file mode 100644 index 8c55172c87..0000000000 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/controller.cs +++ /dev/null @@ -1,52 +0,0 @@ -public class HomeController : Controller -{ - public ActionResult Index() - { - ViewBag.value = @"

The Rich Text Editor allows users to apply line-height (line-spacing) to elements like paragraphs, lists, headings, and table cells. You can set line height using a dedicated dropdown in the toolbar, and it is applied as inline style to the selected blocks. This feature makes text easier to read and gives better control over content layout.

Key features:

  • Provides a Line Height dropdown in the toolbar for easy access.

  • Supports applying line-height to paragraphs, headings, lists, and table cells.

  • Applies line-height as inline styles for consistent and precise text rendering.

  • Ensures consistent appearance across devices and print layouts.

  • Improves text readability and overall document aesthetics.

"; - object size1 = new - { - text = "1", - value = "1" - }; - object size2 = new - { - text = "1.15", - value = "1.15" - }; - object size3 = new - { - text = "1.5", - value = "1.5" - }; - object size4 = new - { - text = "2", - value = "2" - }; - object size5 = new - { - text = "2.5", - value = "2.5" - }; - object size6 = new - { - text = "3", - value = "3" - }; - object size6 = new - { - text = "3.5", - value = "3.5" - }; - object size7 = new - { - text = "4", - value = "4" - }; - - ViewBag.items = new[] { "LineHeight" }; - ViewBag.LineHeightItems = new[] { size1, size2, size3, size4, size5 }; - return View(); - } - -} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/razor deleted file mode 100644 index d7e149e361..0000000000 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/razor +++ /dev/null @@ -1 +0,0 @@ -@Html.EJS().RichTextEditor("custom-line-height").ToolbarSettings(e => e.Items((object)ViewBag.items)).LineHeight(t => t.Default("2").SupportAllValues(true).Items(ViewBag.LineHeightItems)).Value(ViewBag.value).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/tagHelper deleted file mode 100644 index 9fdf2181ed..0000000000 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/tagHelper +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/controller.cs deleted file mode 100644 index e2dcb066b6..0000000000 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/controller.cs +++ /dev/null @@ -1,9 +0,0 @@ -public class HomeController : Controller -{ - public ActionResult Index() - { - ViewBag.value = @"

The Rich Text Editor allows users to apply line-height (line-spacing) to elements like paragraphs, lists, headings, and table cells. You can set line height using a dedicated dropdown in the toolbar, and it is applied as inline style to the selected blocks. This feature makes text easier to read and gives better control over content layout.

Key features:

  • Provides a Line Height dropdown in the toolbar for easy access.

  • Supports applying line-height to paragraphs, headings, lists, and table cells.

  • Applies line-height as inline styles for consistent and precise text rendering.

  • Ensures consistent appearance across devices and print layouts.

  • Improves text readability and overall document aesthetics.

"; - ViewBag.items = new[] { "LineHeight" }; - return View(); - } -} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/razor deleted file mode 100644 index 3308b4b9dc..0000000000 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/razor +++ /dev/null @@ -1 +0,0 @@ -@Html.EJS().RichTextEditor("line-height").ToolbarSettings(e => e.Items((object)ViewBag.items)).Value(ViewBag.value).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/tagHelper deleted file mode 100644 index d7e65a060b..0000000000 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height/tagHelper +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/razor index 3f6f6fd573..4f1c46d907 100644 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/razor +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/mail-merge/razor @@ -1,6 +1,5 @@ {% raw %} @using Syncfusion.EJ2.DropDowns - @{ string rteValue = @"

Dear {{FirstName}} {{LastName}},

@@ -68,8 +67,6 @@ - - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/secureexport/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/secureexport/tagHelper deleted file mode 100644 index 4df1ad2062..0000000000 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/secureexport/tagHelper +++ /dev/null @@ -1,51 +0,0 @@ -@{ - string rteValue = "

Invitation to Microsoft Webinar Meet-Up

Dear Guest,

We're thrilled to extend a special invitation to you for an exclusive Microsoft webinar meet-up, where we'll explore the latest innovations and insights driving the future of technology. As a valued member of our community, we believe this event will offer invaluable knowledge and networking opportunities.

Event Details:

Time: 10:00 AM - 12:00 PM
Duration: 2 hours
Platform: Microsoft Teams


Agenda:

  • Introduction to Cutting-Edge Microsoft Technologies
  • Deep Dive into AI in Business: Leveraging Microsoft Azure Solutions
  • Live Q&A Session with Industry Experts
  • Networking Opportunities with Peers and Professionals

Why Attend?

  • Gain insights into the latest trends and advancements in technology.
  • Interact with industry experts and expand your professional network.
  • Get your questions answered in real-time during the live Q&A session.
  • Access exclusive resources and offers available only to webinar attendees.

Feel free to invite your colleagues and peers who might benefit from this enriching experience. Simply forward this email to them or share the event details.

We're looking forward to your participation and to exploring the exciting world of Microsoft technology together. Should you have any questions or require further information, please don't hesitate to contact us at webinar@company.com.


Warm regards,

John Doe
Event Coordinator
ABC Company

"; - object[] tools = new object[] {"Undo", "Redo", "|", "ExportWord", "ExportPdf", "|", "Bold", "Italic", "Underline", "StrikeThrough", "|", - "FontName", "FontSize", "FontColor", "BackgroundColor", "|", - "Formats", "Alignments", "Blockquote", "|", "NumberFormatList", - "BulletFormatList", "|", "CreateLink", "Image", "CreateTable", "|", "ClearFormat", "SourceCode" }; - string hostUrl = "https://services.syncfusion.com/aspnet/production/"; - RichTextEditorExportWord ExportWord = new RichTextEditorExportWord - { - ServiceUrl = hostUrl + "api/RichTextEditor/ExportToDocx", - FileName = "RichTextEditor.docx", - Stylesheet = ".e-rte-content{ font-size: 1em; font-weight: 400; margin: 0; }" - }; - - RichTextEditorExportPdf ExportPdf = new RichTextEditorExportPdf - { - ServiceUrl = hostUrl + "api/RichTextEditor/ExportToPdf", - FileName = "RichTextEditor.pdf", - Stylesheet = ".e-rte-content{ font-size: 1em; font-weight: 400; margin: 0; }" - }; - RichTextEditorImageSettings InsertImageSettings = new RichTextEditorImageSettings - { - SaveUrl = hostUrl + "api/RichTextEditor/SaveFile", - RemoveUrl = hostUrl + "api/RichTextEditor/DeleteFile", - Path = hostUrl + "RichTextEditor/" - }; -} - - - - - - - - - - - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/secureimport/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/secureimport/controller.cs deleted file mode 100644 index 4711913fa9..0000000000 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/secureimport/controller.cs +++ /dev/null @@ -1,25 +0,0 @@ -public class HomeController : Controller -{ - - public ActionResult Index() - { - ViewBag.RTEValue = "

Invitation to Microsoft Webinar Meet-Up

Dear Guest,

We're thrilled to extend a special invitation to you for an exclusive Microsoft webinar meet-up, where we'll explore the latest innovations and insights driving the future of technology. As a valued member of our community, we believe this event will offer invaluable knowledge and networking opportunities.

Event Details:

Time: 10:00 AM - 12:00 PM
Duration: 2 hours
Platform: Microsoft Teams


Agenda:

  • Introduction to Cutting-Edge Microsoft Technologies
  • Deep Dive into AI in Business: Leveraging Microsoft Azure Solutions
  • Live Q&A Session with Industry Experts
  • Networking Opportunities with Peers and Professionals

Why Attend?

  • Gain insights into the latest trends and advancements in technology.
  • Interact with industry experts and expand your professional network.
  • Get your questions answered in real-time during the live Q&A session.
  • Access exclusive resources and offers available only to webinar attendees.

Feel free to invite your colleagues and peers who might benefit from this enriching experience. Simply forward this email to them or share the event details.

We're looking forward to your participation and to exploring the exciting world of Microsoft technology together. Should you have any questions or require further information, please don't hesitate to contact us at webinar@company.com.


Warm regards,

John Doe
Event Coordinator
ABC Company

"; - ViewBag.Tools = new object[] {"Undo", "Redo", "|", "ImportWord", "|", - "Bold", "Italic", "Underline", "StrikeThrough", "|", - "FontName", "FontSize", "FontColor", "BackgroundColor", "|", - "Formats", "Alignments", "Blockquote", "|", "NumberFormatList", "BulletFormatList", - "|", "CreateLink", "Image", "CreateTable", "|", "ClearFormat", "SourceCode"}; - string hostUrl = "https://services.syncfusion.com/aspnet/production/"; - ViewBag.InsertImageSettings = new Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings - { - SaveUrl = hostUrl + "api/RichTextEditor/SaveFile", - RemoveUrl = hostUrl + "api/RichTextEditor/DeleteFile", - Path = hostUrl + "RichTextEditor/" - }; - ViewBag.ImportWord = new Syncfusion.EJ2.RichTextEditor.RichTextEditorImportWord - { - ServiceUrl = hostUrl + "api/RichTextEditor/ImportFromWord", - }; - return View(); - } -} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/secureimport/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/secureimport/razor deleted file mode 100644 index a0b5f3bfcb..0000000000 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/secureimport/razor +++ /dev/null @@ -1,11 +0,0 @@ - @Html.EJS().RichTextEditor("importEditor").ToolbarSettings(e => - e.Items((object)ViewBag.Tools)).ImportWord(ViewBag.ImportWord).wordImporting("onWordImport").Value((string)ViewBag.RTEValue).EnableXhtml(true).InsertImageSettings(ViewBag.InsertImageSettings).Render() - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/secureimport/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/secureimport/tagHelper deleted file mode 100644 index 6e949dd2a4..0000000000 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/secureimport/tagHelper +++ /dev/null @@ -1,40 +0,0 @@ -@{ - string rteValue = "

Invitation to Microsoft Webinar Meet-Up

Dear Guest,

We're thrilled to extend a special invitation to you for an exclusive Microsoft webinar meet-up, where we'll explore the latest innovations and insights driving the future of technology. As a valued member of our community, we believe this event will offer invaluable knowledge and networking opportunities.

Event Details:

Time: 10:00 AM - 12:00 PM
Duration: 2 hours
Platform: Microsoft Teams


Agenda:

  • Introduction to Cutting-Edge Microsoft Technologies
  • Deep Dive into AI in Business: Leveraging Microsoft Azure Solutions
  • Live Q&A Session with Industry Experts
  • Networking Opportunities with Peers and Professionals

Why Attend?

  • Gain insights into the latest trends and advancements in technology.
  • Interact with industry experts and expand your professional network.
  • Get your questions answered in real-time during the live Q&A session.
  • Access exclusive resources and offers available only to webinar attendees.

Feel free to invite your colleagues and peers who might benefit from this enriching experience. Simply forward this email to them or share the event details.

We're looking forward to your participation and to exploring the exciting world of Microsoft technology together. Should you have any questions or require further information, please don't hesitate to contact us at webinar@company.com.


Warm regards,

John Doe
Event Coordinator
ABC Company

"; - object[] tools = new object[] {"Undo", "Redo", "|", "ImportWord", "|", - "Bold", "Italic", "Underline", "StrikeThrough", "|", - "FontName", "FontSize", "FontColor", "BackgroundColor", "|", - "Formats", "Alignments", "Blockquote", "|", "NumberFormatList", "BulletFormatList", - "|", "CreateLink", "Image", "CreateTable", "|", "ClearFormat", "SourceCode" }; - string hostUrl = "https://services.syncfusion.com/aspnet/production/"; - - RichTextEditorImageSettings InsertImageSettings = new RichTextEditorImageSettings - { - SaveUrl = hostUrl + "api/RichTextEditor/SaveFile", - RemoveUrl = hostUrl + "api/RichTextEditor/DeleteFile", - Path = hostUrl + "RichTextEditor/" - }; - RichTextEditorImportWord ImportWord = new RichTextEditorImportWord - { - ServiceUrl = hostUrl + "api/RichTextEditor/ImportFromWord", - }; -} - - - - - - - - - - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/razor index e6796db992..c40d57d450 100644 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/razor +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/razor @@ -24,49 +24,22 @@ const realLength = panel.firstChild.firstChild.textContent.length; rangeObj.max = realLength; rangeObj.dataBind(); - // Focus the editor to activate selection - panel.focus(); - - // Apply initial selection - onChange({ value: rangeObj.value }); }); }); function onChange(args) { const [start, end] = args.value; const panel = editorObj.contentModule.getEditPanel(); - const maxLength = panel.textContent.length; + const textNode = panel.firstChild.firstChild; + const maxLength = textNode.length; - // Ensure start and end are within valid bounds const safeStart = Math.min(start, maxLength); const safeEnd = Math.min(end, maxLength); - // Find the text node and relative offset for both start and end - const startInfo = getTextNodeAtOffset(panel, safeStart); - const endInfo = getTextNodeAtOffset(panel, safeEnd); - - if (startInfo && endInfo) { - const range = document.createRange(); - range.setStart(startInfo.node, startInfo.offset); - range.setEnd(endInfo.node, endInfo.offset); - const selection = window.getSelection(); - selection.removeAllRanges(); - selection.addRange(range); - } + const range = document.createRange(); + range.setStart(textNode, safeStart); + range.setEnd(textNode, safeEnd); + window.getSelection().removeAllRanges(); + window.getSelection().addRange(range); } - - function getTextNodeAtOffset(root: Node, offset: number): { node: Text; offset: number } | null { - let currentOffset = 0; - const walker: TreeWalker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, false); - while (walker.nextNode()) { - const node = walker.currentNode as Text; - const nodeLength = node.textContent.length; - if (currentOffset + nodeLength >= offset) { - return { node, offset: offset - currentOffset }; - } - currentOffset += nodeLength; - } - return null; - } - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/tagHelper index 1bcbc6eb91..4f7bc3d9cb 100644 --- a/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/selection/tagHelper @@ -30,48 +30,22 @@ var sliderValue = new int[] { 0, 50 }; const realLength = panel.firstChild.firstChild.textContent.length; rangeObj.max = realLength; rangeObj.dataBind(); - // Focus the editor to activate selection - panel.focus(); - - // Apply initial selection - onChange({ value: rangeObj.value }); }); }); function onChange(args) { const [start, end] = args.value; const panel = editorObj.contentModule.getEditPanel(); - const maxLength = panel.textContent.length; + const textNode = panel.firstChild.firstChild; + const maxLength = textNode.length; - // Ensure start and end are within valid bounds const safeStart = Math.min(start, maxLength); const safeEnd = Math.min(end, maxLength); - // Find the text node and relative offset for both start and end - const startInfo = getTextNodeAtOffset(panel, safeStart); - const endInfo = getTextNodeAtOffset(panel, safeEnd); - - if (startInfo && endInfo) { - const range = document.createRange(); - range.setStart(startInfo.node, startInfo.offset); - range.setEnd(endInfo.node, endInfo.offset); - const selection = window.getSelection(); - selection.removeAllRanges(); - selection.addRange(range); - } - } - - function getTextNodeAtOffset(root: Node, offset: number): { node: Text; offset: number } | null { - let currentOffset = 0; - const walker: TreeWalker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, false); - while (walker.nextNode()) { - const node = walker.currentNode as Text; - const nodeLength = node.textContent.length; - if (currentOffset + nodeLength >= offset) { - return { node, offset: offset - currentOffset }; - } - currentOffset += nodeLength; - } - return null; + const range = document.createRange(); + range.setStart(textNode, safeStart); + range.setEnd(textNode, safeEnd); + window.getSelection().removeAllRanges(); + window.getSelection().addRange(range); } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu copy/controller.cs b/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu copy/controller.cs new file mode 100644 index 0000000000..e37415605c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu copy/controller.cs @@ -0,0 +1,49 @@ +public class HomeController : Controller +{ + public ActionResult Index() + { + ViewBag.items = new[] { "Bold", "Italic", "Underline", "StrikeThrough", "SuperScript", "SubScript", "|", + "FontName", "FontSize", "FontColor", "BackgroundColor", "|", + "LowerCase", "UpperCase", + "Formats", "Alignments", "|", "NumberFormatList", "BulletFormatList", "|", + "Outdent", "Indent", "|", + "CreateLink", "Image", "Video", "Audio", "CreateTable", "|", "FormatPainter", "ClearFormat", "|", "EmojiPicker", "|", + "SourceCode", "|", "Undo", "Redo" }; + ViewBag.SlashMenuSettings = new Syncfusion.EJ2.RichTextEditor.RichTextEditorSlashMenuSettings + { + Enable = true, + Items = new object[] { "Paragraph", "Heading 1", "Heading 2", "Heading 3", "Heading 4", "OrderedList", "UnorderedList", + "CodeBlock", "Blockquote", "Link", "Image", "Video", "Audio", "Table", "Emojipicker", + new { + text= "Meeting notes", + description= "Insert a meeting note template.", + iconCss= "e-icons e-description", + type= "Custom", + command= "MeetingNotes" + }, + new { + text= "Signature", + description= "Insert a signature template.", + iconCss= "e-icons e-signature", + type= "Custom", + command= "Signature" + }, + new { + text: 'HorizontalLine', + description: 'Insert a horizontal line', + iconCss: 'e-icons e-horizontal-line', + type: 'Custom', + command: 'HorizontalLine', + }, + new { + text: 'CheckList', + description: 'Insert a check list', + iconCss: 'e-icons e-checklist', + type: 'Custom', + command: 'CheckList', + }, + } + } + return View(); + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu copy/razor b/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu copy/razor new file mode 100644 index 0000000000..d04723da1b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu copy/razor @@ -0,0 +1,23 @@ +@Html.EJS().RichTextEditor("slashMenu").Placeholder("Type '/' and choose format").Created("created").ToolbarSettings(e => e.Items((object)ViewBag.items)).SlashMenuSettings(ViewBag.SlashMenuSettings).SlashMenuItemSelect("slashMenuItemSelect").Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu copy/tagHelper b/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu copy/tagHelper new file mode 100644 index 0000000000..eb8a8ae918 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/rich-text-editor/slashmenu copy/tagHelper @@ -0,0 +1,31 @@ + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/selection/partial-selection/partial.cs b/ej2-asp-core-mvc/code-snippet/tree-grid/selection/partial-selection/partial.cs deleted file mode 100644 index 540ea4a393..0000000000 --- a/ej2-asp-core-mvc/code-snippet/tree-grid/selection/partial-selection/partial.cs +++ /dev/null @@ -1,6 +0,0 @@ -public IActionResult Index() -{ - var tree = TreeData.GetTaskData(); - ViewBag.datasource = tree; - return View(); -} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/selection/partial-selection/razor b/ej2-asp-core-mvc/code-snippet/tree-grid/selection/partial-selection/razor deleted file mode 100644 index a9a97a268f..0000000000 --- a/ej2-asp-core-mvc/code-snippet/tree-grid/selection/partial-selection/razor +++ /dev/null @@ -1,22 +0,0 @@ -@(Html.EJS().TreeGrid("PartialSelection") - .EnableVirtualization(true) - .DataSource((IEnumerable)ViewBag.datasource) - .AllowSelection() - .SelectionSettings(sel => sel.PersistSelection(true)).IdMapping("TaskID") - .ParentIdMapping("ParentID").TreeColumnIndex(1).IsRowSelectable("isRowSelectable") - .Columns(col => - { - col.Type("checkbox").Width(60).Add(); - col.Field("Task").HeaderText("Task").Width(300).Add(); - col.Field("TaskID").Visible(false).IsPrimaryKey(true).Add(); - col.Field("AssignedTo").HeaderText("Assigned To").Width(140).Add(); - col.Field("StartDate").HeaderText("Start").Format("yMd").Width(180).Add(); - col.Field("DueDate").HeaderText("Due").Format("yMd").Width(180).Add(); - col.Field("Priority").HeaderText("Priority").Width(90).Add(); - col.Field("Progress").HeaderText("Status").Width(90).Add(); - }).Render()) - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/selection/partial-selection/tagHelper b/ej2-asp-core-mvc/code-snippet/tree-grid/selection/partial-selection/tagHelper deleted file mode 100644 index 40b3afd708..0000000000 --- a/ej2-asp-core-mvc/code-snippet/tree-grid/selection/partial-selection/tagHelper +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - \ No newline at end of file diff --git a/ej2-asp-core-mvc/file-manager/how-to/customize-navigation-items.md b/ej2-asp-core-mvc/file-manager/how-to/customize-navigation-items.md new file mode 100644 index 0000000000..d3a58b94a0 --- /dev/null +++ b/ej2-asp-core-mvc/file-manager/how-to/customize-navigation-items.md @@ -0,0 +1,38 @@ +--- +layout: post +title: Customize Navigation Pane in ##Platform_Name## Syncfusion File Manager +description: Learn here all about Customize the Navigation Pane in Syncfusion ##Platform_Name## File Manager control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Customize the Navigation Pane +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Customize Navigation Pane in File Manager Control + +The navigation pane in the File Manager Control displays the folder hierarchy in a tree-like structure. You can customize the layout of each folder node in the navigation pane using the `navigationPaneTemplate` property. This allows you to modify the appearance of folders based on your application's requirements. + +You may use this template to show additional metadata, custom icons, or other UI elements alongside the folder name. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/file-manager/navigation-pane-template/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="HomeController_core.cs" %} +{% include code-snippet/file-manager/navigation-pane-template/HomeController_core.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/file-manager/navigation-pane-template/razor %} +{% endhighlight %} +{% highlight c# tabtitle="HomeController_mvc.cs" %} +{% include code-snippet/file-manager/navigation-pane-template/HomeController_mvc.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/file-manager/images/large-icons-view-template.png b/ej2-asp-core-mvc/file-manager/images/large-icons-view-template.png new file mode 100644 index 0000000000..784bf8bed4 Binary files /dev/null and b/ej2-asp-core-mvc/file-manager/images/large-icons-view-template.png differ diff --git a/ej2-asp-core-mvc/file-manager/images/navigationpane-template.png b/ej2-asp-core-mvc/file-manager/images/navigationpane-template.png new file mode 100644 index 0000000000..e3bc25e8bc Binary files /dev/null and b/ej2-asp-core-mvc/file-manager/images/navigationpane-template.png differ diff --git a/ej2-asp-core-mvc/file-manager/user-interface.md b/ej2-asp-core-mvc/file-manager/user-interface.md index 4932580680..795c048554 100644 --- a/ej2-asp-core-mvc/file-manager/user-interface.md +++ b/ej2-asp-core-mvc/file-manager/user-interface.md @@ -35,7 +35,7 @@ The `Toolbar` provides easy access to the file operations using different button If the toolbar items exceed the size of the toolbar, the excess items will be moved to a toolbar popup with a dropdown button at the end of the toolbar. -*Refer [Toolbar](./file-operations/#toolbar) section in file operations to know more about the buttons present in toolbar*. +*Refer [Toolbar](./file-operations#toolbar) section in file operations to know more about the buttons present in toolbar*. ![Toolbar](./images/toolbar.png) @@ -50,6 +50,10 @@ The File Manager provides navigation between files and folders using the followi The File Manager provides a navigation pane that displays the folder hierarchy of the file system and enables easy navigation to the desired folder. Using [`navigationPaneSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.FileManager.FileManagerNavigationPaneSettings.html) minimum and maximum width of the navigation pane can be changed. The navigation pane can be shown or hidden using the `visible` option in the `navigationPaneSettings`. +You can customize the appearance of the navigation pane by using the `navigationPaneTemplate` property. This enables you to modify icons, display text, and include additional elements to suit your application's requirements. + +![Navigation Pane Template Output](./images/navigationpane-template.png) + ### BreadCrumb The File Manager provides breadcrumb for navigating to the parent folders. The breadcrumb in the File Manager is responsible for resizing. Whenever the path length exceeds the breadcrumb length, a dropdown button will be added at the starting of the breadcrumb to hold the parent folders adjacent to root. @@ -71,6 +75,10 @@ In the large icons view, the thumbnail icons will be shown in a larger size, whi ![LargeIconView](./images/largeiconsview.png) +The `largeIconsTemplate` property enables complete customization of how folders and files are rendered in the `Large Icons View`. It allows you to enhance the layout by adding background images, custom file-type icons, and actions such as dropdown menus. + +![Large Icon View Template Output](./images/large-icons-view-template.png) + ### Details view The File Manager view can be changed from large icon to details view by using the [`View`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.FileManager.FileManager.html#Syncfusion_EJ2_FileManager_FileManager_View) property. In the details view, the files are displayed in a sorted list order. This file list comprises of several columns of information about the files such as **Name**, **Date Modified**, **Type**, and **Size**. Each file has its own small icon representing the file type. Additional columns can be added using [`detailsViewSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.FileManager.FileManagerDetailsViewSettings.html) API. The details view allows you to perform sorting using column header. @@ -83,6 +91,6 @@ The context menu appears on user interaction such as right-click. The File Manag Context menu can be customized using the [`contextMenuSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.FileManager.FileManagerContextMenuSettings.html), [`menuOpen`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.FileManager.FileManager.html#Syncfusion_EJ2_FileManager_FileManager_MenuOpen), and [`menuClick`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.FileManager.FileManager.html#Syncfusion_EJ2_FileManager_FileManager_MenuClose) events. -*Refer [Context Menu](./file-operations/#context-menu) section in file operations to know more about the menu items present in context menu*. +*Refer [Context Menu](./file-operations#context-menu) section in file operations to know more about the menu items present in context menu*. ![Context Menu](./images/contextmenu.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/file-manager/views.md b/ej2-asp-core-mvc/file-manager/views.md index 459ef148cd..afa2e4fc9d 100644 --- a/ej2-asp-core-mvc/file-manager/views.md +++ b/ej2-asp-core-mvc/file-manager/views.md @@ -9,7 +9,7 @@ documentation: ug --- -# Views +# Views in File Manager Control The view section displays files and folders for user browsing. The `view` API can also be used to change the initial view of the File Manager. @@ -51,6 +51,33 @@ The output will look like the image below. ![File Manager largeicons view](./images/large_icons.PNG) +### Customize existing Large Icons View + +The large icons view layout can be customized using the `largeIconsTemplate` property, which allows you to display file or folder information, apply custom formatting, and use conditional rendering based on item type. You can customize it further based on your application requirements. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/file-manager/large-icon-view-template/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="HomeController_core.cs" %} +{% include code-snippet/file-manager/large-icon-view-template/HomeController_core.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/file-manager/large-icon-view-template/razor %} +{% endhighlight %} +{% highlight c# tabtitle="HomeController_mvc.cs" %} +{% include code-snippet/file-manager/large-icon-view-template/HomeController_mvc.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + ## Details View The default appearance of the File Manager can be changed from largeicons to details view by using the `view` property. In the Details view, the files are displayed in a sorted list order. This file list comprises of several columns of information about the files such as **Name**, **Date Modified**, **Type**, and **Size**. The following example demonstrates the File Manager with details view. diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/hierarchy-grid.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/hierarchy-grid.md index aaf217092f..6d69c45132 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/hierarchy-grid.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/hierarchy-grid.md @@ -295,27 +295,6 @@ In the demo below, the expand/collapse icons have been changed to arrow-down and ![Customize hierarchy Grid icons](images/hierarchy-grid/change-icon.png) -## Detail row events - -The Grid component provides the `detailExpand` and `detailCollapse` events, which are triggered when a detail row is about to expand or collapse. These events fire before the detail row actually expands or collapses, allowing you to control whether the action should proceed. - -`detailExpand` – This event is triggered before a detail row begins to expand. You can access the expansion details through the event arguments and optionally prevent the expansion by setting: -`args.cancel = true`; - -`detailCollapse` – This event is triggered before a detail row begins to collapse. You can access the collapse details through the event arguments and optionally prevent the collapse by setting: -`args.cancel = true`; - -In the example below, expansion is prevented for the **Nancy** row, and collapse is prevented for the **Andrew** row. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/hierarchy-grid/detail-row-events/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Html.cs" %} -{% include code-snippet/grid/hierarchy-grid/detail-row-events/html.cs %} -{% endhighlight %} -{% endtabs %} - ## Customize the child grid The Syncfusion® ASP.NET MVC Grid component offers various ways to customize the child grid appearance using both default CSS and custom themes. To access the child grid elements, you can use the **.e-detailcell** class selector, which targets the child grid. diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/row/detail-template.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/row/detail-template.md index a4088d35d9..2799002d18 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/row/detail-template.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/row/detail-template.md @@ -107,6 +107,3 @@ Detail template is not supported with the following features: * Lazy load grouping * State persistence -## See also - -* [Detail row events](../hierarchy-grid#detail-row-events) \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/selection/check-box-selection.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/selection/check-box-selection.md index 81e991bc17..eacd5070d8 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/selection/check-box-selection.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/selection/check-box-selection.md @@ -88,23 +88,6 @@ In the following sample, the selection of specific rows has been prevented based ![Prevent specific rows from being selected in checkbox selection](../images/selection/checkbox-prevent.gif) -## Partial selection using isRowSelectable - -The `isRowSelectable` callback in Syncfusion's EJ2 Grid allows control over which rows users can select. It uses a simple callback that runs before the grid loads the data. This callback checks each row data and returns **true** if the row can be selected, or **false** for non-selectable rows. - -For local data, the callback checks all items just once when the grid first loads. For remote data, it only checks the rows shown on the current page when the grid first appears. It re-checks them every time an action occurs, such as changing pages, filtering, or sorting. - -In the example below, it prevents selection of rows with canceled orders. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/selection/prevent-checkbox-selection/razor %} -{% endhighlight %} -{% highlight c# tabtitle="checkbox.cs" %} -{% include code-snippet/grid/selection/prevent-checkbox-selection/checkbox.cs %} -{% endhighlight %} -{% endtabs %} - ## How to select single row in checkbox selection mode The ASP.NET MVC Grid allows you to select only one row at a time within the Grid. This feature is particularly useful when you want to ensure that only a single row is selected, and any previous selections are cleared when a new row is selected. diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/hierarchy-grid.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/hierarchy-grid.md index 47991aa464..58d5c35b0d 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/hierarchy-grid.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/hierarchy-grid.md @@ -295,27 +295,6 @@ In the demo below, the expand/collapse icons have been changed to arrow-down and ![Customize hierarchy Grid icons](images/hierarchy-grid/change-icon.png) -## Detail row events - -The Grid component provides the `detailExpand` and `detailCollapse` events, which are triggered when a detail row is about to expand or collapse. These events fire before the detail row actually expands or collapses, allowing you to control whether the action should proceed. - -`detailExpand` – This event is triggered before a detail row begins to expand. You can access the expansion details through the event arguments and optionally prevent the expansion by setting: -`args.cancel = true`; - -`detailCollapse` – This event is triggered before a detail row begins to collapse. You can access the collapse details through the event arguments and optionally prevent the collapse by setting: -`args.cancel = true`; - -In the example below, expansion is prevented for the **Nancy** row, and collapse is prevented for the **Andrew** row. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/hierarchy-grid/detail-row-events/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Html.cs" %} -{% include code-snippet/grid/hierarchy-grid/detail-row-events/html.cs %} -{% endhighlight %} -{% endtabs %} - ## Customize the child grid The Syncfusion® ASP.NET Core Grid component offers various ways to customize the child grid appearance using both default CSS and custom themes. To access the child grid elements, you can use the **.e-detailcell** class selector, which targets the child grid. diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/row/detail-template.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/row/detail-template.md index adfe17e0bc..ad79ca5638 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/row/detail-template.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/row/detail-template.md @@ -105,6 +105,3 @@ Detail template is not supported with the following features: * Lazy load grouping * State persistence -## See also - -* [Detail row events](../hierarchy-grid#detail-row-events) \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/selection/check-box-selection.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/selection/check-box-selection.md index 88e46224d4..7096014c1f 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/selection/check-box-selection.md +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/selection/check-box-selection.md @@ -88,23 +88,6 @@ In the following sample, the selection of specific rows has been prevented based ![Prevent specific rows from being selected in checkbox selection](../images/selection/checkbox-prevent.gif) -## Partial selection using isRowSelectable - -The `isRowSelectable` callback in Syncfusion's EJ2 Grid allows control over which rows users can select. It uses a simple callback that runs before the grid loads the data. This callback checks each row data and returns **true** if the row can be selected, or **false** for non-selectable rows. - -For local data, the callback checks all items just once when the grid first loads. For remote data, it only checks the rows shown on the current page when the grid first appears. It re-checks them every time an action occurs, such as changing pages, filtering, or sorting. - -In the example below, it prevents selection of rows with canceled orders. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/selection/prevent-checkbox-selection/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="checkbox.cs" %} -{% include code-snippet/grid/selection/prevent-checkbox-selection/checkbox.cs %} -{% endhighlight %} -{% endtabs %} - ## How to select single row in checkbox selection mode The ASP.NET CORE Grid allows you to select only one row at a time within the Grid. This feature is particularly useful when you want to ensure that only a single row is selected, and any previous selections are cleared when a new row is selected. diff --git a/ej2-asp-core-mvc/image-editor/how-to/clear-image.md b/ej2-asp-core-mvc/image-editor/how-to/clear-image.md index f5bb6ea9eb..82e3acf68d 100644 --- a/ej2-asp-core-mvc/image-editor/how-to/clear-image.md +++ b/ej2-asp-core-mvc/image-editor/how-to/clear-image.md @@ -1,14 +1,15 @@ --- layout: post -title: Clear an Image in ##Platform_Name## Image editor control | Syncfusion -description: Learn here all about Clear an Image in Syncfusion ##Platform_Name## ImageEditor component of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Clear an Image +title: Filter in ##Platform_Name## Image editor control | Syncfusion +description: Learn here all about Filter in Syncfusion ##Platform_Name## ImageEditor component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Clear Image publishingplatform: ##Platform_Name## documentation: ug +domainurl: ##DomainURL## --- -# Clear an Image in Image editor control +# Clear an Image ##Platform_Name## Image Editor control The `clearImage` method in the image editor control is indeed useful for scenarios where you need to ensure that the image editor is emptied before reopening it, especially if the editor is used within a dialog. By using clearImage before closing the dialog, you can ensure that the editor does not retain the previously loaded image when the dialog is reopened. This allows users to start fresh with a new image selection. diff --git a/ej2-asp-core-mvc/image-editor/how-to/fit-to-width-and-height.md b/ej2-asp-core-mvc/image-editor/how-to/fit-to-width-and-height.md deleted file mode 100644 index bed3b8eb3e..0000000000 --- a/ej2-asp-core-mvc/image-editor/how-to/fit-to-width-and-height.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -layout: post -title: Fit to Width and Height in ##Platform_Name## Image editor | Syncfusion -description: Learn here all about Fit to Width and Height in Syncfusion ##Platform_Name## ImageEditor component of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Fit to Width and Height -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Fit Image to Editor Width and Height - -The Image Editor's `zoom` method to fit an image to the editor by width or height. Programmatically increase the zoom level until the image dimension matches the editor container's width or height. - -This example demonstrates scenarios that include buttons for fitting the image to its width (Fit Width) or height (Fit Height). - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/image-editor/how-to/fit-to-width-and-height/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Default.cs" %} -{% include code-snippet/image-editor/how-to/fit-to-width-and-height/default.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/image-editor/how-to/fit-to-width-and-height/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Default.cs" %} -{% include code-snippet/image-editor/how-to/fit-to-width-and-height/default.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - -Output be like the below. - -![ImageEditor Sample](../images/image-editor-fit-to-width-and-height.jpg) \ No newline at end of file diff --git a/ej2-asp-core-mvc/image-editor/how-to/open-dialog.md b/ej2-asp-core-mvc/image-editor/how-to/open-dialog.md index 7dbab7bc9b..d59a0df1af 100644 --- a/ej2-asp-core-mvc/image-editor/how-to/open-dialog.md +++ b/ej2-asp-core-mvc/image-editor/how-to/open-dialog.md @@ -1,11 +1,12 @@ --- layout: post -title: Render Editor in Dialog in ##Platform_Name## ImageEditor | Syncfusion -description: Learn here all about Render Image Editor in Dialog in Syncfusion ##Platform_Name## Image editor control of Syncfusion Essential JS 2 and more. +title: Filter in ##Platform_Name## ImageEditor Control | Syncfusion +description: Learn here all about Filter in Syncfusion ##Platform_Name## Image editor control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc -control: Render Image Editor in Dialog +control: Dialog publishingplatform: ##Platform_Name## documentation: ug +domainurl: ##DomainURL## --- # Render Image Editor in Dialog diff --git a/ej2-asp-core-mvc/image-editor/how-to/reset.md b/ej2-asp-core-mvc/image-editor/how-to/reset.md index 41ea846bc9..3cb514e251 100644 --- a/ej2-asp-core-mvc/image-editor/how-to/reset.md +++ b/ej2-asp-core-mvc/image-editor/how-to/reset.md @@ -1,14 +1,14 @@ --- layout: post -title: Reset an image in ##Platform_Name## ImageEditor Control | Syncfusion -description: Learn here all about How to Reset an image in Syncfusion ##Platform_Name## Image editor control of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Reset an image +title: Reset an image in Image Editor Component | Syncfusion +description: Learn here all about How to Reset an image in Image Component of Syncfusion Essential JS 2 and more. +control: Reset publishingplatform: ##Platform_Name## documentation: ug +domainurl: ##DomainURL## --- -# Reset an image in Image editor control +# Reset in the ##Platform_Name## Image Editor control The `reset` method in the Image Editor control provides the capability to undo all the changes made to an image and revert it back to its original state. This method is particularly useful when multiple adjustments, annotations, or transformations have been applied to an image and you want to start over with the original, unmodified version of the image. diff --git a/ej2-asp-core-mvc/image-editor/images/image-editor-fit-to-width-and-height.jpg b/ej2-asp-core-mvc/image-editor/images/image-editor-fit-to-width-and-height.jpg deleted file mode 100644 index 87ece1f125..0000000000 Binary files a/ej2-asp-core-mvc/image-editor/images/image-editor-fit-to-width-and-height.jpg and /dev/null differ diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/clipboard-cleanup.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/clipboard-cleanup.md deleted file mode 100644 index 6dafb378ac..0000000000 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/clipboard-cleanup.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -layout: post -title: Clipboard Cleanup in ##Platform_Name## Syncfusion Rich Text Editor Component -description: Learn here all about Clipboard Cleanup in Syncfusion ##Platform_Name## Rich Text Editor component of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Clipboard Cleanup -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Clipboard Cleanup in ##Platform_Name## Rich Text Editor Control - -The Rich Text Editor supports automatic cleanup of clipboard content during copy (`Ctrl + C`) and cut (`Ctrl + X`) operations. When this feature is enabled, unwanted inline styles are automatically removed from the clipboard content while preserving important structural elements such as tables, lists, and images. You can enable this behavior using the [EnableClipboardCleanup](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_EnableClipboardCleanup) property. - -When `EnableClipboardCleanup` is set to `true`, copy and cut operations are intercepted to remove unwanted inline styles. When set to `false` the browser’s default copy and cut behavior applies. - -> For a cleaner editing experience, `EnableClipboardCleanup` is `true` by default. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/clipboard-cleanup/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/clipboard-cleanup/controller.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/clipboard-cleanup/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/clipboard-cleanup/controller.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - -## Customizing Copied/Cut Content - -You can use the [BeforeClipboardWrite](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_BeforeClipboardWrite) event, which fires before content is written to the clipboard during copy or cut operations. This event lets you to modify the HTML and plain-text representations of the content and also determine whether the action is a copy or a cut. - -In this example, the `BeforeClipboardWrite` event is used to customize the selected content only during a copy operation, while the cut operation remains unaffected. To observe this behavior, try copying any text within the Rich Text Editor. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/clipboard-cleanup-customize/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/clipboard-cleanup-customize/controller.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/clipboard-cleanup-customize/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/clipboard-cleanup-customize/controller.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - -## Best Practices & Troubleshooting - -### Best Practices - -- Use `BeforeClipboardWrite` sparingly — heavy processing can slightly delay `Ctrl+C`. - -### Common Issues - -- “Event not firing” → Make sure you’re using the correct event name `BeforeClipboardWrite` (PascalCase in MVC). diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/import-and-export.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/import-and-export.md index ceb113313e..ba5ff7b5ef 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/import-and-export.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/import-and-export.md @@ -41,37 +41,6 @@ The following example illustrates how to set up the `ImportWord` in the Rich Tex {% endtabs %} {% endif %} -## Secure importing with authentication - -The Rich Text Editor provides functionality to import Word documents with authentication for secure importing. - -The [wordImporting](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorWordImporting.html) event provides [UploadingEventArgs](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.inputs.uploader.html) for secure Word file import. Use `currentRequest` to add authentication headers and `customFormData` to include extra parameters in the POST body along with the uploaded file. On the server, read headers and form data from the request to validate and process the import securely. - -The following example demonstrates how to configure `wordImporting` for secure importing: - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/secureimport/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/secureimport/controller.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/secureimport/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/secureimport/controller.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Exporting Content to PDF and Microsoft Word The Rich Text Editor's export functionality allows users to convert their edited content into PDF or Word documents with a single click, preserving all text styles, images, tables, and other formatting elements. @@ -101,35 +70,4 @@ The following example demonstrates how to configure the `ExportWord` and `Export {% include code-snippet/rich-text-editor/export/controller.cs %} {% endhighlight %} {% endtabs %} -{% endif %} - -## Secure exporting with authentication - -The Rich Text Editor provides functionality to export Word or PDF documents with authentication for secure exporting. - -The [documentExporting](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorDocumentExporting.html) event provides `ExportingEventArgs` for secure export of Word or PDF files. Use `exportType` to identify the format, `currentRequest` to add authentication headers, and `customFormData` to send extra parameters in the POST body. On the server, read headers and custom data to validate and process the export securely. - -The following example demonstrates how to configure `documentExporting` for secure exporting: - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/secureexport/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/secureexport/controller.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/secureexport/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/secureexport/controller.cs %} -{% endhighlight %} -{% endtabs %} {% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md index a301d0bf25..04c0f8181e 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/selection.md @@ -14,118 +14,7 @@ documentation: ug The Rich Text Editor supports character range-based text selection using the **Syncfusion Slider** control. This feature allows users to select a specific range of characters (e.g., 33–45) within the editor content, which is then automatically highlighted. -### Adding a Slider for character range selection - -The Rich Text Editor can be integrated with the **Slider** control to enable precise character range-based text selection. The slider is configured in `range` type, allowing users to select a start and end index within the editor content. When the slider values change, the corresponding text range is highlighted automatically. - -This approach is particularly useful for scenarios where exact character-level selection is required for operations such as copying, formatting, or analysis. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@{ -var sliderValue = new int[] { 0, 50 }; -} - -@Html.EJS().Slider("range").Value(sliderValue).Type(Syncfusion.EJ2.Inputs.SliderType.Range).Min(0).Max(400).Render() - -{% endhighlight %} -{% endtabs %} - -### Dynamic range adjustment based on content - -When the editor is created, the actual length of the text content is calculated, and the slider’s maximum value is updated dynamically to match this length. This ensures that the slider range always reflects the current content size. The editor is also focused programmatically to make the selection visible, and an initial selection is applied based on the slider’s default values. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@Html.EJS().RichTextEditor("editor").Height("400px").ContentTemplate(@

The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here. Key features: Provides IFRAME and DIV modes. Bulleted and numbered lists. Handles images, hyperlinks, videos, hyperlinks, uploads, etc. Contains undo/redo manager.

).Render() - - - -{% endhighlight %} -{% endtabs %} - -### Precise selection using DOM range - -The selection logic is implemented in the [Change](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.inputs.slider.html#Syncfusion_EJ2_Inputs_Slider_Change) event of the slider. It retrieves the start and end positions from the slider and ensures they are within valid bounds. The code then uses a helper function, `getTextNodeAtOffset()`, which employs a `TreeWalker` to traverse text nodes and locate the exact node and offset for the given character positions. - -A Range object is created using these offsets and applied to the current selection using the browser’s `Selection` API. This guarantees accurate highlighting even when the content spans multiple text nodes. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@{ -var sliderValue = new int[] { 0, 50 }; -} - -@Html.EJS().Slider("range").Value(sliderValue).Type(Syncfusion.EJ2.Inputs.SliderType.Range).Min(0).Max(400).Change("onChange").Render() - - - -{% endhighlight %} -{% endtabs %} - -### Helper function for accurate offset calculation - -The `getTextNodeAtOffset()` function uses a `TreeWalker` to traverse text nodes inside the editor and determine the exact node and offset for a given character index. This ensures that even complex content structures are handled correctly. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - - - -{% endhighlight %} -{% endtabs %} +This functionality is useful for scenarios where precise text selection is needed for operations such as copying, formatting, or analysis. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mail-merge.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mail-merge.md index 0559724158..fe10eb7882 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mail-merge.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mail-merge.md @@ -14,274 +14,6 @@ The Rich Text Editor can be customized to implement **Mail Merge** functionality This feature simplifies the creation of dynamic documents by allowing users to insert merge fields that are automatically populated with real data during content generation. -## Adding custom toolbar items for inserting merge fields - -To enable mail merge functionality, the Rich Text Editor toolbar is extended with two custom buttons: `Insert Field` and `Merge Data`. These buttons are added using the `template` property in [ToolbarSettings.Items](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Items), which points to custom HTML elements (#insertField and #merge_data). - -- **Insert Field:** Opens a dropdown list of merge fields for inserting placeholders like `{{FirstName}}` into the editor. -- **Merge Data:** Replaces all placeholders in the editor with actual values from a predefined data source. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@{ - var tools = new object[] - { - "Bold", "Italic", "Underline", "|", "Formats", "Alignments", "OrderedList", "UnorderedList", "|", "CreateLink", "Image", "CreateTable", "|", - new { tooltipText = "Merge Data", template = "#merge_data", command = "Custom" }, - new { tooltipText = "Insert Field", template = "#insert_Field", command = "Custom" }, - "SourceCode", "|", "Undo", "Redo", - }; -} - - - - -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@{ - var tools = new object[] - { - "Bold", "Italic", "Underline", "|", "Formats", "Alignments", "OrderedList", "UnorderedList", "|", "CreateLink", "Image", "CreateTable", "|", - new { tooltipText = "Merge Data", template = "#merge_data", command = "Custom" }, - new { tooltipText = "Insert Field", template = "#insert_Field", command = "Custom" }, - "SourceCode", "|", "Undo", "Redo", - }; -} - -@Html.EJS().RichTextEditor("mailMergeEditor").ToolbarSettings(e => e.Items(tools)).Value(rteValue).Render() - -{% endhighlight %} -{% endtabs %} - -{% endif %} - -## Using DropDownButton for selecting placeholders - -The **DropDownButton** component displays a list of merge fields such as First Name, Last Name, and Company Name. When a user selects an item, the corresponding placeholder (e.g., {{FirstName}}) is inserted at the current cursor position using the `insertHTML` command. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@{ - var items = new List - { - new { text = "First Name" }, - new { text = "Last Name" }, - new { text = "Support Email" }, - new { text = "Company Name" }, - new { text = "Promo Code" }, - new { text = "Support Phone Number" }, - new { text = "Customer ID" }, - new { text = "Expiration Date" }, - new { text = "Subscription Plan" } - }; -} - - - - - -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@{ - var items = new List - { - new { text = "First Name" }, - new { text = "Last Name" }, - new { text = "Support Email" }, - new { text = "Company Name" }, - new { text = "Promo Code" }, - new { text = "Support Phone Number" }, - new { text = "Customer ID" }, - new { text = "Expiration Date" }, - new { text = "Subscription Plan" } - }; -} - -@Html.EJS().DropDownButton("insert_Field").Content("Insert Field").Select("onItemSelect").Items(items).CssClass("e-rte-dropdown-btn e-rte-dropdown-popup e-rte-dropdown-items e-rte-elements e-rte-dropdown-menu").Render() - - - -{% endhighlight %} -{% endtabs %} - -{% endif %} - -## Populating merge fields using Mention - -The **Mention** control provides an alternative way to insert placeholders by typing the {{ character inside the editor. A popup list of merge fields appears, allowing quick selection without using the toolbar. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@{ - var mergeData = new List - { - new { text = "First Name", value = "FirstName" }, - new { text = "Last Name", value = "LastName" }, - new { text = "Support Email", value = "SupportEmail" }, - new { text = "Company Name", value = "CompanyName" }, - new { text = "Promo Code", value = "PromoCode" }, - new { text = "Support Phone Number", value = "SupportPhoneNumber" }, - new { text = "Customer ID", value = "CustomerID" }, - new { text = "Expiration Date", value = "ExpirationDate" }, - new { text = "Subscription Plan", value = "SubscriptionPlan" } - }; - char mentionChar = {{; - -} - - - - -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@{ - var mergeData = new List - { - new { text = "First Name", value = "FirstName" }, - new { text = "Last Name", value = "LastName" }, - new { text = "Support Email", value = "SupportEmail" }, - new { text = "Company Name", value = "CompanyName" }, - new { text = "Promo Code", value = "PromoCode" }, - new { text = "Support Phone Number", value = "SupportPhoneNumber" }, - new { text = "Customer ID", value = "CustomerID" }, - new { text = "Expiration Date", value = "ExpirationDate" }, - new { text = "Subscription Plan", value = "SubscriptionPlan" } - }; - char mentionChar = {{; -} - -@Html.EJS().Mention("mentionField").MentionChar(mentionChar).Created("onMentionCreate").Target("#mailMergeEditor_rte-edit-view").DataSource(mergeData).AllowSpaces(true).Fields(new MentionFieldSettings { Text = "Text" }).DisplayTemplate(" {{${Value}}} ").Render() - -{% endhighlight %} -{% endtabs %} - -{% endif %} - -## Replacing placeholders with actual data dynamically - -When the **Merge Data** button is clicked, the editor content is processed to replace all placeholders with actual values from the `placeholderData` object. This is done using a regular expression in the `replacePlaceholders()` function. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - - - - - -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@Html.EJS().Button("merge_data").Content("Merge Data").Click("onClickHandler").CssClass("e-tbar-btn e-btn").Render() - - - -{% endhighlight %} -{% endtabs %} - -{% endif %} - {% if page.publishingplatform == "aspnet-core" %} {% tabs %} @@ -303,4 +35,4 @@ When the **Merge Data** button is clicked, the editor content is processed to re {% include code-snippet/rich-text-editor/mail-merge/controller.cs %} {% endhighlight %} {% endtabs %} -{% endif %} +{% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md index dcd04131f5..50ce849adc 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md @@ -1,6 +1,6 @@ --- layout: post -title: Text Formatting in ##Platform_Name## Rich Text Editor | Syncfusion +title: Text formatting and Structure in ##Platform_Name## Rich Text Editor | Syncfusion description: Learn here all about Text formatting and Structure in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Text formatting and Structure @@ -8,7 +8,7 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Text Formatting in the ##Platform_Name## Rich Text Editor Control +# Text Formatting and Structure in the ##Platform_Name## Rich Text Editor Control ## Basic text styling @@ -247,7 +247,7 @@ In the Rich Text Editor, pressing the `Tab` key while the cursor is inside a lis Please refer to the below video for visual behavior and interaction examples: -![Rich Text Editor list editing behaviour](../../images/list-editing.gif) +![Rich Text Editor list editing behaviour](../images/list-editing.gif) ## Increase and decrease indent @@ -463,68 +463,6 @@ While the toolbar does not provide a direct method to apply blockquote formattin {% endtabs %} {% endif %} -## Line Height - -The Rich Text Editor supports line height feature which allows users to adjust the vertical spacing between lines of text. To change the line height, select the text you want to modify and click the Line Height icon in the toolbar. Choose from the available spacing options to apply the desired vertical spacing. This feature is especially useful for creating visually appealing paragraphs and ensuring consistent formatting across your document. - -### Built-in line height - -You can add the `LineHeight` tool to the toolbar in the Rich Text Editor using [toolbarSettings.items](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#items) property. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/line-height/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/line-height/controller.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/line-height/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/line-height/controller.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - -The Rich Text Editor comes with a pre-configured set of [`lineHeight`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#lineheight) property. - -### Custom line height - -The Rich Text Editor supports custom line height along with the existing line height dropdown list. To add additional line height to the line height dropdown, you can configure the items field of the [`lineHeight`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#lineheight) property. This allows you to extend the available line height options beyond the default selection. - -The [`supportAllValues`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#supportAllValues) setting enables the line height dropdown to display and retain line-height values that are not part of the predefined options. When `supportAllValues` property is turned on, the dropdown will show the current line-height value from the selection, even if that value is not present in the configured lineHeights array. By default, `supportAllValues` will be set to false. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/line-height-cs1/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/line-height-cs1/controller.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/line-height-cs1/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/line-height-cs1/controller.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Horizontal line The Rich Text Editor enables users to insert horizontal dividers using the `HorizontalLine` tool available in the toolbar. Horizontal lines (
) help visually separate sections of content, enhancing readability and structural clarity. @@ -688,64 +626,4 @@ Using `Clear Format` makes it easy to undo styling changes and keep your text lo {% include code-snippet/rich-text-editor/clear-format-cs2/controller.cs %} {% endhighlight %} {% endtabs %} -{% endif %} - -## Markdown Auto Format - -The Rich Text Editor supports automatic conversion of Markdown syntax into HTML using the [EnableMarkdownAutoFormat](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_EnableMarkdownAutoformat) property. This feature simplifies content creation by transforming Markdown elements into their corresponding HTML tags, ensuring consistency and improving efficiency. - -By default, Markdown Auto-Format is enabled. The editor supports both inline formatting and block-level elements. As you type, Markdown syntax is automatically converted into semantic HTML tags, ensuring a smooth and efficient editing experience. - -|Commands|Syntax Example| Description | -|--------|------------------------------------------|------------| -| Bold | `**`Bold Text`**` or `__`Bold Text`__` | Makes text bold by wrapping it with `**` or `__`. | -| Italic | `*`Italic Text`*` or `_`Italic Text`_` | Makes text italic by wrapping it with `*`or `_`. | -| Bold and Italics | `***`bold and Italic text`***`. | Combines bold and italic by wrapping text with `***`. | -| Strike Through | `~~`Strikethrough`~~` | Adds a strikethrough effect by wrapping text with `~~`. | -| Inline Code (Single line) | \`Inline Code\` | Displays inline code by wrapping text with \`. | -| Heading 1 | `#` Heading 1 | Creates an H1 heading by starting the line with `#`. | -| Heading 2 | `##` Heading 2 | Creates an H2 heading by starting the line with `##`. | -| Heading 3 | `###` Heading 3 | Creates an H2 heading by starting the line with `###`. | -| Heading 4 | `####` Heading 4 | Creates an H2 heading by starting the line with `####` | -| Heading 5 | `#####` Heading 5 | Creates an H2 heading by starting the line with `#####` | -| Heading 6 | `######` Heading 6 | Creates an H2 heading by starting the line with `######` | -| Blockquotes | `>` Blockquotes text | Adds a blockquote by starting the line with `>`. | -| Code block (Multi Line) | \`\`\`
Multi line code text
Multi line code text
\`\`\` | Creates a code block by starting the line with \`\`\` | -| Ordered List | `1.` First
`1.` Second | Creates a numbered list by starting lines with `1.` or `i.`. | -| Unordered List | `*` First
`*` second | Creates a bulleted list by starting lines with `*` or `-`. | -| Check List | `[]` Task
`[x]` Completed Task | Creates a checklist using `[]` for check list and `[x]` for checked checklist.| -| Horizontal Line | `---` or `___` | Inserts a horizontal line using `---` or `___` on a new line.| - - -### How Markdown auto-formatting works - -#### Inline Formats -Elements such as **bold**, *italic*, ~~strikethrough~~, and `inline code` are converted **immediately after the closing marker is typed**. -**Example:** Typing `**bold**` will render as **bold** the moment you enter the second `*`. - -#### Block Formats -Elements such as headings, lists, blockquotes, and code block are converted **only after a space is typed following the marker**. -**Example:** Typing `# Title` will render as a heading only after you type the space following `#`. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/markdown-autoformat/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/markdown-autoformat/controller.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/markdown-autoformat/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/markdown-autoformat/controller.cs %} -{% endhighlight %} -{% endtabs %} {% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/clipboard-cleanup.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/clipboard-cleanup.md deleted file mode 100644 index b8391864f1..0000000000 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/clipboard-cleanup.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -layout: post -title: Clipboard Cleanup in ##Platform_Name## Syncfusion Rich Text Editor Control -description: Learn here all about Clipboard Cleanup in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Clipboard Cleanup -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Clipboard Cleanup in ##Platform_Name## Rich Text Editor Control - -The Rich Text Editor supports automatic cleanup of clipboard content during copy (`Ctrl + C`) and cut (`Ctrl + X`) operations. When this feature is enabled, unwanted inline styles are automatically removed from the clipboard content while preserving important structural elements such as tables, lists, and images. You can enable this behavior using the [enableClipboardCleanup](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_EnableClipboardCleanup) property. - -When `enableClipboardCleanup` is set to `true`, copy and cut operations are intercepted to remove unwanted inline styles. When set to `false` the browser’s default copy and cut behavior applies. - -> For a cleaner editing experience, `enableClipboardCleanup` is `true` by default. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/clipboard-cleanup/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/clipboard-cleanup/controller.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/clipboard-cleanup/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/clipboard-cleanup/controller.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - -## Customizing Copied/Cut Content - -You can use the [beforeClipboardWrite](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_BeforeClipboardWrite) event, which fires before content is written to the clipboard during copy or cut operations. This event lets you to modify the HTML and plain-text representations of the content and also determine whether the action is a copy or a cut. - -In this example, the `beforeClipboardWrite` event is used to customize the selected content only during a copy operation, while the cut operation remains unaffected. To observe this behavior, try copying any text within the Rich Text Editor. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/clipboard-cleanup-customize/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/clipboard-cleanup-customize/controller.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/clipboard-cleanup-customize/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/clipboard-cleanup-customize/controller.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - -## Best Practices & Troubleshooting - -### Best Practices - -- Use `beforeClipboardWrite` sparingly — heavy processing can slightly delay `Ctrl+C`. - -### Common Issues - -- “Event not firing” → Make sure you’re using the correct event name `beforeClipboardWrite` (camelCase in Core). - diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/import-and-export.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/import-and-export.md index a1ebd8ad7c..00e46422d6 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/import-and-export.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/import-and-export.md @@ -41,37 +41,6 @@ The following example illustrates how to set up the `ImportWord` in the Rich Tex {% endtabs %} {% endif %} -## Secure importing with authentication - -The Rich Text Editor provides functionality to import Word documents with authentication for secure importing. - -The [wordImporting](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorWordImporting.html) event provides [UploadingEventArgs](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.inputs.uploader.html) for secure Word file import. Use `currentRequest` to add authentication headers and `customFormData` to include extra parameters in the POST body along with the uploaded file. On the server, read headers and form data from the request to validate and process the import securely. - -The following example demonstrates how to configure `wordImporting` for secure importing: - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/secureimport/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/secureimport/controller.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/secureimport/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/secureimport/controller.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Exporting content to PDF and Microsoft Word The Rich Text Editor's export functionality allows users to convert their edited content into PDF or Word documents with a single click, preserving all text styles, images, tables, and other formatting elements. @@ -101,35 +70,4 @@ The following example demonstrates how to configure the `ExportWord` and `Export {% include code-snippet/rich-text-editor/export/controller.cs %} {% endhighlight %} {% endtabs %} -{% endif %} - -## Secure exporting with authentication - -The Rich Text Editor provides functionality to export Word or PDF documents with authentication for secure exporting. - -The [documentExporting](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorDocumentExporting.html) event provides `ExportingEventArgs` for secure export of Word or PDF files. Use `exportType` to identify the format, `currentRequest` to add authentication headers, and `customFormData` to send extra parameters in the POST body. On the server, read headers and custom data to validate and process the export securely. - -The following example demonstrates how to configure `documentExporting` for secure exporting: - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/secureexport/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/secureexport/controller.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/secureexport/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/secureexport/controller.cs %} -{% endhighlight %} -{% endtabs %} {% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md index 2bcca377b8..04c0f8181e 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/selection.md @@ -14,124 +14,7 @@ documentation: ug The Rich Text Editor supports character range-based text selection using the **Syncfusion Slider** control. This feature allows users to select a specific range of characters (e.g., 33–45) within the editor content, which is then automatically highlighted. -### Adding a Slider for character range selection - -The Rich Text Editor can be integrated with the **Slider** control to enable precise character range-based text selection. The slider is configured in `range` type, allowing users to select a start and end index within the editor content. When the slider values change, the corresponding text range is highlighted automatically. - -This approach is particularly useful for scenarios where exact character-level selection is required for operations such as copying, formatting, or analysis. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@{ -var sliderValue = new int[] { 0, 50 }; -} - - - -{% endhighlight %} -{% endtabs %} - -### Dynamic range adjustment based on content - -When the editor is created, the actual length of the text content is calculated, and the slider’s maximum value is updated dynamically to match this length. This ensures that the slider range always reflects the current content size. The editor is also focused programmatically to make the selection visible, and an initial selection is applied based on the slider’s default values. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - - - -

- The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here. Key features: Provides IFRAME and DIV modes. Bulleted and numbered lists. Handles images, hyperlinks, videos, hyperlinks, uploads, etc. Contains undo/redo manager. -

- - - - - -{% endhighlight %} -{% endtabs %} - -### Precise selection using DOM range - -The selection logic is implemented in the [change](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.inputs.slider.html#Syncfusion_EJ2_Inputs_Slider_Change) event of the slider. It retrieves the start and end positions from the slider and ensures they are within valid bounds. The code then uses a helper function, `getTextNodeAtOffset()`, which employs a `TreeWalker` to traverse text nodes and locate the exact node and offset for the given character positions. - -A Range object is created using these offsets and applied to the current selection using the browser’s `Selection` API. This guarantees accurate highlighting even when the content spans multiple text nodes. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@{ -var sliderValue = new int[] { 0, 50 }; -} - - - - - -{% endhighlight %} -{% endtabs %} - -### Helper function for accurate offset calculation - -The `getTextNodeAtOffset()` function uses a `TreeWalker` to traverse text nodes inside the editor and determine the exact node and offset for a given character index. This ensures that even complex content structures are handled correctly. - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - - - -{% endhighlight %} -{% endtabs %} +This functionality is useful for scenarios where precise text selection is needed for operations such as copying, formatting, or analysis. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mail-merge.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mail-merge.md index d2ed3b20ce..fe10eb7882 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mail-merge.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mail-merge.md @@ -14,273 +14,6 @@ The Rich Text Editor can be customized to implement **Mail Merge** functionality This feature simplifies the creation of dynamic documents by allowing users to insert merge fields that are automatically populated with real data during content generation. -## Adding custom toolbar items for inserting merge fields - -To enable mail merge functionality, the Rich Text Editor toolbar is extended with two custom buttons: `Insert Field` and `Merge Data`. These buttons are added using the `template` property in [toolbarSettings.items](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorToolbarSettings_Items), which points to custom HTML elements (#insertField and #merge_data). - -- **Insert Field:** Opens a dropdown list of merge fields for inserting placeholders like `{{FirstName}}` into the editor. -- **Merge Data:** Replaces all placeholders in the editor with actual values from a predefined data source. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@{ - var tools = new object[] - { - "Bold", "Italic", "Underline", "|", "Formats", "Alignments", "OrderedList", "UnorderedList", "|", "CreateLink", "Image", "CreateTable", "|", - new { tooltipText = "Merge Data", template = "#merge_data", command = "Custom" }, - new { tooltipText = "Insert Field", template = "#insert_Field", command = "Custom" }, - "SourceCode", "|", "Undo", "Redo", - }; -} - - - - -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@{ - var tools = new object[] - { - "Bold", "Italic", "Underline", "|", "Formats", "Alignments", "OrderedList", "UnorderedList", "|", "CreateLink", "Image", "CreateTable", "|", - new { tooltipText = "Merge Data", template = "#merge_data", command = "Custom" }, - new { tooltipText = "Insert Field", template = "#insert_Field", command = "Custom" }, - "SourceCode", "|", "Undo", "Redo", - }; -} - -@Html.EJS().RichTextEditor("mailMergeEditor").ToolbarSettings(e => e.Items(tools)).Value(rteValue).Render() - -{% endhighlight %} -{% endtabs %} - -{% endif %} - -## Using DropDownButton for selecting placeholders - -The **DropDownButton** component displays a list of merge fields such as First Name, Last Name, and Company Name. When a user selects an item, the corresponding placeholder (e.g., {{FirstName}}) is inserted at the current cursor position using the `insertHTML` command. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@{ - var items = new List - { - new { text = "First Name" }, - new { text = "Last Name" }, - new { text = "Support Email" }, - new { text = "Company Name" }, - new { text = "Promo Code" }, - new { text = "Support Phone Number" }, - new { text = "Customer ID" }, - new { text = "Expiration Date" }, - new { text = "Subscription Plan" } - }; -} - - - - - -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@{ - var items = new List - { - new { text = "First Name" }, - new { text = "Last Name" }, - new { text = "Support Email" }, - new { text = "Company Name" }, - new { text = "Promo Code" }, - new { text = "Support Phone Number" }, - new { text = "Customer ID" }, - new { text = "Expiration Date" }, - new { text = "Subscription Plan" } - }; -} - -@Html.EJS().DropDownButton("insert_Field").Content("Insert Field").Select("onItemSelect").Items(items).CssClass("e-rte-dropdown-btn e-rte-dropdown-popup e-rte-dropdown-items e-rte-elements e-rte-dropdown-menu").Render() - - - -{% endhighlight %} -{% endtabs %} - -{% endif %} - -## Populating merge fields using Mention - -The **Mention** control provides an alternative way to insert placeholders by typing the {{ character inside the editor. A popup list of merge fields appears, allowing quick selection without using the toolbar. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@{ - var mergeData = new List - { - new { text = "First Name", value = "FirstName" }, - new { text = "Last Name", value = "LastName" }, - new { text = "Support Email", value = "SupportEmail" }, - new { text = "Company Name", value = "CompanyName" }, - new { text = "Promo Code", value = "PromoCode" }, - new { text = "Support Phone Number", value = "SupportPhoneNumber" }, - new { text = "Customer ID", value = "CustomerID" }, - new { text = "Expiration Date", value = "ExpirationDate" }, - new { text = "Subscription Plan", value = "SubscriptionPlan" } - }; - char mentionChar = {{; -} - - - - -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@{ - var mergeData = new List - { - new { text = "First Name", value = "FirstName" }, - new { text = "Last Name", value = "LastName" }, - new { text = "Support Email", value = "SupportEmail" }, - new { text = "Company Name", value = "CompanyName" }, - new { text = "Promo Code", value = "PromoCode" }, - new { text = "Support Phone Number", value = "SupportPhoneNumber" }, - new { text = "Customer ID", value = "CustomerID" }, - new { text = "Expiration Date", value = "ExpirationDate" }, - new { text = "Subscription Plan", value = "SubscriptionPlan" } - }; - char mentionChar = {{; -} - -@Html.EJS().Mention("mentionField").MentionChar(mentionChar).Created("onMentionCreate").Target("#mailMergeEditor_rte-edit-view").DataSource(mergeData).AllowSpaces(true).Fields(new MentionFieldSettings { Text = "Text" }).DisplayTemplate(" {{${Value}}} ").Render() - -{% endhighlight %} -{% endtabs %} - -{% endif %} - -## Replacing placeholders with actual data dynamically - -When the **Merge Data** button is clicked, the editor content is processed to replace all placeholders with actual values from the `placeholderData` object. This is done using a regular expression in the `replacePlaceholders()` function. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - - - - - -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} - -@Html.EJS().Button("merge_data").Content("Merge Data").Click("onClickHandler").CssClass("e-tbar-btn e-btn").Render() - - - -{% endhighlight %} -{% endtabs %} - -{% endif %} - {% if page.publishingplatform == "aspnet-core" %} {% tabs %} diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md index e25a10e051..b4960173d6 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md @@ -1,6 +1,6 @@ --- layout: post -title: Text Formatting in ##Platform_Name## Rich Text Editor | Syncfusion +title: Text formatting and Structure in ##Platform_Name## Rich Text Editor | Syncfusion description: Learn here all about Text formatting and Structure in Syncfusion ##Platform_Name## Rich Text Editor control of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Text formatting and Structure @@ -8,7 +8,7 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Text Formatting in the ASP.NET Core Rich Text Editor Control +# Text Formatting and Structure in the ##Platform_Name## Rich Text Editor Control ## Basic text styling @@ -247,7 +247,7 @@ In the Rich Text Editor, pressing the `Tab` key while the cursor is inside a lis Please refer to the below video for visual behavior and interaction examples: -![Rich Text Editor list editing behaviour](../../images/list-editing.gif) +![Rich Text Editor list editing behaviour](../images/list-editing.gif) ## Increase and decrease indent @@ -463,68 +463,6 @@ While the toolbar does not provide a direct method to apply blockquote formattin {% endtabs %} {% endif %} -## Line Height - -The Rich Text Editor supports line height feature which allows users to adjust the vertical spacing between lines of text. To change the line height, select the text you want to modify and click the Line Height icon in the toolbar. Choose from the available spacing options to apply the desired vertical spacing. This feature is especially useful for creating visually appealing paragraphs and ensuring consistent formatting across your document. - -### Built-in line height - -You can add the `LineHeight` tool to the toolbar in the Rich Text Editor using [toolbarSettings.items](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#items) property. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/line-height/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/line-height/controller.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/line-height/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/line-height/controller.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - -The Rich Text Editor comes with a pre-configured set of [`lineHeight`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#lineheight) property. - -### Custom line height - -The Rich Text Editor supports custom line height along with the existing line height dropdown list. To add additional line height to the line height dropdown, you can configure the items field of the [`lineHeight`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#lineheight) property. This allows you to extend the available line height options beyond the default selection. - -The [`supportAllValues`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#supportAllValues) setting enables the line height dropdown to display and retain line-height values that are not part of the predefined options. When `supportAllValues` property is turned on, the dropdown will show the current line-height value from the selection, even if that value is not present in the configured lineHeights array. By default, `supportAllValues` will be set to false. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/line-height-cs1/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/line-height-cs1/controller.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/line-height-cs1/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/line-height-cs1/controller.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - ## Horizontal line The Rich Text Editor enables users to insert horizontal dividers using the `HorizontalLine` tool available in the toolbar. Horizontal lines (
) help visually separate sections of content, enhancing readability and structural clarity. @@ -558,7 +496,7 @@ Use the `HorizontalLine` tool in the editor below to see the feature in action. ## Format painter -The format painter tool enables users to replicate formatting from one text segment and apply it to another. It can be accessed through the toolbar or keyboard shortcuts, allowing for the transfer of formatting styles from individual words to entire paragraphs. Customization options for the format painter are available through the [formatPainterSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFormatPainterSettings.html) property. +The format painter tool enables users to replicate formatting from one text segment and apply it to another. It can be accessed through the toolbar or keyboard shortcuts, allowing for the transfer of formatting styles from individual words to entire paragraphs. Customization options for the format painter are available through the [formatPainterSettings](../api/rich-text-editor/https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFormatPainterSettings.html/) property. ### Configuring format painter tool in the toolbar @@ -579,7 +517,7 @@ The following code example shows how to add the format painter tool in the Rich ### Customizing copy and paste format -You can customize the format painter tool in the Rich Text Editor using the [formatPainterSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFormatPainterSettings.html) property. +You can customize the format painter tool in the Rich Text Editor using the [formatPainterSettings](../api/rich-text-editor/https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFormatPainterSettings.html/) property. The [allowedFormats](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorFormatPainterSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorFormatPainterSettings_AllowedFormats) property helps you to specify tag names that allow the formats to be copied from the selected text. For instance, you can include formats from the selected text using tags like `p; h1; h2; h3; div; ul; ol; li; span; strong; em; code;`. The following example demonstrates how to customize this functionality. @@ -688,64 +626,4 @@ Using `Clear Format` makes it easy to undo styling changes and keep your text lo {% include code-snippet/rich-text-editor/clear-format-cs2/controller.cs %} {% endhighlight %} {% endtabs %} -{% endif %} - -## Markdown Auto Format - -The Rich Text Editor supports automatic conversion of Markdown syntax into HTML using the [EnableMarkdownAutoFormat](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_EnableMarkdownAutoformat) property. This feature simplifies content creation by transforming Markdown elements into their corresponding HTML tags, ensuring consistency and improving efficiency. - -By default, Markdown Auto-Format is enabled. The editor supports both inline formatting and block-level elements. As you type, Markdown syntax is automatically converted into semantic HTML tags, ensuring a smooth and efficient editing experience. - -|Commands|Syntax Example| Description | -|--------|------------------------------------------|------------| -| Bold | `**`Bold Text`**` or `__`Bold Text`__` | Makes text bold by wrapping it with `**` or `__`. | -| Italic | `*`Italic Text`*` or `_`Italic Text`_` | Makes text italic by wrapping it with `*`or `_`. | -| Bold and Italics | `***`bold and Italic text`***`. | Combines bold and italic by wrapping text with `***`. | -| Strike Through | `~~`Strikethrough`~~` | Adds a strikethrough effect by wrapping text with `~~`. | -| Inline Code (Single line) | \`Inline Code\` | Displays inline code by wrapping text with \`. | -| Heading 1 | `#` Heading 1 | Creates an H1 heading by starting the line with `#`. | -| Heading 2 | `##` Heading 2 | Creates an H2 heading by starting the line with `##`. | -| Heading 3 | `###` Heading 3 | Creates an H2 heading by starting the line with `###`. | -| Heading 4 | `####` Heading 4 | Creates an H2 heading by starting the line with `####` | -| Heading 5 | `#####` Heading 5 | Creates an H2 heading by starting the line with `#####` | -| Heading 6 | `######` Heading 6 | Creates an H2 heading by starting the line with `######` | -| Blockquotes | `>` Blockquotes text | Adds a blockquote by starting the line with `>`. | -| Code block (Multi Line) | \`\`\`
Multi line code text
Multi line code text
\`\`\` | Creates a code block by starting the line with \`\`\` | -| Ordered List | `1.` First
`1.` Second | Creates a numbered list by starting lines with `1.` or `i.`. | -| Unordered List | `*` First
`*` second | Creates a bulleted list by starting lines with `*` or `-`. | -| Check List | `[]` Task
`[x]` Completed Task | Creates a checklist using `[]` for check list and `[x]` for checked checklist.| -| Horizontal Line | `---` or `___` | Inserts a horizontal line using `---` or `___` on a new line.| - - -### How Markdown auto-formatting works - -#### Inline Formats -Elements such as **bold**, *italic*, ~~strikethrough~~, and `inline code` are converted **immediately after the closing marker is typed**. -**Example:** Typing `**bold**` will render as **bold** the moment you enter the second `*`. - -#### Block Formats -Elements such as headings, lists, blockquotes, and code block are converted **only after a space is typed following the marker**. -**Example:** Typing `# Title` will render as a heading only after you type the space following `#`. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/markdown-autoformat/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/markdown-autoformat/controller.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/rich-text-editor/markdown-autoformat/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/markdown-autoformat/controller.cs %} -{% endhighlight %} -{% endtabs %} {% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/rich-text-editor/images/list-editing.gif b/ej2-asp-core-mvc/rich-text-editor/images/list-editing.gif index 881d39dc12..2b004d0e7b 100644 Binary files a/ej2-asp-core-mvc/rich-text-editor/images/list-editing.gif and b/ej2-asp-core-mvc/rich-text-editor/images/list-editing.gif differ diff --git a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/annotation.md b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/annotation.md new file mode 100644 index 0000000000..10656dde36 --- /dev/null +++ b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/annotation.md @@ -0,0 +1,77 @@ +--- +layout: post +title: Annotations in ##Platform_Name## Smart Paste Button Control | Syncfusion +description: Learn how to use annotations with the ##Platform_Name## Smart Paste Button control of Syncfusion Essential JS 2 and more details. +platform: ej2-asp-core-mvc +control: Annotations +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Annotations in ASP.NET Core Smart Paste Button Control + +The Syncfusion ASP.NET Core Smart Paste Button control leverages AI to intelligently parse clipboard content and populate form fields, enhancing user productivity. By default, the control analyzes form fields (e.g., ``, ` + +
+ + +
+
+ +
+ + +
+
+ + +
+
+
+ + +
+ + + + + +
+
+ I am John Doe from the United States. My email is johndoe@example.com, and my phone number is 555-123-4567. I’d like to inquire about your services and have a detailed discussion regarding your product offerings. Please contact me via email. I’m happy to subscribe to your newsletter for updates. Thank you! +
+ +{% endhighlight %} +{% endtabs %} + +![Syncfusion ASP.NET Core Smart Paste Button with Annotation](images/SmartPaste_Annotation.gif) diff --git a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/claude-service.md b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/claude-service.md new file mode 100644 index 0000000000..b42deedf6b --- /dev/null +++ b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/claude-service.md @@ -0,0 +1,252 @@ +--- +layout: post +title: Claude AI in ##Platform_Name## Smart Paste Button Control | Syncfusion +description: Learn how to implement a custom AI service using Claude AI with ##Platform_Name## Smart Paste Button control of Syncfusion Essential JS 2 and more details. +platform: ej2-asp-core-mvc +control: Claude AI +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Claude AI Integration with ASP.NET Core Smart Paste Button + +The Syncfusion ASP.NET Core SmartPaste Button control enables AI-powered, context-aware content pasting into forms, typically using OpenAI or Azure OpenAI. This guide explains how to integrate the Anthropic Claude AI service with the Smart Paste Button using the `IChatInferenceService` interface, enabling custom AI-driven responses in a ASP.NET Core App. + +## Setting Up Claude + +1. **Create an Anthropic Account** + Visit [Anthropic Console](https://console.anthropic.com), sign up, and complete the verification process. +2. **Obtain an API Key** + Navigate to [API Keys](https://console.anthropic.com/settings/keys) and click "Create Key." +3. **Review Model Specifications** + Refer to [Claude Models Documentation](https://docs.anthropic.com/claude/docs/models-overview) for details on available models. + +## Create a Claude AI Service + +Create a service class to manage interactions with the Claude API, including authentication and response processing for the Smart Paste Button. + +1. Create a `Services` folder in your project. +2. Add a new file named `ClaudeAIService.cs` in the `Services` folder. +3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json`). + +```csharp +using Microsoft.Extensions.AI; +using System.Net; +using System.Text; +using System.Text.Json; + +public class ClaudeAIService +{ + private readonly string _apiKey; + private readonly string _modelName = "claude-3-5-sonnet-20241022"; // Example model + private readonly string _endpoint = "https://api.anthropic.com/v1/messages"; + private static readonly HttpClient HttpClient = new(new SocketsHttpHandler + { + PooledConnectionLifetime = TimeSpan.FromMinutes(30), + EnableMultipleHttp2Connections = true + }) + { + DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for compatibility + }; + private static readonly JsonSerializerOptions JsonOptions = new() + { + PropertyNamingPolicy = JsonNamingPolicy.CamelCase + }; + + public ClaudeAIService(IConfiguration configuration) + { + _apiKey = configuration["Claude:ApiKey"] ?? throw new ArgumentNullException("Claude API key is missing."); + if (!HttpClient.DefaultRequestHeaders.Contains("x-api-key")) + { + HttpClient.DefaultRequestHeaders.Clear(); + HttpClient.DefaultRequestHeaders.Add("x-api-key", _apiKey); + HttpClient.DefaultRequestHeaders.Add("anthropic-version", "2023-06-01"); // Check latest version in Claude API docs + } + } + + public async Task CompleteAsync(IList chatMessages) + { + var requestBody = new ClaudeChatRequest + { + Model = _modelName, + Max_tokens = 1000, // Maximum tokens in response + Messages = chatMessages.Select(m => new ClaudeMessage + { + Role = m.Role == ChatRole.User ? "user" : "assistant", + Content = m.Text + }).ToList(), + Stop_sequences = new List { "END_INSERTION", "NEED_INFO", "END_RESPONSE" } // Configurable stop sequences + }; + + var content = new StringContent(JsonSerializer.Serialize(requestBody, JsonOptions), Encoding.UTF8, "application/json"); + + try + { + var response = await HttpClient.PostAsync(_endpoint, content); + response.EnsureSuccessStatusCode(); + var responseString = await response.Content.ReadAsStringAsync(); + var responseObject = JsonSerializer.Deserialize(responseString, JsonOptions); + return responseObject?.Content?.FirstOrDefault()?.Text ?? "No response from Claude model."; + } + catch (Exception ex) when (ex is HttpRequestException || ex is JsonException) + { + throw new InvalidOperationException("Failed to communicate with Claude API.", ex); + } + } +} +``` + +N> Store the Claude API key in `appsettings.json` (e.g., `{ "Claude": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. Verify the `anthropic-version` header in [Claude API Documentation](https://docs.anthropic.com/claude/docs) for the latest version. + +## Define Request and Response Models + +Define C# classes to match the Claude API’s JSON request and response format. + +1. Create a new file named `ClaudeModels.cs` in the `Services` folder. +2. Add the following model classes: + +```csharp +public class ClaudeChatRequest +{ + public string Model { get; set; } + public int Max_tokens { get; set; } + public List Messages { get; set; } + public List Stop_sequences { get; set; } +} + +public class ClaudeMessage +{ + public string Role { get; set; } + public string Content { get; set; } +} + +public class ClaudeChatResponse +{ + public List Content { get; set; } +} + +public class ClaudeContentBlock +{ + public string Text { get; set; } +} +``` + +## Create a Custom AI Service + +Implement the `IChatInferenceService` interface to connect the Smart Paste Button to the Claude service, acting as a bridge for AI-generated responses. + +1. Create a new file named `ClaudeInferenceService.cs` in the `Services` folder. +2. Add the following implementation: + +```csharp +using Syncfusion.EJ2.AI; +using System.Threading.Tasks; + +public class ClaudeInferenceService : IChatInferenceService +{ + private readonly ClaudeAIService _claudeService; + + public ClaudeInferenceService(ClaudeAIService claudeService) + { + _claudeService = claudeService; + } + + public async Task GenerateResponseAsync(ChatParameters options) + { + return await _claudeService.CompleteAsync(options.Messages); + } +} +``` + +## Configure the ASP.NET Core App + +Register the Claude service and `IChatInferenceService` implementation in the dependency injection container. + +Update the **~/Program.cs** file as follows: + +```csharp +using Syncfusion.EJ2; +using Syncfusion.EJ2.AI; + +builder.Services.AddRazorPages(); +builder.Services.AddSyncfusionSmartComponents(); +builder.Services.AddSingleton(); +builder.Services.AddSingleton(); + +var app = builder.Build(); +// ... +``` + +## Add the Smart Paste Button + +Add the Smart Paste Button to a form in the **~/Pages/Index.cshtml** file to test the Claude AI integration. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +

Contact Form

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
+
+ + +
+
+
+ + +
+ + + +
+ +
+
+ I am John Doe from the United States. My email is johndoe@example.com, and my phone number is 555-123-4567. I’d like to inquire about your services and have a detailed discussion regarding your product offerings. Please contact me via email. I’m happy to subscribe to your newsletter for updates. Thank you! +
+ +{% endhighlight %} +{% endtabs %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core +Smart Paste Button control will be rendered in the default web browser. + +![ASP.NET Core Smart Paste Button Control](images/SmartPaste.gif) + +## Troubleshooting + +If the Claude AI integration does not work, try the following: +- **No Suggestions Displayed**: Verify that the Claude API key and model name are correct in the configuration. Check the `ClaudeAIService` implementation for errors. +- **HTTP Request Failures**: Ensure a stable internet connection and that the Claude API endpoint (`https://api.anthropic.com/v1/messages`) is accessible. Test with HTTP/2 if compatibility issues arise. +- **Service Registration Errors**: Confirm that `ClaudeAIService` and `ClaudeInferenceService` are registered in **Program.cs**. \ No newline at end of file diff --git a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/custom-inference-backend.md b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/custom-inference-backend.md new file mode 100644 index 0000000000..a8b829f83b --- /dev/null +++ b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/custom-inference-backend.md @@ -0,0 +1,77 @@ +--- +layout: post +title: Custom AI with ##Platform_Name## Smart Paste Button Control | Syncfusion +description: Learn how to integrate custom AI services with ##Platform_Name## Smart Paste Button control of Syncfusion Essential JS 2 and more details. +platform: ej2-asp-core-mvc +control: Custom AI Service +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Custom AI Service Integration with ASP.NET Core Smart Paste Button + +The Syncfusion ASP.NET Core Smart Paste Button leverages AI to parse clipboard content and populate form fields, enhancing user productivity. By default, it supports OpenAI and Azure OpenAI services, but you can integrate custom AI services using the `IChatInferenceService` interface. This interface facilitates communication between the Smart Paste Button and your custom AI provider, enabling precise mapping of clipboard data to form fields. + +## IChatInferenceService Interface + +The `IChatInferenceService` interface defines a contract for integrating AI services with the Smart Paste Button, enabling the control to process clipboard data for form field mapping. + +```csharp +public interface IChatInferenceService +{ + Task GenerateResponseAsync(ChatParameters options); +} +``` + +The `GenerateResponseAsync` method takes `ChatParameters` (containing clipboard data and form field metadata) and returns a string response from the AI service, which the Smart Paste Button uses to populate form fields. + +## Simple Implementation of a Custom AI Service + +Below is a sample implementation of a mock AI service named `MockAIService`. This service demonstrates how to implement the `IChatInferenceService` interface by returning sample, context-aware responses. You can replace the logic with your own AI integration. + +```csharp +using Syncfusion.EJ2.AI; +using System.Threading.Tasks; + +public class MockAIService : IChatInferenceService +{ + public Task GenerateResponseAsync(ChatParameters options) + { + + } +} +``` + +## Registering the Custom AI Service + +Register the custom AI service in the **~/Program.cs** file of your ASP.NET Core Application: + +```csharp +using Syncfusion.EJ2; +using Syncfusion.EJ2.AI; + +builder.Services.AddRazorPages(); +builder.Services.AddSyncfusionSmartComponents(); +builder.Services.AddSingleton(); + +var app = builder.Build(); +// ... +``` + +## Implemented AI Services + +Here are examples of AI services integrated using the `IChatInferenceService` interface: + +| Service | Documentation | +|---------|---------------| +| Claude | [Claude Integration](claude-service) | +| DeepSeek | [DeepSeek Integration](deepseek-service) | +| Groq | [Groq Integration](groq-service) | +| Gemini | [Gemini Integration](gemini-service) | + +## Troubleshooting + +If the custom AI integration does not work as expected, try the following: +- **Fields Not Populating**: Verify that the custom AI service’s endpoint, model, and API key are correct in `appsettings.json`. Ensure the `GenerateResponseAsync` method returns valid data. +- **Service Registration Errors**: Confirm that `CustomAIService` and `CustomInferenceService` are registered in **Program.cs**. +- **AI Parsing Errors**: Check the AI service’s response format and ensure it matches the expected `CustomAIResponse` structure. Test the API independently to verify connectivity. diff --git a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/customization.md b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/customization.md new file mode 100644 index 0000000000..6788ca4a80 --- /dev/null +++ b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/customization.md @@ -0,0 +1,20 @@ +--- +layout: post +title: Customization in ##Platform_Name## Smart Paste Button Control | Syncfusion +description: Explore styles and appearance customization options with ##Platform_Name## Smart Paste Button control of Syncfusion Essential JS 2 and more details. +platform: ej2-asp-core-mvc +control: Types and Appearance +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Types and Appearance + +The Syncfusion® ASP.NET Core Smart Paste Button control inherits all properties, types, and styling options of the Syncfusion® ASP.NET Core Button control. This allows users to utilize the existing features and flexibility of the Syncfusion® ASP.NET Core Button while taking advantage of the enhanced Smart Paste Button functionality. + +- [Types and Styles](https://ej2.syncfusion.com/aspnetcore/documentation/button/types-and-styles) +- [Style and Appearance](https://ej2.syncfusion.com/aspnetcore/documentation/button/style-and-appearance) + +## See Also + +- [ASP.NET Core Button Control: Types and Styles](https://ej2.syncfusion.com/aspnetcore/documentation/button/types-and-styles) \ No newline at end of file diff --git a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/deepseek-service.md b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/deepseek-service.md new file mode 100644 index 0000000000..86e8c9f153 --- /dev/null +++ b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/deepseek-service.md @@ -0,0 +1,249 @@ +--- +layout: post +title: DeepSeek AI in ##Platform_Name## Smart Paste Button Control | Syncfusion +description: Learn how to implement a custom AI service using DeepSeek AI with ##Platform_Name## Smart Paste Button control of Syncfusion Essential JS 2 and more details. +platform: ej2-asp-core-mvc +control: DeepSeek AI +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# DeepSeek AI Integration with ASP.NET Core Smart Paste Button + +The Syncfusion ASP.NET Core SmartPaste Button control enables AI-powered, context-aware content pasting into forms, typically using OpenAI or Azure OpenAI. This guide explains how to integrate the DeepSeek AI service with the Smart Paste Button using the `IChatInferenceService` interface, enabling custom AI-driven responses in a ASP.NET Core App. + +## Setting Up DeepSeek + +1. **Obtain a DeepSeek API Key** + Create an account at [DeepSeek Platform](https://platform.deepseek.com), sign in, and navigate to [API Keys](https://platform.deepseek.com/api_keys) to generate an API key. +2. **Review Model Specifications** + Refer to [DeepSeek Models Documentation](https://api-docs.deepseek.com/quick_start/pricing) for details on available models (e.g., `deepseek-chat`). + +## Create a DeepSeek AI Service + +Create a service class to manage interactions with the DeepSeek API, including authentication and response processing for the Smart Paste Button. + +1. Create a `Services` folder in your project. +2. Add a new file named `DeepSeekAIService.cs` in the `Services` folder. +3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json`). + +```csharp +using System.Net; +using System.Text; +using System.Text.Json; +using Microsoft.Extensions.AI; + +public class DeepSeekAIService +{ + private readonly string _apiKey; + private readonly string _modelName = "deepseek-chat"; // Example model + private readonly string _endpoint = "https://api.deepseek.com/chat/completions"; + private static readonly HttpClient HttpClient = new(new SocketsHttpHandler + { + PooledConnectionLifetime = TimeSpan.FromMinutes(30), + EnableMultipleHttp2Connections = true + }) + { + DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for compatibility + }; + private static readonly JsonSerializerOptions JsonOptions = new() + { + PropertyNamingPolicy = JsonNamingPolicy.CamelCase + }; + + public DeepSeekAIService(IConfiguration configuration) + { + _apiKey = configuration["DeepSeek:ApiKey"] ?? throw new ArgumentNullException("DeepSeek API key is missing."); + if (!HttpClient.DefaultRequestHeaders.Contains("Authorization")) + { + HttpClient.DefaultRequestHeaders.Clear(); + HttpClient.DefaultRequestHeaders.Add("Authorization", $"Bearer {_apiKey}"); + } + } + + public async Task CompleteAsync(IList chatMessages) + { + var requestBody = new DeepSeekChatRequest + { + Model = _modelName, + Temperature = 0.7f, // Controls response randomness (0.0 to 1.0) + Messages = chatMessages.Select(m => new DeepSeekMessage + { + Role = m.Role == ChatRole.User ? "user" : "system", // Align with DeepSeek API roles + Content = m.Text + }).ToList() + }; + + var content = new StringContent(JsonSerializer.Serialize(requestBody, JsonOptions), Encoding.UTF8, "application/json"); + + try + { + var response = await HttpClient.PostAsync(_endpoint, content); + response.EnsureSuccessStatusCode(); + var responseString = await response.Content.ReadAsStringAsync(); + var responseObject = JsonSerializer.Deserialize(responseString, JsonOptions); + return responseObject?.Choices?.FirstOrDefault()?.Message?.Content ?? "No response from DeepSeek."; + } + catch (Exception ex) when (ex is HttpRequestException || ex is JsonException) + { + throw new InvalidOperationException("Failed to communicate with DeepSeek API.", ex); + } + } +} +``` + +N> Store the DeepSeek API key in `appsettings.json` (e.g., `{ "DeepSeek": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. + +## Define Request and Response Models + +Define C# classes to match the DeepSeek API’s JSON request and response format. + +1. Create a new file named `DeepSeekModels.cs` in the `Services` folder. +2. Add the following model classes: + +```csharp +public class DeepSeekMessage +{ + public string Role { get; set; } + public string Content { get; set; } +} + +public class DeepSeekChatRequest +{ + public string Model { get; set; } + public float Temperature { get; set; } + public List Messages { get; set; } +} + +public class DeepSeekChatResponse +{ + public List Choices { get; set; } +} + +public class DeepSeekChoice +{ + public DeepSeekMessage Message { get; set; } +} +``` + +## Create a Custom AI Service + +Implement the `IChatInferenceService` interface to connect the Smart Paste Button to the DeepSeek service, acting as a bridge for AI-generated responses. + +1. Create a new file named `DeepSeekInferenceService.cs` in the `Services` folder. +2. Add the following implementation: + +```csharp +using Syncfusion.EJ2.AI; +using System.Threading.Tasks; + +public class DeepSeekInferenceService : IChatInferenceService +{ + private readonly DeepSeekAIService _deepSeekService; + + public DeepSeekInferenceService(DeepSeekAIService deepSeekService) + { + _deepSeekService = deepSeekService; + } + + public async Task GenerateResponseAsync(ChatParameters options) + { + return await _deepSeekService.CompleteAsync(options.Messages); + } +} +``` + +## Configure the Blazor App + +Register the DeepSeek service and `IChatInferenceService` implementation in the dependency injection container. + +Update the **~/Program.cs** file as follows: + +```csharp +using Syncfusion.EJ2; +using Syncfusion.EJ2.AI; + +var builder = WebApplication.CreateBuilder(args); + +builder.Services.AddRazorPages(); +builder.Services.AddSyncfusionSmartComponents(); +builder.Services.AddSingleton(); +builder.Services.AddSingleton(); + +var app = builder.Build(); +// ... +``` + +## Add the Smart Paste Button + +Add the Smart Paste Button to a form in the **~/Pages/Index.cshtml** file to test the DeepSeek AI integration. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +

Contact Form

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
+
+ + +
+
+
+ + +
+ + + +
+ +
+
+ I am John Doe from the United States. My email is johndoe@example.com, and my phone number is 555-123-4567. I’d like to inquire about your services and have a detailed discussion regarding your product offerings. Please contact me via email. I’m happy to subscribe to your newsletter for updates. Thank you! +
+ +{% endhighlight %} +{% endtabs %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core +Smart Paste Button control will be rendered in the default web browser. + +![ASP.NET Core Smart Paste Button Control](images/SmartPaste.gif) + +## Troubleshooting + +If the DeepSeek AI integration does not work, try the following: +- **No Suggestions Displayed**: Verify that the DeepSeek API key and model name are correct in the configuration. Check the `DeepSeekAIService` implementation for errors. +- **HTTP Request Failures**: Ensure a stable internet connection and that the DeepSeek API endpoint (`https://api.deepseek.com/v1/chat/completions`) is accessible. Test with HTTP/2 if compatibility issues arise. +- **Service Registration Errors**: Confirm that `DeepSeekAIService` and `DeepSeekInferenceService` are registered in **Program.cs**. \ No newline at end of file diff --git a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/gemini-service.md b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/gemini-service.md new file mode 100644 index 0000000000..2257eb586e --- /dev/null +++ b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/gemini-service.md @@ -0,0 +1,297 @@ +--- +layout: post +title: Gemini AI in ##Platform_Name## Smart Paste Button Control | Syncfusion +description: Learn how to implement a custom AI service using Google's Gemini API with ##Platform_Name## Smart Paste Button control of Syncfusion Essential JS 2 and more details. +platform: ej2-asp-core-mvc +control: Gemini AI +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Gemini AI Integration with ASP.NET Core Smart Paste Button + +The Syncfusion ASP.NET Core SmartPaste Button control enables AI-powered, context-aware content pasting into forms, typically using OpenAI or Azure OpenAI. This guide explains how to integrate the Google Gemini AI service with the Smart Paste Button using the `IChatInferenceService` interface, enabling custom AI-driven responses in a ASP.NET Core Web App. + +## Setting Up Gemini + +1. **Obtain a Gemini API Key** + Visit [Google AI Studio](https://ai.google.dev/gemini-api/docs/api-key), sign in, and generate an API key. +2. **Review Model Specifications** + Refer to [Gemini Models Documentation](https://ai.google.dev/gemini-api/docs/models) for details on available models. + +## Create a Gemini AI Service + +Create a service class to manage interactions with the Gemini API, including authentication, request/response handling, and safety settings for the Smart Paste Button. + +1. Create a `Services` folder in your project. +2. Add a new file named `GeminiService.cs` in the `Services` folder. +3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json`). + +```csharp +using System.Net; +using System.Text; +using System.Text.Json; +using Microsoft.Extensions.AI; + +public class GeminiService +{ + private readonly string _apiKey; + private readonly string _modelName = "gemini-2.0-flash"; // Example model + private readonly string _endpoint = "https://generativelanguage.googleapis.com/v1beta/models/"; + private static readonly HttpClient HttpClient = new(new SocketsHttpHandler + { + PooledConnectionLifetime = TimeSpan.FromMinutes(30), + EnableMultipleHttp2Connections = true + }) + { + DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for compatibility + }; + private static readonly JsonSerializerOptions JsonOptions = new() + { + PropertyNamingPolicy = JsonNamingPolicy.CamelCase + }; + + public GeminiService(IConfiguration configuration) + { + _apiKey = configuration["Gemini:ApiKey"] ?? throw new ArgumentNullException("Gemini API key is missing."); + HttpClient.DefaultRequestHeaders.Clear(); + HttpClient.DefaultRequestHeaders.Add("x-goog-api-key", _apiKey); + } + + public async Task CompleteAsync(IList chatMessages) + { + var requestUri = $"{_endpoint}{_modelName}:generateContent"; + var parameters = BuildGeminiChatParameters(chatMessages); + var payload = new StringContent( + JsonSerializer.Serialize(parameters, JsonOptions), + Encoding.UTF8, + "application/json" + ); + + try + { + using var response = await HttpClient.PostAsync(requestUri, payload); + response.EnsureSuccessStatusCode(); + var json = await response.Content.ReadAsStringAsync(); + var result = JsonSerializer.Deserialize(json, JsonOptions); + return result?.Candidates?.FirstOrDefault()?.Content?.Parts?.FirstOrDefault()?.Text + ?? "No response from model."; + } + catch (Exception ex) when (ex is HttpRequestException or JsonException) + { + throw new InvalidOperationException("Gemini API error.", ex); + } + } + + private GeminiChatParameters BuildGeminiChatParameters(IList messages) + { + var contents = messages.Select(m => new ResponseContent( + m.Text, + m.Role == ChatRole.User ? "user" : "model" + )).ToList(); + + return new GeminiChatParameters + { + Contents = contents, + GenerationConfig = new GenerationConfig + { + MaxOutputTokens = 2000, + StopSequences = new List { "END_INSERTION", "NEED_INFO", "END_RESPONSE" } // Configurable stop sequences + }, + SafetySettings = new List + { + new() { Category = "HARM_CATEGORY_HARASSMENT", Threshold = "BLOCK_ONLY_HIGH" }, + new() { Category = "HARM_CATEGORY_HATE_SPEECH", Threshold = "BLOCK_ONLY_HIGH" }, + new() { Category = "HARM_CATEGORY_SEXUALLY_EXPLICIT", Threshold = "BLOCK_ONLY_HIGH" }, + new() { Category = "HARM_CATEGORY_DANGEROUS_CONTENT", Threshold = "BLOCK_ONLY_HIGH" } + } + }; + } +} +``` + +N> Store the Gemini API key in `appsettings.json` (e.g., `{ "Gemini": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. The `SafetySettings` filter harmful content; adjust thresholds based on your application’s needs. + +## Define Request and Response Models + +Define C# classes to match the Gemini API’s JSON request and response format. + +1. Create a new file named `GeminiModels.cs` in the `Services` folder. +2. Add the following model classes: + +```csharp +public class Part +{ + public string Text { get; set; } +} + +public class Content +{ + public Part[] Parts { get; init; } = Array.Empty(); +} + +public class Candidate +{ + public Content Content { get; init; } = new(); +} + +public class GeminiResponseObject +{ + public Candidate[] Candidates { get; init; } = Array.Empty(); +} + +public class ResponseContent +{ + public List Parts { get; init; } + public string Role { get; init; } + + public ResponseContent(string text, string role) + { + Parts = new List { new Part { Text = text } }; + Role = role; + } +} + +public class GenerationConfig +{ + public int Temperature { get; init; } = 0; + public int TopK { get; init; } = 0; + public int TopP { get; init; } = 0; + public int MaxOutputTokens { get; init; } = 2048; + public List StopSequences { get; init; } = new(); +} + +public class SafetySetting +{ + public string Category { get; init; } = string.Empty; + public string Threshold { get; init; } = string.Empty; +} + +public class GeminiChatParameters +{ + public List Contents { get; init; } = new(); + public GenerationConfig GenerationConfig { get; init; } = new(); + public List SafetySettings { get; init; } = new(); +} +``` + +## Create a Custom AI Service + +Implement the `IChatInferenceService` interface to connect the Smart Paste Button to the Gemini service, acting as a bridge for AI-generated responses. + +1. Create a new file named `GeminiInferenceService.cs` in the `Services` folder. +2. Add the following implementation: + +```csharp +using Syncfusion.EJ2.AI; +using System.Threading.Tasks; + +public class GeminiInferenceService : IChatInferenceService +{ + private readonly GeminiService _geminiService; + + public GeminiInferenceService(GeminiService geminiService) + { + _geminiService = geminiService; + } + + public async Task GenerateResponseAsync(ChatParameters options) + { + return await _geminiService.CompleteAsync(options.Messages); + } +} +``` + +## Configure the ASP.NET Core App + +Register the Gemini service and `IChatInferenceService` implementation in the dependency injection container. + +Update the **~/Program.cs** file as follows: + +```csharp +using Syncfusion.EJ2; +using Syncfusion.EJ2.AI; + +builder.Services.AddRazorPages(); + +builder.Services.AddSyncfusionSmartComponents(); +builder.Services.AddSingleton(); +builder.Services.AddSingleton(); + +var app = builder.Build(); +// ... +``` + +## Add the Smart Paste Button + +Add the Smart Paste Button to a form in the **~/Pages/Index.cshtml** file to test the Gemini AI integration. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +

Contact Form

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
+
+ + +
+
+
+ + +
+ + + +
+ +
+
+ I am John Doe from the United States. My email is johndoe@example.com, and my phone number is 555-123-4567. I’d like to inquire about your services and have a detailed discussion regarding your product offerings. Please contact me via email. I’m happy to subscribe to your newsletter for updates. Thank you! +
+ +{% endhighlight %} +{% endtabs %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core +Smart Paste Button control will be rendered in the default web browser. + +![ASP.NET Core Smart Paste Button Control](images/SmartPaste.gif) + +## Troubleshooting + +If the Gemini AI integration does not work, try the following: +- **No Suggestions Displayed**: Verify that the Gemini API key and model name are correct in the configuration. Check the `GeminiService` implementation for errors. +- **HTTP Request Failures**: Ensure a stable internet connection and that the Gemini API endpoint (`https://generativelanguage.googleapis.com/v1beta/models/`) is accessible. Test with HTTP/2 if compatibility issues arise. +- **Service Registration Errors**: Confirm that `GeminiService` and `GeminiInferenceService` are registered in **Program.cs**. \ No newline at end of file diff --git a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/getting-started.md new file mode 100644 index 0000000000..6f736a385c --- /dev/null +++ b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/getting-started.md @@ -0,0 +1,285 @@ +--- +layout: post +title: Getting Started with ##Platform_Name## Smart Paste Button | Syncfusion +description: Checkout and learn about getting started with ##Platform_Name## Smart Paste Button control of Syncfusion Essential JS 2 and more details. +platform: ej2-asp-core-mvc +control: Getting Started +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Getting Started with ASP.NET Core Smart Paste Button Control + +This section briefly explains about how to include `ASP.NET Core Smart Paste Button` 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 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/visual-studio-integration/create-project) + +## Install ASP.NET Core package in the application + +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. + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +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. + +## Add Syncfusion® ASP.NET Core Tag Helper +Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelper. + +{% tabs %} +{% highlight C# tabtitle="~/_ViewImports.cshtml" %} + +@addTagHelper *, Syncfusion.EJ2 + +{% endhighlight %} +{% endtabs %} + +## Add stylesheet and script resources + +Here, the theme and script is referred using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows, + +{% tabs %} +{% highlight cshtml tabtitle="~/_Layout.cshtml" %} + + + ... + + + + + + +{% 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. + +## Register Syncfusion® Script Manager + +Also, register the script manager `` at the end of `` in the ASP.NET Core application as follows. + +{% tabs %} +{% highlight cshtml tabtitle="~/_Layout.cshtml" %} + + + ... + + + + +{% endhighlight %} +{% endtabs %} + +## Configure AI Service + +The Smart Paste Button requires an AI service (OpenAI, Azure OpenAI, or Ollama) to analyze and map copied text to form fields. Follow the instructions below to configure an AI model in your application. + +### Install AI Service NuGet Packages + +Install the following NuGet packages based on your chosen AI provider: + +{% tabs %} +{% highlight c# tabtitle="Package Manager" %} + +Install-Package Microsoft.Extensions.AI +Install-Package Microsoft.Extensions.AI.OpenAI +@* For Azure OpenAI only *@ +Install-Package Azure.AI.OpenAI +@* For Ollama only *@ +Install-Package OllamaSharp + +{% endhighlight %} +{% endtabs %} + +### OpenAI Configuration + +For OpenAI, obtain an API key from [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) and specify the desired model (e.g., `gpt-3.5-turbo`, `gpt-4`). Store the API key securely in a configuration file or environment variable. + +Add the following to the **~/Program.cs** file: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +using Microsoft.Extensions.AI; +using OpenAI; +using Syncfusion.EJ2; + + +builder.Services.AddRazorPages(); + +string openAIApiKey = "API-KEY"; +string openAIModel = "OPENAI_MODEL"; +OpenAIClient openAIClient = new OpenAIClient(openAIApiKey); +IChatClient openAIChatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient(); +builder.Services.AddChatClient(openAIChatClient); + +builder.Services.AddSyncfusionSmartComponents() + .InjectOpenAIInference(); + +var app = builder.Build(); +.... + +{% endhighlight %} +{% endtabs %} + +### Azure OpenAI Configuration + +For Azure OpenAI, deploy a resource and model as described in [Azure OpenAI documentation](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource). Obtain the API key, endpoint, and model name from your Azure portal. + +Add the following to the **~/Program.cs** file: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +using Syncfusion.EJ2; +using Microsoft.Extensions.AI; +using Azure.AI.OpenAI; +using System.ClientModel; + +builder.Services.AddRazorPages(); + +string azureOpenAIKey = "AZURE_OPENAI_KEY"; +string azureOpenAIEndpoint = "AZURE_OPENAI_ENDPOINT"; +string azureOpenAIModel = "AZURE_OPENAI_MODEL"; +AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient( + new Uri(azureOpenAIEndpoint), + new ApiKeyCredential(azureOpenAIKey) +); +IChatClient azureOpenAIChatClient = azureOpenAIClient.GetChatClient(azureOpenAIModel).AsIChatClient(); +builder.Services.AddChatClient(azureOpenAIChatClient); + +builder.Services.AddSyncfusionSmartComponents() + .InjectOpenAIInference(); + +var app = builder.Build(); +.... + +{% endhighlight %} +{% endtabs %} + +### Ollama Configuration + +To use Ollama for self-hosted models: + +1. Download and install Ollama from [Ollama's official website](https://ollama.com). +2. Install a model from the [Ollama Library](https://ollama.com/library) (e.g., `llama2:13b`, `mistral:7b`). +3. Configure the endpoint URL (e.g., `http://localhost:11434`) and model name. + +Add the following to the **~/Program.cs** file: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +using Syncfusion.EJ2; +using Microsoft.Extensions.AI; +using OllamaSharp; + +builder.Services.AddRazorPages(); + +string ModelName = "MODEL_NAME"; +IChatClient chatClient = new OllamaApiClient("http://localhost:11434", ModelName); +builder.Services.AddChatClient(chatClient); + +builder.Services.AddSyncfusionSmartComponents() + .InjectOpenAIInference(); + +var app = builder.Build(); +.... + +{% endhighlight %} +{% endtabs %} + +## Add ASP.NET Core Smart Paste Button Control + +Now, add the Syncfusion® ASP.NET Core Smart Paste Button tag helper in `~/Pages/Index.cshtml` page. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +

Contact Form

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
+
+ + +
+
+
+ + +
+ + + +
+ +
+
+ I am John Doe from the United States. My email is johndoe@example.com, and my phone number is 555-123-4567. I’d like to inquire about your services and have a detailed discussion regarding your product offerings. Please contact me via email. I’m happy to subscribe to your newsletter for updates. Thank you! +
+ +{% endhighlight %} +{% endtabs %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core +Smart Paste Button control will be rendered in the default web browser. + +![ASP.NET Core Smart Paste Button Control](images/SmartPaste.gif) + +## Performance Considerations + +For optimal performance with the Smart Paste Button: +- Use lightweight AI models (e.g., `gpt-3.5-turbo` or `mistral:7b`) for faster processing. +- Limit form complexity to reduce AI parsing time, especially for large datasets. +- Cache AI model responses where possible to minimize repeated API calls. + +## Troubleshooting Common Issues + +- **AI Service Configuration Errors**: Verify the API key, endpoint, and model name in `Program.cs`. Check for typos or incorrect values. +- **Network Failures**: Ensure a stable internet connection for OpenAI or Azure OpenAI. For Ollama, confirm the local server is running at the specified endpoint (e.g., `http://localhost:11434`). +- **Form Not Populating**: Confirm that the copied text matches the form field structure and that the AI model is correctly configured. diff --git a/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/groq-service.md b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/groq-service.md new file mode 100644 index 0000000000..20c3163380 --- /dev/null +++ b/ej2-asp-core-mvc/smart-paste/EJ2_ASP.NETCORE/groq-service.md @@ -0,0 +1,250 @@ +--- +layout: post +title: Groq AI in ##Platform_Name## Smart Paste Button Control | Syncfusion +description: Learn how to implement a custom AI service using Groq AI with ##Platform_Name## Smart Paste Button control of Syncfusion Essential JS 2 and more details. +platform: ej2-asp-core-mvc +control: Groq AI +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Groq AI Integration with ASP.NET Core Smart Paste Button + +The Syncfusion ASP.NET Core Smart Paste Button control enables AI-powered, context-aware content pasting into forms, typically using OpenAI or Azure OpenAI. This guide explains how to integrate the Groq AI service with the Smart Paste Button using the `IChatInferenceService` interface, enabling custom AI-driven responses in a ASP.NET Core app. + +## Setting Up Groq + +1. **Create a Groq Account** + Visit [Groq Cloud Console](https://console.groq.com), sign up or sign in, and complete the verification process. +2. **Obtain an API Key** + Navigate to [API Keys](https://console.groq.com/keys) in the Groq Console and click "Create API Key." +3. **Review Model Specifications** + Refer to [Groq Models Documentation](https://console.groq.com/docs/models) for details on available models (e.g., `llama3-8b-8192`). + +## Create a Groq AI Service + +Create a service class to manage interactions with the Groq API, including authentication and response processing for the Smart Paste Button. + +1. Create a `Services` folder in your project. +2. Add a new file named `GroqService.cs` in the `Services` folder. +3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json` or environment variables). + +```csharp +using Microsoft.Extensions.AI; +using System.Net; +using System.Text; +using System.Text.Json; + +public class GroqService +{ + private readonly string _apiKey; + private readonly string _modelName = "llama-3.3-70b-versatile"; // Example model + private readonly string _endpoint = "https://api.groq.com/openai/v1/chat/completions"; + private static readonly HttpClient HttpClient = new(new SocketsHttpHandler + { + PooledConnectionLifetime = TimeSpan.FromMinutes(30), + EnableMultipleHttp2Connections = true + }) + { + DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for broader compatibility + }; + private static readonly JsonSerializerOptions JsonOptions = new() + { + PropertyNamingPolicy = JsonNamingPolicy.CamelCase + }; + + public GroqService(IConfiguration configuration) + { + _apiKey = configuration["Groq:ApiKey"] ?? throw new ArgumentNullException("Groq API key is missing."); + if (!HttpClient.DefaultRequestHeaders.Contains("Authorization")) + { + HttpClient.DefaultRequestHeaders.Clear(); + HttpClient.DefaultRequestHeaders.Add("Authorization", $"Bearer {_apiKey}"); + } + } + + public async Task CompleteAsync(IList chatMessages) + { + var requestPayload = new GroqChatParameters + { + Model = _modelName, + Messages = chatMessages.Select(m => new Message + { + Role = m.Role == ChatRole.User ? "user" : "assistant", + Content = m.Text + }).ToList(), + Stop = new List { "END_INSERTION", "NEED_INFO", "END_RESPONSE" } // Configurable stop sequences + }; + + var content = new StringContent(JsonSerializer.Serialize(requestPayload, JsonOptions), Encoding.UTF8, "application/json"); + + try + { + var response = await HttpClient.PostAsync(_endpoint, content); + response.EnsureSuccessStatusCode(); + var responseString = await response.Content.ReadAsStringAsync(); + var responseObject = JsonSerializer.Deserialize(responseString, JsonOptions); + return responseObject?.Choices?.FirstOrDefault()?.Message?.Content ?? "No response from model."; + } + catch (Exception ex) when (ex is HttpRequestException || ex is JsonException) + { + throw new InvalidOperationException("Failed to communicate with Groq API.", ex); + } + } +} +``` + +N> Store the Groq API key in `appsettings.json` (e.g., `{ "Groq": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. + +## Define Request and Response Models + +Define C# classes to match the Groq API’s request and response format. + +1. Create a new file named `GroqModels.cs` in the `Services` folder. +2. Add the following model classes: + +```csharp +public class Choice +{ + public Message Message { get; set; } +} + +public class Message +{ + public string Role { get; set; } + public string Content { get; set; } +} + +public class GroqChatParameters +{ + public string Model { get; set; } + public List Messages { get; set; } + public List Stop { get; set; } +} + +public class GroqResponseObject +{ + public string Model { get; set; } + public List Choices { get; set; } +} +``` + +## Create a Custom AI Service + +Implement the `IChatInferenceService` interface to connect the Smart Paste Button to the Groq service. + +1. Create a new file named `GroqInferenceService.cs` in the `Services` folder. +2. Add the following implementation: + +```csharp +using Syncfusion.EJ2.AI; +using System.Threading.Tasks; + +public class GroqInferenceService : IChatInferenceService +{ + private readonly GroqService _groqService; + + public GroqInferenceService(GroqService groqService) + { + _groqService = groqService; + } + + public async Task GenerateResponseAsync(ChatParameters options) + { + return await _groqService.CompleteAsync(options.Messages); + } +} +``` + +## Configure the ASP.NET Core App + +Register the Groq service and `IChatInferenceService` implementation in the dependency injection container. + +Update the **~/Program.cs** file as follows: + +```csharp +using Syncfusion.EJ2; +using Syncfusion.EJ2.AI; + +builder.Services.AddRazorPages(); +builder.Services.AddSyncfusionSmartComponents(); +builder.Services.AddSingleton(); +builder.Services.AddSingleton(); + +var app = builder.Build(); +// ... +``` + +## Add the Smart Paste Button + +Add the Smart Paste Button to a form in the **~/Pages/Index.cshtml** file to test the Gemini AI integration. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +

Contact Form

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
+
+ + +
+
+
+ + +
+ + + +
+ +
+
+ I am John Doe from the United States. My email is johndoe@example.com, and my phone number is 555-123-4567. I’d like to inquire about your services and have a detailed discussion regarding your product offerings. Please contact me via email. I’m happy to subscribe to your newsletter for updates. Thank you! +
+ +{% endhighlight %} +{% endtabs %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core +Smart Paste Button control will be rendered in the default web browser. + +![ASP.NET Core Smart Paste Button Control](images/SmartPaste.gif) + +## Troubleshooting + +If the Groq AI integration does not work, try the following: +- **No Suggestions Displayed**: Verify that the Groq API key and model name are correct in the configuration. Check the `GroqService` implementation for errors. +- **HTTP Request Failures**: Ensure a stable internet connection and that the Groq API endpoint (`https://api.groq.com/openai/v1/chat/completions`) is accessible. Test with HTTP/2 instead of HTTP/3 if compatibility issues arise. +- **Service Registration Errors**: Confirm that `GroqService` and `GroqInferenceService` are registered in **Program.cs**. \ No newline at end of file diff --git a/ej2-asp-core-mvc/smart-paste/images/SmartPaste.gif b/ej2-asp-core-mvc/smart-paste/images/SmartPaste.gif new file mode 100644 index 0000000000..0a177a1633 Binary files /dev/null and b/ej2-asp-core-mvc/smart-paste/images/SmartPaste.gif differ diff --git a/ej2-asp-core-mvc/smart-paste/images/SmartPaste_Annotation.gif b/ej2-asp-core-mvc/smart-paste/images/SmartPaste_Annotation.gif new file mode 100644 index 0000000000..28f361e143 Binary files /dev/null and b/ej2-asp-core-mvc/smart-paste/images/SmartPaste_Annotation.gif differ diff --git a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/claude-service.md b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/claude-service.md new file mode 100644 index 0000000000..828e8b673a --- /dev/null +++ b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/claude-service.md @@ -0,0 +1,208 @@ +--- +layout: post +title: Claude AI in ##Platform_Name## Smart TextArea Control | Syncfusion +description: Learn how to implement a custom AI service using Claude AI with ##Platform_Name## Smart TextArea control of Syncfusion Essential JS 2 and more details. +platform: ej2-asp-core-mvc +control: Claude AI +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Claude AI Integration with ASP.NET Core Smart TextArea + +The Syncfusion ASP.NET Core Smart TextArea control provides AI-powered autocompletion for context-aware text input, typically using OpenAI or Azure OpenAI. This guide explains how to integrate the Anthropic Claude AI service with the Smart TextArea using the `IChatInferenceService` interface, enabling custom AI-driven responses in a ASP.NET Core App. + +## Setting Up Claude + +1. **Create an Anthropic Account** + Visit [Anthropic Console](https://console.anthropic.com), sign up, and complete the verification process. +2. **Obtain an API Key** + Navigate to [API Keys](https://console.anthropic.com/settings/keys) and click "Create Key." +3. **Review Model Specifications** + Refer to [Claude Models Documentation](https://docs.anthropic.com/claude/docs/models-overview) for details on available models. + +## Create a Claude AI Service + +Create a service class to manage interactions with the Claude API, including authentication and response processing for the Smart TextArea. + +1. Create a `Services` folder in your project. +2. Add a new file named `ClaudeAIService.cs` in the `Services` folder. +3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json`). + +```csharp +using Microsoft.Extensions.AI; +using System.Net; +using System.Text; +using System.Text.Json; + +public class ClaudeAIService +{ + private readonly string _apiKey; + private readonly string _modelName = "claude-3-5-sonnet-20241022"; // Example model + private readonly string _endpoint = "https://api.anthropic.com/v1/messages"; + private static readonly HttpClient HttpClient = new(new SocketsHttpHandler + { + PooledConnectionLifetime = TimeSpan.FromMinutes(30), + EnableMultipleHttp2Connections = true + }) + { + DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for compatibility + }; + private static readonly JsonSerializerOptions JsonOptions = new() + { + PropertyNamingPolicy = JsonNamingPolicy.CamelCase + }; + + public ClaudeAIService(IConfiguration configuration) + { + _apiKey = configuration["Claude:ApiKey"] ?? throw new ArgumentNullException("Claude API key is missing."); + if (!HttpClient.DefaultRequestHeaders.Contains("x-api-key")) + { + HttpClient.DefaultRequestHeaders.Clear(); + HttpClient.DefaultRequestHeaders.Add("x-api-key", _apiKey); + HttpClient.DefaultRequestHeaders.Add("anthropic-version", "2023-06-01"); // Check latest version in Claude API docs + } + } + + public async Task CompleteAsync(IList chatMessages) + { + var requestBody = new ClaudeChatRequest + { + Model = _modelName, + Max_tokens = 1000, // Maximum tokens in response + Messages = chatMessages.Select(m => new ClaudeMessage + { + Role = m.Role == ChatRole.User ? "user" : "assistant", + Content = m.Text + }).ToList(), + Stop_sequences = new List { "END_INSERTION", "NEED_INFO", "END_RESPONSE" } // Configurable stop sequences + }; + + var content = new StringContent(JsonSerializer.Serialize(requestBody, JsonOptions), Encoding.UTF8, "application/json"); + + try + { + var response = await HttpClient.PostAsync(_endpoint, content); + response.EnsureSuccessStatusCode(); + var responseString = await response.Content.ReadAsStringAsync(); + var responseObject = JsonSerializer.Deserialize(responseString, JsonOptions); + return responseObject?.Content?.FirstOrDefault()?.Text ?? "No response from Claude model."; + } + catch (Exception ex) when (ex is HttpRequestException || ex is JsonException) + { + throw new InvalidOperationException("Failed to communicate with Claude API.", ex); + } + } +} +``` + +N> Store the Claude API key in `appsettings.json` (e.g., `{ "Claude": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. Verify the `anthropic-version` header in [Claude API Documentation](https://docs.anthropic.com/claude/docs) for the latest version. + +## Define Request and Response Models + +Define C# classes to match the Claude API’s JSON request and response format. + +1. Create a new file named `ClaudeModels.cs` in the `Services` folder. +2. Add the following model classes: + +```csharp +public class ClaudeChatRequest +{ + public string Model { get; set; } + public int Max_tokens { get; set; } + public List Messages { get; set; } + public List Stop_sequences { get; set; } +} + +public class ClaudeMessage +{ + public string Role { get; set; } + public string Content { get; set; } +} + +public class ClaudeChatResponse +{ + public List Content { get; set; } +} + +public class ClaudeContentBlock +{ + public string Text { get; set; } +} +``` + +## Create a Custom AI Service + +Implement the `IChatInferenceService` interface to connect the Smart TextArea to the Claude service, acting as a bridge for AI-generated responses. + +1. Create a new file named `ClaudeInferenceService.cs` in the `Services` folder. +2. Add the following implementation: + +```csharp +using Syncfusion.EJ2.AI; +using System.Threading.Tasks; + +public class ClaudeInferenceService : IChatInferenceService +{ + private readonly ClaudeAIService _claudeService; + + public ClaudeInferenceService(ClaudeAIService claudeService) + { + _claudeService = claudeService; + } + + public async Task GenerateResponseAsync(ChatParameters options) + { + return await _claudeService.CompleteAsync(options.Messages); + } +} +``` + +## Configure the ASP.NET Core App + +Register the Claude service and `IChatInferenceService` implementation in the dependency injection container. + +Update the **~/Program.cs** file as follows: + +```csharp +using Syncfusion.EJ2.AI; + +builder.Services.AddRazorPages(); +builder.Services.AddSyncfusionSmartComponents(); +builder.Services.AddSingleton(); +builder.Services.AddSingleton(); + +var app = builder.Build(); +// ... +``` + +## Add ASP.NET Core Smart TextArea Control + +Add the Smart TextArea in the **~/Pages/Index.cshtml** file to test the Claude AI integration. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@{ + var presets = new { + userRole = "Maintainer of an open-source project replying to GitHub issues", + userPhrases = new[] { "Thank you for contacting us.", "To investigate, we'll need a repro as a public Git repo.", "Could you please post a screenshot of NEED_INFO?", "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend StackOverflow for a faster response.", "We don't accept ZIP files as repros." }, + placeHolder = "Write your response to the GitHub issue..." }; +} + + + +{% endhighlight %} +{% endtabs %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core +Smart TextArea control will be rendered in the default web browser. + +![ASP.NET Core Smart TextArea Control](images/SmartTextArea.gif) + +## Troubleshooting + +If the Claude AI integration does not work, try the following: +- **No Suggestions Displayed**: Verify that the Claude API key and model name are correct in the configuration. Check the `ClaudeAIService` implementation for errors. +- **HTTP Request Failures**: Ensure a stable internet connection and that the Claude API endpoint (`https://api.anthropic.com/v1/messages`) is accessible. Test with HTTP/2 if compatibility issues arise. +- **Service Registration Errors**: Confirm that `ClaudeAIService` and `ClaudeInferenceService` are registered in **Program.cs**. diff --git a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/custom-inference-backend.md b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/custom-inference-backend.md new file mode 100644 index 0000000000..083a4f2c9e --- /dev/null +++ b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/custom-inference-backend.md @@ -0,0 +1,80 @@ +--- +layout: post +title: Custom AI with ##Platform_Name## Smart TextArea Control | Syncfusion +description: Learn how to integrate custom AI services with ##Platform_Name## Smart TextArea control of Syncfusion Essential JS 2 and more details. +platform: ej2-asp-core-mvc +control: Custom AI Service +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Custom AI Service Integration with ASP.NET Core Smart TextArea + +The Syncfusion ASP.NET Core Smart TextArea control leverages AI to provide context-aware autocompletion, typically using OpenAI or Azure OpenAI services. Developers can integrate custom AI services using the `IChatInferenceService` interface, which standardizes communication between the Smart TextArea and third-party AI providers. This section explains how to implement and register a custom AI service for the Smart TextArea. + +## IChatInferenceService Interface + +The `IChatInferenceService` interface defines a contract for integrating custom AI services with Syncfusion Smart Controls. It enables the Smart TextArea to request and receive AI-generated responses. + +```csharp +public interface IChatInferenceService +{ + Task GenerateResponseAsync(ChatParameters options); +} +``` + +- **Purpose**: Standardizes communication for AI-generated responses. +- **Parameters**: The `ChatParameters` type includes properties like user input and context. +- **Benefits**: Enables seamless switching between AI providers without modifying component code. + +## Simple Implementation of a Custom AI Service + +Below is a sample implementation of a mock AI service named `MockAIService`. This service demonstrates how to implement the `IChatInferenceService` interface by returning sample, context-aware responses. You can replace the logic with your own AI integration. + +```csharp +using Syncfusion.EJ2.AI; +using System.Threading.Tasks; + +public class MockAIService : IChatInferenceService +{ + public Task GenerateResponseAsync(ChatParameters options) + { + + } +} +``` + +## Registering the Custom AI Service + +Register the custom AI service in the **~/Program.cs** file of your ASP.NET Core Application: + +```csharp +using Syncfusion.EJ2; +using Syncfusion.EJ2.AI; + +builder.Services.AddRazorPages(); +builder.Services.AddSyncfusionSmartComponents(); +builder.Services.AddSingleton(); + +var app = builder.Build(); +// ... +``` + +## Implemented AI Services + +Here are examples of AI services integrated using the `IChatInferenceService` interface: + +| Service | Documentation | +|---------|---------------| +| Claude | [Claude Integration](claude-service) | +| DeepSeek | [DeepSeek Integration](deepseek-service) | +| Groq | [Groq Integration](groq-service) | +| Gemini | [Gemini Integration](gemini-service) | + +## Troubleshooting + +If the custom AI service does not work as expected, try the following: +- **No Suggestions Displayed**: Ensure the `IChatInferenceService` implementation is registered in **Program.cs** and returns valid responses. Check for errors in the `GenerateResponseAsync` method. +- **Dependency Issues**: Verify that all required NuGet packages are installed. Run `dotnet restore` to resolve dependencies. +- **Incorrect Responses**: Debug the custom AI service implementation to ensure it processes `ChatParameters` correctly and returns expected responses. + diff --git a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/customization.md b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/customization.md new file mode 100644 index 0000000000..b0c3341f63 --- /dev/null +++ b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/customization.md @@ -0,0 +1,68 @@ +--- +layout: post +title: Customize Suggestions ##Platform_Name## Smart TextArea Control | Syncfusion +description: Learn how to customize suggestion display in ##Platform_Name## Smart TextArea of Syncfusion Essential JS 2 and more details. +platform: ej2-asp-core-mvc +control: Customizaion +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Customize Suggestions in ASP.NET Core Smart TextArea + +The Syncfusion ASP.NET Core Smart TextArea control provides AI-powered autocompletion for context-aware text input, with customizable suggestion display options. This section explains how to configure the appearance and behavior of suggestions to enhance user experience in applications like issue trackers or customer support systems. + +## Configure Suggestion Display + +The `show-suggestion-on-popup` attribute controls how AI-generated suggestions are presented to users in the Smart TextArea control. Suggestions are based on the `user-role` and optional `user-phrases` attributes, which define the context and predefined phrases for autocompletion. + +### Pop-up Suggestions + +Set `show-suggestion-on-popup="true"` to display suggestions in a pop-up window above the text area, ideal for scenarios where users need to select from multiple suggestions without cluttering the input area. + +Add the following code in the `~/Pages/Index.cshtml`: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@{ + var presets = new { + userRole = "Maintainer of an open-source project replying to GitHub issues", + userPhrases = new[] { "Thank you for contacting us.", "To investigate, we'll need a repro as a public Git repo.", "Could you please post a screenshot of NEED_INFO?", "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend StackOverflow for a faster response.", "We don't accept ZIP files as repros." }, + placeHolder = "Write your response to the GitHub issue..." }; +} + + + +{% endhighlight %} +{% endtabs %} + +![ASP.NET Core Smart TextArea Control Suggestion on popup](images/SmartTextArea-Popup.gif) + +### Inline Suggestions + +Set `show-suggestion-on-popup="false"` (default) to display suggestions inline within the text area, suitable for seamless text entry where users can accept suggestions by continuing to type or pressing a tab key. + +Add the following code in the `~/Pages/Index.cshtml`: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@{ + var presets = new { + userRole = "Maintainer of an open-source project replying to GitHub issues", + userPhrases = new[] { "Thank you for contacting us.", "To investigate, we'll need a repro as a public Git repo.", "Could you please post a screenshot of NEED_INFO?", "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend StackOverflow for a faster response.", "We don't accept ZIP files as repros." }, + placeHolder = "Write your response to the GitHub issue..." }; +} + + + +{% endhighlight %} +{% endtabs %} + +![ASP.NET Core Smart TextArea Control Suggestion on inline](images/SmartTextArea-Inline.gif) + +## Troubleshooting + +If suggestions do not appear, try the following: +- **AI Configuration Errors**: Verify that the API key, endpoint, and model name are correctly configured in **Program.cs**. Check for typos or invalid credentials. \ No newline at end of file diff --git a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/deepseek-service.md b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/deepseek-service.md new file mode 100644 index 0000000000..ed2bb4c284 --- /dev/null +++ b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/deepseek-service.md @@ -0,0 +1,206 @@ +--- +layout: post +title: DeepSeek AI in ##Platform_Name## Smart TextArea Control | Syncfusion +description: Learn how to implement a custom AI service using DeepSeek AI with ##Platform_Name## Smart TextArea control of Syncfusion Essential JS 2 and more details. +platform: ej2-asp-core-mvc +control: DeepSeek AI +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# DeepSeek AI Integration with ASP.NET Core Smart TextArea + +The Syncfusion ASP.NET Core Smart TextArea control provides AI-powered autocompletion for context-aware text input, typically using OpenAI or Azure OpenAI. This guide explains how to integrate the DeepSeek AI service with the Smart TextArea using the `IChatInferenceService` interface, enabling custom AI-driven responses in a ASP.NET Core App. + +## Setting Up DeepSeek + +1. **Obtain a DeepSeek API Key** + Create an account at [DeepSeek Platform](https://platform.deepseek.com), sign in, and navigate to [API Keys](https://platform.deepseek.com/api_keys) to generate an API key. +2. **Review Model Specifications** + Refer to [DeepSeek Models Documentation](https://api-docs.deepseek.com/quick_start/pricing) for details on available models (e.g., `deepseek-chat`). + +## Create a DeepSeek AI Service + +Implement the `IChatInferenceService` interface to connect the Smart TextArea to the DeepSeek service, acting as a bridge for AI-generated responses. + +1. Create a `Services` folder in your project. +2. Add a new file named `DeepSeekAIService.cs` in the `Services` folder. +3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json`). + +```csharp +using System.Net; +using System.Text; +using System.Text.Json; +using Microsoft.Extensions.AI; + +public class DeepSeekAIService +{ + private readonly string _apiKey; + private readonly string _modelName = "deepseek-chat"; // Example model + private readonly string _endpoint = "https://api.deepseek.com/chat/completions"; + private static readonly HttpClient HttpClient = new(new SocketsHttpHandler + { + PooledConnectionLifetime = TimeSpan.FromMinutes(30), + EnableMultipleHttp2Connections = true + }) + { + DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for compatibility + }; + private static readonly JsonSerializerOptions JsonOptions = new() + { + PropertyNamingPolicy = JsonNamingPolicy.CamelCase + }; + + public DeepSeekAIService(IConfiguration configuration) + { + _apiKey = configuration["DeepSeek:ApiKey"] ?? throw new ArgumentNullException("DeepSeek API key is missing."); + if (!HttpClient.DefaultRequestHeaders.Contains("Authorization")) + { + HttpClient.DefaultRequestHeaders.Clear(); + HttpClient.DefaultRequestHeaders.Add("Authorization", $"Bearer {_apiKey}"); + } + } + + public async Task CompleteAsync(IList chatMessages) + { + var requestBody = new DeepSeekChatRequest + { + Model = _modelName, + Temperature = 0.7f, // Controls response randomness (0.0 to 1.0) + Messages = chatMessages.Select(m => new DeepSeekMessage + { + Role = m.Role == ChatRole.User ? "user" : "system", // Align with DeepSeek API roles + Content = m.Text + }).ToList() + }; + + var content = new StringContent(JsonSerializer.Serialize(requestBody, JsonOptions), Encoding.UTF8, "application/json"); + + try + { + var response = await HttpClient.PostAsync(_endpoint, content); + response.EnsureSuccessStatusCode(); + var responseString = await response.Content.ReadAsStringAsync(); + var responseObject = JsonSerializer.Deserialize(responseString, JsonOptions); + return responseObject?.Choices?.FirstOrDefault()?.Message?.Content ?? "No response from DeepSeek."; + } + catch (Exception ex) when (ex is HttpRequestException || ex is JsonException) + { + throw new InvalidOperationException("Failed to communicate with DeepSeek API.", ex); + } + } +} +``` + +N> Store the DeepSeek API key in `appsettings.json` (e.g., `{ "DeepSeek": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. + +## Define Request and Response Models + +Define C# classes to match the DeepSeek API’s JSON request and response format. + +1. Create a new file named `DeepSeekModels.cs` in the `Services` folder. +2. Add the following model classes: + +```csharp +public class DeepSeekMessage +{ + public string Role { get; set; } + public string Content { get; set; } +} + +public class DeepSeekChatRequest +{ + public string Model { get; set; } + public float Temperature { get; set; } + public List Messages { get; set; } +} + +public class DeepSeekChatResponse +{ + public List Choices { get; set; } +} + +public class DeepSeekChoice +{ + public DeepSeekMessage Message { get; set; } +} +``` + +## Create a Custom AI Service + +Implement the `IChatInferenceService` interface to connect the Smart TextArea to the DeepSeek service, acting as a bridge for AI-generated responses. + +1. Create a new file named `DeepSeekInferenceService.cs` in the `Services` folder. +2. Add the following implementation: + +```csharp +using Syncfusion.EJ2.AI; +using System.Threading.Tasks; + +public class DeepSeekInferenceService : IChatInferenceService +{ + private readonly DeepSeekAIService _deepSeekService; + + public DeepSeekInferenceService(DeepSeekAIService deepSeekService) + { + _deepSeekService = deepSeekService; + } + + public async Task GenerateResponseAsync(ChatParameters options) + { + return await _deepSeekService.CompleteAsync(options.Messages); + } +} +``` + +## Configure the ASP.NET Core App + +Register the DeepSeek service and `IChatInferenceService` implementation in the dependency injection container. + +Update the **~/Program.cs** file as follows: + +```csharp +using Syncfusion.EJ2; +using Syncfusion.EJ2.AI; + +var builder = WebApplication.CreateBuilder(args); + +builder.Services.AddRazorPages(); +builder.Services.AddSyncfusionSmartComponents(); +builder.Services.AddSingleton(); +builder.Services.AddSingleton(); + +var app = builder.Build(); +// ... +``` + +## Add ASP.NET Core Smart TextArea Control + +Add the Smart TextArea in the **~/Pages/Index.cshtml** file to test the DeepSeek AI integration. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@{ + var presets = new { + userRole = "Maintainer of an open-source project replying to GitHub issues", + userPhrases = new[] { "Thank you for contacting us.", "To investigate, we'll need a repro as a public Git repo.", "Could you please post a screenshot of NEED_INFO?", "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend StackOverflow for a faster response.", "We don't accept ZIP files as repros." }, + placeHolder = "Write your response to the GitHub issue..." }; +} + + + +{% endhighlight %} +{% endtabs %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core +Smart TextArea control will be rendered in the default web browser. + +![ASP.NET Core Smart TextArea Control](images/SmartTextArea.gif) + +## Troubleshooting + +If the DeepSeek AI integration does not work, try the following: +- **No Suggestions Displayed**: Verify that the DeepSeek API key and model name are correct in the configuration. Check the `DeepSeekAIService` implementation for errors. +- **HTTP Request Failures**: Ensure a stable internet connection and that the DeepSeek API endpoint (`https://api.deepseek.com/v1/chat/completions`) is accessible. Test with HTTP/2 if compatibility issues arise. +- **Service Registration Errors**: Confirm that `DeepSeekAIService` and `DeepSeekInferenceService` are registered in **Program.cs**. diff --git a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/features.md b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/features.md new file mode 100644 index 0000000000..2120fa3d33 --- /dev/null +++ b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/features.md @@ -0,0 +1,19 @@ +--- +layout: post +title: Styles and Appearances in ##Platform_Name## Smart TextArea | Syncfusion +description: Checkout and learn here all about Styles and Appearances in ##Platform_Name## Smart TextArea of Syncfusion Essential JS 2 and more details. +platform: ej2-asp-core-mvc +control: Features +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Inherited Features from TextArea + +The Syncfusion® ASP.NET Core Smart TextArea control fully inherits all the properties, features, and styling options of the Syncfusion® ASP.NET Core TextArea control. This means that you can leverage the existing features of the Syncfusion® ASP.NET Core TextArea while benefiting from the enhanced functionality of the Smart TextArea. + +* [Form Support](https://ej2.syncfusion.com/aspnetcore/documentation/textarea/form-support) +* [Floating Labels](https://ej2.syncfusion.com/aspnetcore/documentation/textarea/floating-label) +* [Events](https://ej2.syncfusion.com/aspnetcore/documentation/textarea/events) +* [Methods](https://ej2.syncfusion.com/aspnetcore/documentation/textarea/methods) +* [Style and Appearance](https://ej2.syncfusion.com/aspnetcore/documentation/textarea/style-appearance) \ No newline at end of file diff --git a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/gemini-service.md b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/gemini-service.md new file mode 100644 index 0000000000..19984f4ebe --- /dev/null +++ b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/gemini-service.md @@ -0,0 +1,255 @@ +--- +layout: post +title: Gemini AI in ##Platform_Name## Smart TextArea Control | Syncfusion +description: Learn how to implement a custom AI service using Google's Gemini AI with ##Platform_Name## Smart TextArea control of Syncfusion Essential JS 2 and more details. +platform: ej2-asp-core-mvc +control: Gemini AI +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Gemini AI Integration with ASP.NET Core Smart TextArea + +The Syncfusion ASP.NET Core Smart TextArea control provides AI-powered autocompletion for context-aware text input, typically using OpenAI or Azure OpenAI. This guide explains how to integrate the Google Gemini AI service with the Smart TextArea using the `IChatInferenceService` interface, enabling custom AI-driven responses in a ASP.NET Core Web App. + +## Setting Up Gemini + +1. **Obtain a Gemini API Key** + Visit [Google AI Studio](https://ai.google.dev/gemini-api/docs/api-key), sign in, and generate an API key. +2. **Review Model Specifications** + Refer to [Gemini Models Documentation](https://ai.google.dev/gemini-api/docs/models) for details on available models. + +## Create a Gemini AI Service + +Create a service class to manage interactions with the Gemini API, including authentication, request/response handling, and safety settings for the Smart TextArea. + +1. Create a `Services` folder in your project. +2. Add a new file named `GeminiService.cs` in the `Services` folder. +3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json`). + + +```csharp +using System.Net; +using System.Text; +using System.Text.Json; +using Microsoft.Extensions.AI; + +public class GeminiService +{ + private readonly string _apiKey; + private readonly string _modelName = "gemini-2.0-flash"; // Example model + private readonly string _endpoint = "https://generativelanguage.googleapis.com/v1beta/models/"; + private static readonly HttpClient HttpClient = new(new SocketsHttpHandler + { + PooledConnectionLifetime = TimeSpan.FromMinutes(30), + EnableMultipleHttp2Connections = true + }) + { + DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for compatibility + }; + private static readonly JsonSerializerOptions JsonOptions = new() + { + PropertyNamingPolicy = JsonNamingPolicy.CamelCase + }; + + public GeminiService(IConfiguration configuration) + { + _apiKey = configuration["Gemini:ApiKey"] ?? throw new ArgumentNullException("Gemini API key is missing."); + HttpClient.DefaultRequestHeaders.Clear(); + HttpClient.DefaultRequestHeaders.Add("x-goog-api-key", _apiKey); + } + + public async Task CompleteAsync(IList chatMessages) + { + var requestUri = $"{_endpoint}{_modelName}:generateContent"; + var parameters = BuildGeminiChatParameters(chatMessages); + var payload = new StringContent( + JsonSerializer.Serialize(parameters, JsonOptions), + Encoding.UTF8, + "application/json" + ); + + try + { + using var response = await HttpClient.PostAsync(requestUri, payload); + response.EnsureSuccessStatusCode(); + var json = await response.Content.ReadAsStringAsync(); + var result = JsonSerializer.Deserialize(json, JsonOptions); + return result?.Candidates?.FirstOrDefault()?.Content?.Parts?.FirstOrDefault()?.Text + ?? "No response from model."; + } + catch (Exception ex) when (ex is HttpRequestException or JsonException) + { + throw new InvalidOperationException("Gemini API error.", ex); + } + } + + private GeminiChatParameters BuildGeminiChatParameters(IList messages) + { + var contents = messages.Select(m => new ResponseContent( + m.Text, + m.Role == ChatRole.User ? "user" : "model" + )).ToList(); + + return new GeminiChatParameters + { + Contents = contents, + GenerationConfig = new GenerationConfig + { + MaxOutputTokens = 2000, + StopSequences = new List { "END_INSERTION", "NEED_INFO", "END_RESPONSE" } // Configurable stop sequences + }, + SafetySettings = new List + { + new() { Category = "HARM_CATEGORY_HARASSMENT", Threshold = "BLOCK_ONLY_HIGH" }, + new() { Category = "HARM_CATEGORY_HATE_SPEECH", Threshold = "BLOCK_ONLY_HIGH" }, + new() { Category = "HARM_CATEGORY_SEXUALLY_EXPLICIT", Threshold = "BLOCK_ONLY_HIGH" }, + new() { Category = "HARM_CATEGORY_DANGEROUS_CONTENT", Threshold = "BLOCK_ONLY_HIGH" } + } + }; + } +} +``` + +N> Store the Gemini API key in `appsettings.json` (e.g., `{ "Gemini": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. The `SafetySettings` filter harmful content; adjust thresholds based on your application’s needs. + +## Define Request and Response Models + +Define C# classes to match the Gemini API’s JSON request and response format. + +1. Create a new file named `GeminiModels.cs` in the `Services` folder. +2. Add the following model classes: + +```csharp +public class Part +{ + public string Text { get; set; } +} + +public class Content +{ + public Part[] Parts { get; init; } = Array.Empty(); +} + +public class Candidate +{ + public Content Content { get; init; } = new(); +} + +public class GeminiResponseObject +{ + public Candidate[] Candidates { get; init; } = Array.Empty(); +} + +public class ResponseContent +{ + public List Parts { get; init; } + public string Role { get; init; } + + public ResponseContent(string text, string role) + { + Parts = new List { new Part { Text = text } }; + Role = role; + } +} + +public class GenerationConfig +{ + public int Temperature { get; init; } = 0; + public int TopK { get; init; } = 0; + public int TopP { get; init; } = 0; + public int MaxOutputTokens { get; init; } = 2048; + public List StopSequences { get; init; } = new(); +} + +public class SafetySetting +{ + public string Category { get; init; } = string.Empty; + public string Threshold { get; init; } = string.Empty; +} + +public class GeminiChatParameters +{ + public List Contents { get; init; } = new(); + public GenerationConfig GenerationConfig { get; init; } = new(); + public List SafetySettings { get; init; } = new(); +} +``` + +## Create a Custom AI Service + +Implement the `IChatInferenceService` interface to connect the Smart TextArea to the Gemini service, acting as a bridge for AI-generated responses. + +1. Create a new file named `GeminiInferenceService.cs` in the `Services` folder. +2. Add the following implementation: + +```csharp +using Syncfusion.EJ2.AI; +using System.Threading.Tasks; + +public class GeminiInferenceService : IChatInferenceService +{ + private readonly GeminiService _geminiService; + + public GeminiInferenceService(GeminiService geminiService) + { + _geminiService = geminiService; + } + + public async Task GenerateResponseAsync(ChatParameters options) + { + return await _geminiService.CompleteAsync(options.Messages); + } +} +``` + +## Configure the ASP.NET Core App + +Register the Gemini service and `IChatInferenceService` implementation in the dependency injection container. + +Update the **~/Program.cs** file as follows: + +```csharp +using Syncfusion.EJ2; +using Syncfusion.EJ2.AI; + +builder.Services.AddRazorPages(); + +builder.Services.AddSyncfusionSmartComponents(); +builder.Services.AddSingleton(); +builder.Services.AddSingleton(); + +var app = builder.Build(); +// ... +``` + +## Add ASP.NET Core Smart TextArea Control + +Add the Smart TextArea in the **~/Pages/Index.cshtml** file to test the Gemini AI integration. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@{ + var presets = new { + userRole = "Maintainer of an open-source project replying to GitHub issues", + userPhrases = new[] { "Thank you for contacting us.", "To investigate, we'll need a repro as a public Git repo.", "Could you please post a screenshot of NEED_INFO?", "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend StackOverflow for a faster response.", "We don't accept ZIP files as repros." }, + placeHolder = "Write your response to the GitHub issue..." }; +} + + + +{% endhighlight %} +{% endtabs %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core +Smart TextArea control will be rendered in the default web browser. + +![ASP.NET Core Smart TextArea Control](images/SmartTextArea.gif) + +## Troubleshooting + +If the Gemini AI integration does not work, try the following: +- **No Suggestions Displayed**: Verify that the Gemini API key and model name are correct in the configuration. Check the `GeminiService` implementation for errors. +- **HTTP Request Failures**: Ensure a stable internet connection and that the Gemini API endpoint (`https://generativelanguage.googleapis.com/v1beta/models/`) is accessible. Test with HTTP/2 if compatibility issues arise. +- **Service Registration Errors**: Confirm that `GeminiService` and `GeminiInferenceService` are registered in **Program.cs**. diff --git a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/getting-started.md new file mode 100644 index 0000000000..227a08d68d --- /dev/null +++ b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/getting-started.md @@ -0,0 +1,237 @@ +--- +layout: post +title: Getting Started with ##Platform_Name## Smart TextArea Control | Syncfusion +description: Checkout and learn about getting started with ##Platform_Name## Smart TextArea of Syncfusion Essential JS 2 and more details. +platform: ej2-asp-core-mvc +control: Getting Started +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Getting Started with ASP.NET Core Smart TextArea Control + +This section briefly explains about how to include `ASP.NET Core Smart TextArea` 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 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/visual-studio-integration/create-project) + +## Install ASP.NET Core package in the application + +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. + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +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. + +## Add Syncfusion® ASP.NET Core Tag Helper +Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelper. + +{% tabs %} +{% highlight C# tabtitle="~/_ViewImports.cshtml" %} + +@addTagHelper *, Syncfusion.EJ2 + +{% endhighlight %} +{% endtabs %} + +## Add stylesheet and script resources + +Here, the theme and script is referred using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows, + +{% tabs %} +{% highlight cshtml tabtitle="~/_Layout.cshtml" %} + + + ... + + + + + + +{% 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. + +## Register Syncfusion® Script Manager + +Also, register the script manager `` at the end of `` in the ASP.NET Core application as follows. + +{% tabs %} +{% highlight cshtml tabtitle="~/_Layout.cshtml" %} + + + ... + + + + +{% endhighlight %} +{% endtabs %} + +## Configure AI Service + +To enable AI-powered autocompletion in the Smart TextArea, configure an AI model (OpenAI, Azure OpenAI, or Ollama) in your application. Install the required NuGet packages and update the **~/Program.cs** file as described below. + +### Install AI Service NuGet Packages + +Install the following NuGet packages based on your chosen AI provider: + +{% tabs %} +{% highlight c# tabtitle="Package Manager" %} + +Install-Package Microsoft.Extensions.AI +Install-Package Microsoft.Extensions.AI.OpenAI +@* For Azure OpenAI only *@ +Install-Package Azure.AI.OpenAI +@* For Ollama only *@ +Install-Package OllamaSharp + +{% endhighlight %} +{% endtabs %} + +### OpenAI Configuration + +For OpenAI, obtain an API key from [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) and specify the desired model (e.g., `gpt-3.5-turbo`, `gpt-4`). Store the API key securely in a configuration file or environment variable. + +Add the following to the **~/Program.cs** file: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +using Microsoft.Extensions.AI; +using OpenAI; +using Syncfusion.EJ2; + + +builder.Services.AddRazorPages(); + +string openAIApiKey = "API-KEY"; +string openAIModel = "OPENAI_MODEL"; +OpenAIClient openAIClient = new OpenAIClient(openAIApiKey); +IChatClient openAIChatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient(); +builder.Services.AddChatClient(openAIChatClient); + +builder.Services.AddSyncfusionSmartComponents() + .InjectOpenAIInference(); + +var app = builder.Build(); +.... + +{% endhighlight %} +{% endtabs %} + +### Azure OpenAI Configuration + +For Azure OpenAI, deploy a resource and model as described in [Azure OpenAI documentation](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource). Obtain the API key, endpoint, and model name from your Azure portal. + +Add the following to the **~/Program.cs** file: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +using Syncfusion.EJ2; +using Microsoft.Extensions.AI; +using Azure.AI.OpenAI; +using System.ClientModel; + +builder.Services.AddRazorPages(); + +string azureOpenAIKey = "AZURE_OPENAI_KEY"; +string azureOpenAIEndpoint = "AZURE_OPENAI_ENDPOINT"; +string azureOpenAIModel = "AZURE_OPENAI_MODEL"; +AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient( + new Uri(azureOpenAIEndpoint), + new ApiKeyCredential(azureOpenAIKey) +); +IChatClient azureOpenAIChatClient = azureOpenAIClient.GetChatClient(azureOpenAIModel).AsIChatClient(); +builder.Services.AddChatClient(azureOpenAIChatClient); + +builder.Services.AddSyncfusionSmartComponents() + .InjectOpenAIInference(); + +var app = builder.Build(); +.... + +{% endhighlight %} +{% endtabs %} + +### Ollama Configuration + +To use Ollama for self-hosted models: + +1. Download and install Ollama from [Ollama's official website](https://ollama.com). +2. Install a model from the [Ollama Library](https://ollama.com/library) (e.g., `llama2:13b`, `mistral:7b`). +3. Configure the endpoint URL (e.g., `http://localhost:11434`) and model name. + +Add the following to the **~/Program.cs** file: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +using Syncfusion.EJ2; +using Microsoft.Extensions.AI; +using OllamaSharp; + +builder.Services.AddRazorPages(); + +string ModelName = "MODEL_NAME"; +IChatClient chatClient = new OllamaApiClient("http://localhost:11434", ModelName); +builder.Services.AddChatClient(chatClient); + +builder.Services.AddSyncfusionSmartComponents() + .InjectOpenAIInference(); + +var app = builder.Build(); +.... + +{% endhighlight %} +{% endtabs %} + +## Add ASP.NET Core Smart TextArea Control + +The **user-role** attribute (required) defines the context for AI autocompletion based on the user's role. The **user-phrases** attribute (optional) provides predefined expressions aligned with the application's tone and common phrases. + +Now, add the Syncfusion® ASP.NET Core Smart TextArea tag helper in `~/Pages/Index.cshtml` page. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@{ + var presets = new { + userRole = "Maintainer of an open-source project replying to GitHub issues", + userPhrases = new[] { "Thank you for contacting us.", "To investigate, we'll need a repro as a public Git repo.", "Could you please post a screenshot of NEED_INFO?", "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend StackOverflow for a faster response.", "We don't accept ZIP files as repros." }, + placeHolder = "Write your response to the GitHub issue..." }; +} + + + +{% endhighlight %} +{% endtabs %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core +Smart TextArea control will be rendered in the default web browser. + +![ASP.NET Core Smart TextArea Control](images/SmartTextArea.gif) + +## Troubleshooting + +If you encounter issues, try the following: +- **NuGet Installation Errors**: Ensure a stable internet connection and set the NuGet package source to `https://www.nuget.org`. Run `dotnet restore` again. +- **AI Service Configuration Errors**: Verify the API key, endpoint, and model name in **Program.cs**. Check for typos or incorrect values. diff --git a/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/groq-service.md b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/groq-service.md new file mode 100644 index 0000000000..8229b14c71 --- /dev/null +++ b/ej2-asp-core-mvc/smart-textarea/EJ2_ASP.NETCORE/groq-service.md @@ -0,0 +1,207 @@ +--- +layout: post +title: Groq AI in ##Platform_Name## Smart TextArea Control | Syncfusion +description: Learn how to implement a custom AI service using Groq AI with ##Platform_Name## Smart TextArea control of Syncfusion Essential JS 2 and more details. +platform: ej2-asp-core-mvc +control: Groq AI +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Groq AI Integration with ASP.NET Core Smart TextArea + +The Syncfusion ASP.NET Core Smart TextArea control provides AI-powered autocompletion for context-aware text input, typically using OpenAI or Azure OpenAI. This guide explains how to integrate the Groq AI service with the Smart TextArea using the `IChatInferenceService` interface, enabling custom AI-driven responses in a ASP.NET Core App. + +## Setting Up Groq + +1. **Create a Groq Account** + Visit [Groq Cloud Console](https://console.groq.com), sign up or sign in, and complete the verification process. +2. **Obtain an API Key** + Navigate to [API Keys](https://console.groq.com/keys) in the Groq Console and click "Create API Key." +3. **Review Model Specifications** + Refer to [Groq Models Documentation](https://console.groq.com/docs/models) for details on available models (e.g., `llama3-8b-8192`). + +## Create a Groq AI Service + +Create a service class to manage interactions with the Groq API, including authentication and response processing for the Smart TextArea. + +1. Create a `Services` folder in your project. +2. Add a new file named `GroqService.cs` in the `Services` folder. +3. Implement the service as shown below, storing the API key securely in a configuration file or environment variable (e.g., `appsettings.json` or environment variables). + +```csharp +using Microsoft.Extensions.AI; +using System.Net; +using System.Text; +using System.Text.Json; + +public class GroqService +{ + private readonly string _apiKey; + private readonly string _modelName = "llama-3.3-70b-versatile"; // Example model + private readonly string _endpoint = "https://api.groq.com/openai/v1/chat/completions"; + private static readonly HttpClient HttpClient = new(new SocketsHttpHandler + { + PooledConnectionLifetime = TimeSpan.FromMinutes(30), + EnableMultipleHttp2Connections = true + }) + { + DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for broader compatibility + }; + private static readonly JsonSerializerOptions JsonOptions = new() + { + PropertyNamingPolicy = JsonNamingPolicy.CamelCase + }; + + public GroqService(IConfiguration configuration) + { + _apiKey = configuration["Groq:ApiKey"] ?? throw new ArgumentNullException("Groq API key is missing."); + if (!HttpClient.DefaultRequestHeaders.Contains("Authorization")) + { + HttpClient.DefaultRequestHeaders.Clear(); + HttpClient.DefaultRequestHeaders.Add("Authorization", $"Bearer {_apiKey}"); + } + } + + public async Task CompleteAsync(IList chatMessages) + { + var requestPayload = new GroqChatParameters + { + Model = _modelName, + Messages = chatMessages.Select(m => new Message + { + Role = m.Role == ChatRole.User ? "user" : "assistant", + Content = m.Text + }).ToList(), + Stop = new List { "END_INSERTION", "NEED_INFO", "END_RESPONSE" } // Configurable stop sequences + }; + + var content = new StringContent(JsonSerializer.Serialize(requestPayload, JsonOptions), Encoding.UTF8, "application/json"); + + try + { + var response = await HttpClient.PostAsync(_endpoint, content); + response.EnsureSuccessStatusCode(); + var responseString = await response.Content.ReadAsStringAsync(); + var responseObject = JsonSerializer.Deserialize(responseString, JsonOptions); + return responseObject?.Choices?.FirstOrDefault()?.Message?.Content ?? "No response from model."; + } + catch (Exception ex) when (ex is HttpRequestException || ex is JsonException) + { + throw new InvalidOperationException("Failed to communicate with Groq API.", ex); + } + } +} +``` + +N> Store the Groq API key in `appsettings.json` (e.g., `{ "Groq": { "ApiKey": "your-api-key" } }`) or as an environment variable to ensure security. + +## Define Request and Response Models + +Define C# classes to match the Groq API’s request and response format. + +1. Create a new file named `GroqModels.cs` in the `Services` folder. +2. Add the following model classes: + +```csharp +public class Choice +{ + public Message Message { get; set; } +} + +public class Message +{ + public string Role { get; set; } + public string Content { get; set; } +} + +public class GroqChatParameters +{ + public string Model { get; set; } + public List Messages { get; set; } + public List Stop { get; set; } +} + +public class GroqResponseObject +{ + public string Model { get; set; } + public List Choices { get; set; } +} +``` + +## Create a Custom AI Service + +Implement the `IChatInferenceService` interface to connect the Smart TextArea to the Groq service. + +1. Create a new file named `GroqInferenceService.cs` in the `Services` folder. +2. Add the following implementation: + +```csharp +using Syncfusion.EJ2.AI; +using System.Threading.Tasks; + +public class GroqInferenceService : IChatInferenceService +{ + private readonly GroqService _groqService; + + public GroqInferenceService(GroqService groqService) + { + _groqService = groqService; + } + + public async Task GenerateResponseAsync(ChatParameters options) + { + return await _groqService.CompleteAsync(options.Messages); + } +} +``` + +## Configure the ASP.NET Core App + +Register the Groq service and `IChatInferenceService` implementation in the dependency injection container. + +Update the **~/Program.cs** file as follows: + +```csharp +using Syncfusion.EJ2; +using Syncfusion.EJ2.AI; + +builder.Services.AddRazorPages(); +builder.Services.AddSyncfusionSmartComponents(); +builder.Services.AddSingleton(); +builder.Services.AddSingleton(); + +var app = builder.Build(); +// ... +``` + +## Add ASP.NET Core Smart TextArea Control + +Add the Smart TextArea in the **~/Pages/Index.cshtml** file to test the Groq AI integration. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} + +@{ + var presets = new { + userRole = "Maintainer of an open-source project replying to GitHub issues", + userPhrases = new[] { "Thank you for contacting us.", "To investigate, we'll need a repro as a public Git repo.", "Could you please post a screenshot of NEED_INFO?", "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend StackOverflow for a faster response.", "We don't accept ZIP files as repros." }, + placeHolder = "Write your response to the GitHub issue..." }; +} + + + +{% endhighlight %} +{% endtabs %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® ASP.NET Core +Smart TextArea control will be rendered in the default web browser. + +![ASP.NET Core Smart TextArea Control](images/SmartTextArea.gif) + +## Troubleshooting + +If the Groq AI integration does not work, try the following: +- **No Suggestions Displayed**: Verify that the Groq API key and model name are correct in the configuration. Check the `GroqService` implementation for errors. +- **HTTP Request Failures**: Ensure a stable internet connection and that the Groq API endpoint (`https://api.groq.com/openai/v1/chat/completions`) is accessible. Test with HTTP/2 instead of HTTP/3 if compatibility issues arise. +- **Service Registration Errors**: Confirm that `GroqService` and `GroqInferenceService` are registered in **Program.cs**. diff --git a/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea-Inline.gif b/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea-Inline.gif new file mode 100644 index 0000000000..8b1ff768fe Binary files /dev/null and b/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea-Inline.gif differ diff --git a/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea-Popup.gif b/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea-Popup.gif new file mode 100644 index 0000000000..efcbf7fbeb Binary files /dev/null and b/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea-Popup.gif differ diff --git a/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea.gif b/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea.gif new file mode 100644 index 0000000000..8b1ff768fe Binary files /dev/null and b/ej2-asp-core-mvc/smart-textarea/images/SmartTextArea.gif differ diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index 546bd97995..c989799220 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -20,7 +20,6 @@
  • Installation
  • @@ -2256,7 +2255,6 @@
  • Code Block
  • Remove Formatting
  • Format Painter
    • -
  • Clipboard Cleanup
  • Paste Cleanup
  • Enter Key Configuration
  • Undo Redo
    • @@ -2399,7 +2397,38 @@ - +
  • Smart Paste Button + +
    • +
  • Smart TextArea + +
  • Smith Chart