From 9293d2280dd1e25510e3380f22414ad7c2b286e8 Mon Sep 17 00:00:00 2001 From: KaviBharathi-SF5060 Date: Tue, 16 Dec 2025 18:41:23 +0530 Subject: [PATCH 1/3] 998697: ensured sample and updated changes accordingly --- .../blockeditor/EJ2_ASP.MVC/appearance.md | 2 +- .../built-in-blocks/built-in-blocks.md | 14 +- .../EJ2_ASP.MVC/built-in-blocks/code-block.md | 12 +- .../EJ2_ASP.MVC/built-in-blocks/embed.md | 30 ++- .../built-in-blocks/inline-content.md | 62 +++++- .../EJ2_ASP.MVC/built-in-blocks/list-types.md | 91 ++++++++- .../built-in-blocks/table-block.md | 15 +- .../EJ2_ASP.MVC/built-in-blocks/typography.md | 192 ++++++++++++++++-- .../blockeditor/EJ2_ASP.MVC/drag-drop.md | 2 +- .../blockeditor/EJ2_ASP.MVC/editor-menus.md | 6 +- .../EJ2_ASP.MVC/getting-started.md | 2 +- .../blockeditor/EJ2_ASP.MVC/globalization.md | 4 +- .../blockeditor/EJ2_ASP.MVC/methods.md | 8 +- .../blockeditor/EJ2_ASP.MVC/paste-cleanup.md | 14 +- .../blockeditor/EJ2_ASP.MVC/undo-redo.md | 2 +- .../blockeditor/EJ2_ASP.NETCORE/appearance.md | 2 +- .../built-in-blocks/built-in-blocks.md | 12 +- .../built-in-blocks/code-block.md | 12 +- .../EJ2_ASP.NETCORE/built-in-blocks/embed.md | 30 ++- .../built-in-blocks/inline-content.md | 62 +++++- .../built-in-blocks/list-types.md | 89 +++++++- .../built-in-blocks/table-block.md | 15 +- .../built-in-blocks/typography.md | 192 ++++++++++++++++-- .../blockeditor/EJ2_ASP.NETCORE/drag-drop.md | 2 +- .../EJ2_ASP.NETCORE/editor-menus.md | 6 +- .../EJ2_ASP.NETCORE/getting-started.md | 2 +- .../EJ2_ASP.NETCORE/globalization.md | 4 +- .../blockeditor/EJ2_ASP.NETCORE/methods.md | 8 +- .../EJ2_ASP.NETCORE/paste-cleanup.md | 4 +- .../blockeditor/EJ2_ASP.NETCORE/undo-redo.md | 2 +- .../blockeditor/images/block-table.png | Bin 0 -> 15390 bytes .../code-snippet/blockeditor/appearance/razor | 2 +- .../blocks/blockTypes/callout-block/razor | 2 +- .../blocks/blockTypes/code-block/razor | 2 +- .../blocks/blockTypes/divider-block/razor | 2 +- .../blocks/blockTypes/heading-block/razor | 2 +- .../blocks/blockTypes/image-block/razor | 2 +- .../blocks/blockTypes/list-block/razor | 2 +- .../blocks/blockTypes/paragraph-block/razor | 2 +- .../blocks/blockTypes/quote-block/razor | 2 +- .../blocks/blockTypes/table-block/razor | 11 + .../blocks/blockTypes/table-block/table.cs | 51 +++++ .../blocks/blockTypes/table-block/tagHelper | 11 + .../blocks/blockTypes/template-block/razor | 2 +- .../blocks/blockTypes/toggle-block/razor | 2 +- .../blockeditor/blocks/children/children.cs | 128 ++++++------ .../blockeditor/blocks/children/razor | 2 +- .../blockeditor/blocks/cssClass/cssclass.cs | 1 + .../blockeditor/blocks/cssClass/razor | 2 +- .../blockeditor/blocks/cssClass/tagHelper | 10 +- .../blockeditor/blocks/indent/indent.cs | 9 +- .../blockeditor/blocks/indent/razor | 2 +- .../blockeditor/blocks/indent/tagHelper | 11 +- .../blockeditor/blocks/isChecked/razor | 2 +- .../blockeditor/blocks/isChecked/tagHelper | 11 +- .../blocks/label-settings/label.cs | 8 +- .../blockeditor/blocks/label-settings/razor | 2 +- .../blocks/placeholder/placeholder.cs | 17 +- .../blockeditor/blocks/placeholder/razor | 2 +- .../blockeditor/blocks/placeholder/tagHelper | 11 +- .../blockeditor/drag-drop/dragdrop.cs | 7 +- .../code-snippet/blockeditor/drag-drop/razor | 2 +- .../editor-menus/block-action/blockAction.cs | 11 +- .../editor-menus/block-action/razor | 2 +- .../editor-menus/block-action/tagHelper | 8 +- .../editor-menus/context-menu/contextMenu.cs | 10 +- .../editor-menus/context-menu/razor | 2 +- .../editor-menus/context-menu/tagHelper | 8 +- .../inline-toolbar/inlineToolbar.cs | 9 +- .../editor-menus/inline-toolbar/razor | 2 +- .../editor-menus/inline-toolbar/tagHelper | 8 +- .../editor-menus/slash-command/razor | 2 +- .../slash-command/slashCommand.cs | 3 +- .../editor-menus/slash-command/tagHelper | 8 +- .../blockeditor/globalization/locale/razor | 2 +- .../blockeditor/globalization/rtl/razor | 2 +- .../blockeditor/methods/block/razor | 2 +- .../blockeditor/methods/block/tagHelper | 8 +- .../blockeditor/methods/data/razor | 2 +- .../blockeditor/methods/data/tagHelper | 8 +- .../blockeditor/methods/formatting/razor | 2 +- .../blockeditor/methods/formatting/tagHelper | 9 +- .../blockeditor/methods/selection/razor | 2 +- .../blockeditor/methods/selection/tagHelper | 9 +- .../paste-cleanup/allowedStyle/razor | 2 +- .../paste-cleanup/allowedStyle/tagHelper | 8 +- .../blockeditor/paste-cleanup/plainText/razor | 2 +- .../paste-cleanup/plainText/tagHelper | 8 +- .../code-snippet/blockeditor/undo-redo/razor | 2 +- 89 files changed, 989 insertions(+), 372 deletions(-) create mode 100644 ej2-asp-core-mvc/blockeditor/images/block-table.png create mode 100644 ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/table-block/razor create mode 100644 ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/table-block/table.cs create mode 100644 ej2-asp-core-mvc/code-snippet/blockeditor/blocks/blockTypes/table-block/tagHelper diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/appearance.md b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/appearance.md index 763fe05678..b637230844 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/appearance.md +++ b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/appearance.md @@ -62,4 +62,4 @@ You can use the [CssClass](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusi {% 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/blockeditor/EJ2_ASP.MVC/built-in-blocks/built-in-blocks.md index 25cd9f1b3e..af5328d00f 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/built-in-blocks.md +++ b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/built-in-blocks.md @@ -11,13 +11,13 @@ domainurl: ##DomainURL## # Blocks in ##Platform_Name## 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 @@ -53,11 +53,11 @@ By default, the `indent` property is set to `0`. {% 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. @@ -70,11 +70,11 @@ Custom CSS classes allow you to define specialized styling for specific blocks i {% 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" %} @@ -85,4 +85,4 @@ The Block Editor allows you to use custom templates for specialized content usin {% 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/blockeditor/EJ2_ASP.MVC/built-in-blocks/code-block.md b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/code-block.md index df3e3d1dea..5e8949d68b 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/code-block.md +++ b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/code-block.md @@ -11,18 +11,18 @@ 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`. +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` property in the Block Editor root configuration. This ensures consistent behavior for syntax highlighting and language options across all code blocks. +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` property supports the following options: +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](https://help.syncfusion.com/cr/aspnetmvc-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/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.CodeBlockSettingsModel.html#Syncfusion_EJ2_BlockEditor_CodeBlockSettingsModel_DefaultLanguage) | Defines the default language to use for syntax highlighting. | 'plaintext' | +| `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 @@ -49,4 +49,4 @@ Below example illustrates how to render the different code block in the Block Ed {% endhighlight %} {% endtabs %} -![Code Block](images/block-code.png) \ No newline at end of file +![Code Block](./../../images/block-code.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/embed.md b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/embed.md index b05f8d7b16..8d2abb7245 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/embed.md +++ b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/embed.md @@ -15,17 +15,17 @@ Block Editor supports addition of embeds to help you organize, showcase contents ## Image Block -You can use the `Image` block to showcase an image content within your editor. +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` 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. +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` property in the Block Editor root configuration. This ensures consistent behavior for image uploads, resizing, and display. +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` property supports the following options: +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 | |----------|-------------|---------------| @@ -41,7 +41,7 @@ The `ImageBlockSettings` property supports the following options: #### Configure Image Block Properties -The `Image` block `properties` property in the block model supports the following options: +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 | |----------|-------------|---------------| @@ -50,6 +50,24 @@ The `Image` block `properties` property in the block model supports the followin | 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 %} @@ -61,4 +79,4 @@ The below sample demonstrates the configuration of image block in the Block Edit {% endhighlight %} {% endtabs %} -![Image Block](images/block-image.png) \ No newline at end of file +![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/blockeditor/EJ2_ASP.MVC/built-in-blocks/inline-content.md index c9395e2ee5..c8277fd929 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/inline-content.md +++ b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/inline-content.md @@ -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 `$`. @@ -94,7 +139,7 @@ The below sample demonstrates the customization of labels in the Block Editor. {% 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/blockeditor/EJ2_ASP.MVC/built-in-blocks/list-types.md b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/list-types.md index 9f23413fe9..4fc10778e8 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/list-types.md +++ b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/list-types.md @@ -11,31 +11,98 @@ domainurl: ##DomainURL## # Lists in ##Platform_Name## 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` 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. +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` property as `BulletList`. This block type is used for unordered lists. +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` property as `NumberedList`. This block type is used for ordered lists. +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` property as `Checklist`. This block type is used for creating interactive to-do lists. +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`, you can configure the checked state using the `properties` property with `isChecked`. +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`. @@ -48,23 +115,31 @@ By default, the `isChecked` property is set to `false`. {% endhighlight %} {% endtabs %} -![Block isChecked](images/block-ischecked.png) +![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/blockeditor/blocks/blockTypes/paragraph-block/razor %} +{% include code-snippet/blockeditor/blocks/blockTypes/list-block/razor %} {% 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 +![List Block](./../../images/block-list.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/table-block.md b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/table-block.md index 575de645b3..95c531550a 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/table-block.md +++ b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/table-block.md @@ -11,7 +11,7 @@ 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. +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 @@ -26,4 +26,15 @@ For Table blocks, you can configure layout and structure using the `properties` | 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. +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/blockeditor/blocks/blockTypes/table-block/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Table.cs" %} +{% include code-snippet/blockeditor/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/blockeditor/EJ2_ASP.MVC/built-in-blocks/typography.md b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/typography.md index 27c4724e65..4a75c3a72a 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/typography.md +++ b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/built-in-blocks/typography.md @@ -15,7 +15,24 @@ Typography blocks are essential for organizing and presenting text-based content ## 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. +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. @@ -28,12 +45,22 @@ The below sample demonstrates the configuration of paragraph block in the Block {% endhighlight %} {% endtabs %} -![Paragraph Block](images/block-paragraph.png) +![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 %} @@ -45,17 +72,32 @@ The below sample demonstrates the configuration of placeholder in the Block Edit {% endhighlight %} {% endtabs %} -![Block placeholder](images/block-placeholder.png) +![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. +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 %} @@ -67,15 +109,25 @@ The below sample demonstrates the configuration of heading block in the Block Ed {% endhighlight %} {% endtabs %} -![Heading Block](images/block-heading.png) +![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` property as `CollapsibleParagraph` or `CollapsibleHeading`. Collapsible blocks allow users to expand or collapse sections, providing a way to hide or show content as needed. +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 @@ -97,7 +149,38 @@ This structure is essential for maintaining nested relationships within the edit 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. +### 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" %} @@ -108,15 +191,48 @@ The below sample demonstrates the configuration of collapsibleHeading and collap {% endhighlight %} {% endtabs %} -![Toggle Block](images/block-toggle.png) +![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` property as `Divider`. +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. @@ -129,11 +245,24 @@ The below sample demonstrates the configuration of divider block in the Block Ed {% endhighlight %} {% endtabs %} -![Divider Block](images/block-divider.png) +![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. +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. @@ -146,15 +275,48 @@ The below sample demonstrates the configuration of quote block in the Block Edit {% endhighlight %} {% endtabs %} -![Quote Block](images/block-quote.png) +![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` property as `Callout`. They're useful for notes, warnings, or tips that require special attention. +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. @@ -167,7 +329,7 @@ The below sample demonstrates the configuration of callout block in the Block Ed {% endhighlight %} {% endtabs %} -![Callout Block](images/block-callout.png) +![Callout Block](./../../images/block-callout.png) ### Configure children @@ -192,4 +354,4 @@ The below sample demonstrates the configuration of children in the Block Editor {% endhighlight %} {% endtabs %} -![Block children](images/block-children.png) \ No newline at end of file +![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/blockeditor/EJ2_ASP.MVC/drag-drop.md index 047915ecf3..c84ed2e7c7 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/drag-drop.md +++ b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/drag-drop.md @@ -37,4 +37,4 @@ During the drag operation, the editor provides visual cues to indicate where the {% 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/blockeditor/EJ2_ASP.MVC/editor-menus.md index 3f1d516f53..768c01533b 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/editor-menus.md +++ b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/editor-menus.md @@ -57,7 +57,7 @@ Below example demonstrates the customization of the Slash Command menu. {% endhighlight %} {% endtabs %} -![Slash Command](images/editor-slashcommand.png) +![Slash Command](./../images/editor-slashcommand.png) ## Context menu @@ -97,7 +97,7 @@ Below example demonstrates the customization of the Context menu. {% endhighlight %} {% endtabs %} -![Context Menu](images/editor-contextmenu.png) +![Context Menu](./../images/editor-contextmenu.png) ## Block action menu @@ -141,7 +141,7 @@ Below example demonstrates the customization of the Block action menu. {% endhighlight %} {% endtabs %} -![Block Action](images/editor-blockaction.png) +![Block Action](./../images/editor-blockaction.png) ## Inline Toolbar diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/getting-started.md b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/getting-started.md index eb534d12f6..d1d3351097 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/getting-started.md +++ b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/getting-started.md @@ -98,4 +98,4 @@ Now, add the Syncfusion® ASP.NET MVC BlockE 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/blockeditor/EJ2_ASP.MVC/globalization.md index a992666be9..b33628f3a5 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/globalization.md +++ b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/globalization.md @@ -57,7 +57,7 @@ The below example shows adding the German culture locale(`de-DE`) {% endhighlight %} {% endtabs %} -![Locale](images/locale.png) +![Locale](./../images/locale.png) ## RTL @@ -72,4 +72,4 @@ RTL provides an option to switch the text direction and layout of the Block Edit {% endhighlight %} {% endtabs %} -![RTL](images/rtl.png) +![RTL](./../images/rtl.png) diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/methods.md b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/methods.md index a4e6eb38ea..6fec110de6 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/methods.md +++ b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/methods.md @@ -93,7 +93,7 @@ Below example demonstrates the usage of the above methods. {% endhighlight %} {% endtabs %} -![Block Method](images/method-block.png) +![Block Method](./../images/method-block.png) ## Selection and Cursor Methods @@ -171,7 +171,7 @@ Below example demonstrates the usage of the above methods. {% endhighlight %} {% endtabs %} -![Selection Method](images/method-selection.png) +![Selection Method](./../images/method-selection.png) ## Focus Management Methods @@ -242,7 +242,7 @@ Below example demonstrates the usage of the above methods. {% endhighlight %} {% endtabs %} -![Formatting Method](images/method-formatting.png) +![Formatting Method](./../images/method-formatting.png) ## Data Export Methods @@ -314,4 +314,4 @@ Below example demonstrates the usage of the above methods. {% endhighlight %} {% endtabs %} -![Data Method](images/method-data.png) +![Data Method](./../images/method-data.png) diff --git a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/paste-cleanup.md b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/paste-cleanup.md index 129f223a88..cea64df59f 100644 --- a/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/paste-cleanup.md +++ b/ej2-asp-core-mvc/blockeditor/EJ2_ASP.MVC/paste-cleanup.md @@ -12,11 +12,11 @@ documentation: ug 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` property in the Block Editor control. This property allows you to define various options to control how content is pasted into the editor. +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` property in the `PasteCleanupSettings` 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. +The [AllowedStyles](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.PasteCleanupSettings.htmlAllowedStyles) 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: @@ -35,7 +35,7 @@ In the below example, only `font-weight` and `font-style` styles will be retaine ## Setting denied tags -The `DeniedTags` property in `PasteCleanupSettings` 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` property is an empty array, meaning no tags are removed by default. +The [DeniedTags](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.PasteCleanupSettings.htmlDeniedTags) 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.htmlDeniedTags) property is an empty array, meaning no tags are removed by default. In the below example, any `