diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/appearance.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/appearance.md index b9b1632c75..99e70be1a1 100644 --- a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/appearance.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/appearance.md @@ -3,7 +3,7 @@ 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. platform: ej2-asp-core-mvc -control: Block Editor +control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- @@ -31,7 +31,7 @@ You can specify the width and height for the Block Editor control using the [Wid ## Setting readonly mode -You can utilize the [Readonly](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_ReadOnly) property to control whether the editor is in read-only mode. When set to `true`, users cannot edit the content but can still view it. +You can utilize the [ReadOnly](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_ReadOnly) property to control whether the editor is in read-only mode. When set to `true`, users cannot edit the content but can still view it. ```cshtml diff --git a/ej2-asp-core-mvc/block-editor/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 index b114cce47b..30ea76fe59 100644 --- a/ej2-asp-core-mvc/block-editor/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 @@ -3,7 +3,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. platform: ej2-asp-core-mvc -control: Block Editor +control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -15,9 +15,9 @@ The Block Editor control enables you to create block-based content editing solut ## 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. +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](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Id), [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Type), [Content](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Content), [Children](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Children) and more to create rich, structured editor. +You can configure blocks with various properties such as `id`, `blockType`, `content` and more to create rich and structured editor. ## Block types @@ -40,9 +40,9 @@ The Block Editor supports multiple block types. Each block type offers different ## Configure indent -You can specify the indentation level of a block using the [Indent](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Indent) property. This property accepts a numeric value that determines how deeply a block is nested from the left margin. +You can specify the indentation level of a block using the `indent` property. This property accepts a numeric value that determines how deeply a block is nested from the left margin. -By default, the [Indent](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Indent) property is set to `0`. +By default, the `indent` property is set to `0`. {% tabs %} {% highlight razor tabtitle="CSHTML" %} @@ -57,7 +57,7 @@ By default, the [Indent](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion ## Configure CSS Class -You can apply custom styling to individual blocks using the [CssClass](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_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` 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. @@ -74,7 +74,7 @@ Custom CSS classes allow you to define specialized styling for specific blocks i ## Configure templates -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.Block.html#Syncfusion_EJ2_BlockEditor_Block_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` property. Templates can be defined as strings, functions, or HTML elements. {% tabs %} {% highlight razor tabtitle="CSHTML" %} 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 index 645bdf327b..9861dd9e26 100644 --- 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 @@ -3,7 +3,7 @@ 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: Block Editor +control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -11,55 +11,32 @@ domainurl: ##DomainURL## # Code Blocks in ##Platform_Name## Block Editor control -You can render Code blocks by setting the [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as `Code`. By setting the `Props` property, you can configure the languages available for syntax highlighting and the default language. The default language is `javascript`. +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`. -## Configure code properties +## Global Code Settings -For Code blocks, you can configure syntax highlighting and language options using the [Props](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html) property. +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 code [Props](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html) property supports the following options: +The `CodeBlockSettings` property supports the following options: | Property | Description | Default Value | |----------|-------------|---------------| -| languages | Array of language options for syntax highlighting | [] | -| defaultLanguage | The default language to use for syntax highlighting | 'javascript' | +| [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' | 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 -### Type & Props -```typescript -// Adding Code block -{ - Type = BlockType.Code, - Content = new List() - { - new - { - type = "Text", - content = "function greeting() {\n console.log(\"Hello, world!\");\n}" - } - }, - Props = new - { - defaultLanguage = "javascript", - languages = new List() - { - new - { - label = "JavaScript", - language = "javascript" - }, - new - { - label = "TypeScript", - language = "typescript" - } - } - } - } -``` +## 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. 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 index 8cdfd7a5f1..21a511860f 100644 --- 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 @@ -3,7 +3,7 @@ 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-javascript -control: Block Editor +control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -15,53 +15,40 @@ 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` block to showcase an image content within your editor. -### Configure image block +### Configure Image Block -You can render Image blocks by setting the [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as `Image`. By setting the `Props` property, you can configure the image source, allowed file types, and display dimensions etc. +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. -The image [Props](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html) property supports the following options: +#### 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 | |----------|-------------|---------------| -| saveFormat | Specifies the format to save the image | Base64 | -| src | Specifies the image path | ' '| -| allowedTypes | Specifies the allowed image file types that can be uploaded | ['.jpg', '.jpeg', '.png'] | -| width | Specifies the display width of the image | ' ' | -| height | Specifies the display height of the image | ' '| -| minWidth | Specifies the minimum width of the image in pixels or as a string unit | 40| -| maxWidth | Specifies the maximum width of the image in pixels or as a string unit | ' '| -| minHeight | Specifies the minimum height of the image in pixels or as a string unit | 40| -| maxHeight | Specifies the maximum height of the image in pixels or as a string unit | ' '| -| altText | Specifies the alternative text to be displayed when the image cannot be loaded | ' '| -| cssClass | Specifies one or more CSS classes to be applied to the image element | ' ' | -| readOnly | Specifies whether the image is in read-only mode | false - - -### Type & Props - -```typescript -// Adding image block - { - Type = BlockType.Image, - Props = new - { - src = "https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png", - altText = "Sample image" - saveFormat= "Base64", - allowedTypes = ['.png', '.gif'], - width = '200px', - height = '100px', - minWidth = 50, - maxWidth = 500, - minHeight = 50, - maxHeight = 300, - cssClass = 'img-custom', - readOnly = true - } -} -``` +| 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. diff --git a/ej2-asp-core-mvc/block-editor/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 index 9de629e45f..9a353dc530 100644 --- a/ej2-asp-core-mvc/block-editor/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 @@ -3,7 +3,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. platform: ej2-asp-core-mvc -control: Block Editor +control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -11,19 +11,18 @@ domainurl: ##DomainURL## # Inline Content in ##Platform_Name## Block Editor control -Content in the Block Editor is managed through the [Content](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Content) property of blocks. +Content in the Block Editor is managed through the `content` property of blocks. -Each content can have properties like `Id`, `Type`, `Content`, `Styles`, and more to customize the appearance and behavior of your text. +Each content can have properties like `id`, `contentType`, `content`, `properties`, and more to customize the appearance and behavior of your text. ## Setting content type -You can specify the type of content using the [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Type) property. The Block Editor supports several content types through the `ContentType` enum: +You can specify the type of content using the `contentType` property. The Block Editor supports several content types through the `ContentType` enum: | Built-in Content Type | Description | |------------------------|-------------------------------------| | Text | Represents plain text content. | | Link | Represents a hyperlink. | -| Code | Represents a code snippet. | | Mention | Represents a user mention. | | Label | Represents a label or tag. | @@ -31,85 +30,25 @@ You can specify the type of content using the [Type](https://help.syncfusion.com ## Configure text content -You can configure Text content by setting the type property to `Text`. The default content type is `Text`. - -### Type - -```typescript -// Adding inline text -{ - Type = BlockType.Paragraph, - Content = new List() - { - new - { - type = 'Text', - content = 'Inline Text' - } - } -} -``` - -## Configure inline code - -You can configure inline code content by setting the type property to `Code`. Code content is used for inline code snippets within regular text. - -### Type - -```typescript -// Adding inline code -{ - Type = BlockType.Paragraph, - Content = new List() - { - new - { - type = 'Code', - content = 'Inline Code' - } - } -} -``` +You can configure Text content by setting the `contentType` property to `Text`. The default content type is `Text`. ## Configure hyperlink -You can configure hyperlink content by setting the type property to `Link`. By setting the `Props` property, you can configure the url of the link and specifies the link should open in a new tab/window. +To create a hyperlink, set the `contentType` property to `Link`. You can configure the link's URL using the `properties` property. ### Configure link properties -Link settings control the behavior and properties of hyperlinks in your content. You can configure link settings using the link [Props](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html) property. +Link settings control the behavior and properties of hyperlinks in your content. You can configure link settings using the `properties` property. -The link [Props](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html) property supports the following options: +Link settings accepts the following options: -| Option | Description | Default Value | -|--------------|-----------------------------------------------------------------------------|---------------| -| url | Specifies the URL of the link. | '' | -| openInNewWindow | Specifies whether the link should open in a new window/tab. | false | - - -### Type & Props - -```typescript -{ - Type = BlockType.Paragraph, - Content = new List() - { - new - { - type = 'Link', - content = 'hyperlinks', - props = { - url = 'https =//ej2.syncfusion.com/documentation', - openInNewWindow = true - } - } - } -} -``` +| Option | Description | Default Value | +| ------------------------- | ----------------------------------------------------------------- | ------------- | +|`url`| Specifies the destination URL of the link. | `''` | ## Configure Label -You can render labels by setting the [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Type) property as `Label`. Additionally, by configuring the `props` 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. +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. ### Built-in items @@ -120,26 +59,7 @@ The Block Editor comes with offers different built-in options. These include: ### Customize label -You can customize the labels by using the `props` property with type `Label`. - -### Type & Props - -```typescript -// Adding inline label -{ - Type = BlockType.Paragraph, - Content = new List() - { - new - { - type = 'Label', - props = { - lableId = 'Name of the label' - } - } - } -} -``` +You can customize the labels by using the `properties` property with type `Label`. ### Trigger Character configuration @@ -178,32 +98,15 @@ The below sample demonstrates the customization of labels in the Block Editor. ## Configure mention -Mentions are references to users or entities that can be inserted into your content. You can configure mention content by setting the type property to `Mention`. +Mentions are references to users or entities that can be inserted into your content. You can configure mention content by setting the `contentType` property to `Mention`. Mentions are typically triggered by the `@` character and are linked to the `Users` collection defined in the Block Editor. -### Type - -```typescript -// Adding inline code -{ - Type = BlockType.Paragraph, - Content = new List() - { - new - { - type = 'Mention', - id = 'user1' - } - } -} -``` - -## Setting content styles +## Applying inline styles -The Block Editor enables you to customize the appearance of Text, Link, and Code elements using the `Styles` property. This property offers rich formatting options to enhance the visual presentation of these content types. +The Block Editor allows you to apply rich formatting to block contents using the `styles` property. -The `Styles`property supports the following formatting options: +The `styles` property supports the following formatting options: | Style Property | Description | Default Value | |---------------|-------------|---------------| @@ -217,6 +120,6 @@ The `Styles`property supports the following formatting options: | subscript | Displays the text as subscript | false | | uppercase | Converts the text to uppercase | false | | lowercase | Converts the text to lowercase | false | -| custom | Adds custom CSS styles to the text | '' | +| inlineCode | Converts the text to InlineCode | false | -You can apply one or more of these styles to any content element for rich text formatting \ No newline at end of file +You can apply one or more of these styles to any content element for rich text formatting. \ No newline at end of file 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 index 5fbe9b128f..9fa9396154 100644 --- 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 @@ -3,7 +3,7 @@ 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: Block Editor +control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -11,116 +11,33 @@ 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 [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) 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` 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 [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as `BulletList`. This block type is used for unordered lists. - -### Type - -```typescript -// Adding bulletlist block -{ - Type = BlockType.BulletList, - Content = new List() - { - new - { - type = "Text", - content = "Implement bulletlist" - } - } -} -``` +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](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Placeholder) property. This text appears when the block is empty. The default placeholder for bullet list is `Add item`. - -```typescript -// Adding placeholder value -{ - Type = BlockType.BulletList, - Props = new { placeholder = "bulletlist" } - Content = new List() - { - new - { - type = "Text", - content = "Implement bulletlist" - } - } -} -``` +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 [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as `NumberedList`.This block type is used for ordered lists. - -### Type - -```typescript -// Adding numberedlist block -{ - Type = BlockType.NumberedList, - Content = new List() - { - new - { - type = "Text", - content = "Implement numberlist" - } - } -} -``` +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](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Placeholder) property. This text appears when the block is empty. The default placeholder for numbered list is `Add item`. - -```typescript -// Adding placeholder value -{ - Type = BlockType.NumberList, - Props = new { placeholder = "Numberlist" } - Content = new List() - { - new - { - type = "Text", - content = "Implement numberlist" - } - } -} -``` +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 [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as `Checklist`. This block type is used for creating interactive to-do lists. - -### Type - -```typescript -// Adding checklist block -{ - Type = BlockType.Checklist, - Content = new List() - { - new - { - type = "Text", - content = "Implement checklist" - } - } -} -``` +You can render Checklist block by setting the `blockType` 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 `props` property with [IsChecked](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_IsChecked). +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](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_IsChecked) property is set to `false`. +By default, the `isChecked` property is set to `false`. {% tabs %} {% highlight razor tabtitle="CSHTML" %} @@ -135,23 +52,7 @@ By default, the [IsChecked](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfus ### Configure placeholder -You can configure placeholder text for block using the [Placeholder](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Placeholder) property. This text appears when the block is empty. The default placeholder for check list is `To Do`. - -```typescript -// Adding placeholder value -{ - Type = BlockType.Checklist, - Props = new { placeholder = "Checklist" } - Content = new List() - { - new - { - type = "Text", - content = "Implement Checklist" - } - } -} -``` +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 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..575de645b3 --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/built-in-blocks/table-block.md @@ -0,0 +1,29 @@ +--- +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/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 index 4278954228..bb09c59952 100644 --- 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 @@ -3,7 +3,7 @@ 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: Block Editor +control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -15,24 +15,7 @@ Typography blocks are essential for organizing and presenting text-based content ## Configure paragraph block -You can render Paragraph blocks by setting the [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Type) 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. - -### Type - -```typescript -// Adding paragraph block -{ - Type = BlockType.Paragraph, - Content = new List() - { - new - { - type = "Text", - content = 'This is a paragraph block example.' - } - } -} -``` +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. @@ -49,17 +32,7 @@ The below sample demonstrates the configuration of paragraph block in the Block ### Configure placeholder -You can configure placeholder text for block using the [Placeholder](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Placeholder) property. This text appears when the block is empty. The default placeholder for the paragraph block is `Write something or ‘/’ for commands.`. - -### Type & Props - -```typescript -// Adding placeholder - { - Type = BlockType.Paragraph, - Props = new {placeholder: 'Start typing ...'} -} -``` +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. @@ -76,32 +49,13 @@ The below sample demonstrates the configuration of placeholder in the Block Edit ## Configure heading block -You can render Heading blocks by setting the [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Type) 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` 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`. +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`. -### Type & Props - -```typescript -// Adding heading block -{ - Type = BlockType.Heading, - Props = new { level = 1 }, - // levels range from 1 to 4 - Content = new List() - { - new - { - type = "Text", - content = 'This is a heading block example.' - } - } -} -``` - The below sample demonstrates the configuration of heading block in the Block Editor. {% tabs %} @@ -117,65 +71,31 @@ The below sample demonstrates the configuration of heading block in the Block Ed ### Configure placeholder -You can configure placeholder text for block using the [Placeholder](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Placeholder) property. This text appears when the block is empty. The default placeholder for heading block is `Heading{levels}`. - -```typescript -// Adding placeholder value to blocktype -{ - Type = BlockType.Heading, - Props = new { - level = 1, - placeholder = 'Heading1' - } -} -``` +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 [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Type) 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` 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 `props` property . The levels can be varied from `level: 1` to `level: 4`. +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](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Children) property. This property can be achieved through `props` property that allows you to create nested blocks, which is applicable only for Callout and Collapsible blocks. +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](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_IsExpanded) property. By default, this property is set to `false`, meaning the block will be collapsed initially. This setting is only applicable to Collapsible blocks. - -### Type & Props - -```typescript -// Configuring CollapsibleHeading block -{ - Type = BlockType.CollapsibleHeading, - Props= new - { - level=1, - IsExpanded = true, - Children = new List() - { - //your content to be here.. - } - } -} -// Configuring CollapsibleParagraph block -{ - Type = BlockType.CollapsibleParagraph, - Props= new - { - Children = new List() - { - //your content to be here.. - } - } -} -``` +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. @@ -192,65 +112,11 @@ The below sample demonstrates the configuration of collapsibleHeading and collap ### Configure placeholder -You can configure placeholder text for block using the [Placeholder](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Placeholder) property. This text appears when the block is empty. The default placeholder for collapsible heading and collapsible paragraph is `Collapsible Heading{levels}` and `Collapsible Paragraph` respectively. - -```typescript -// Adding placeholder value to collapsible heading -{ - Type = BlockType.CollapsibleHeading, - Props= new - { - level=1, - IsExpanded = true, - placeholder = 'collapsible heading block', - } -} -//Adding placeholder value for collapsible paragraph -{ - Type = BlockType.CollapsibleParagraph, - Props= new - { - placeholder = 'collapsible paragraph block', - } -} -``` +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 [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Type) property as `Divider`. - -### Type & Props - -```typescript -// Adding divider block -{ - { - Type = BlockType.Paragraph, - Content = new List() - { - new - { - type = "Text", - content = "This section discusses the features of the Block Editor." - } - } - }, - { - Type = BlockType.Divider - }, - { - Type = BlockType.Paragraph, - Content = new List() - { - new - { - type = "Text", - content = "This section discusses the features of the Block Editor." - } - } - } -} -``` +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. @@ -267,24 +133,7 @@ The below sample demonstrates the configuration of divider block in the Block Ed ## Configure quote block -You can render Quote blocks by setting the [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Type) property as `Quote`. Quote blocks are specially styled for quotations or excerpts. - -### Type & Props - -```typescript -// Adding quote block -{ - Type = BlockType.Quote, - Content = new List() - { - new - { - type = "Text", - content = "The greatest glory in living lies not in never falling, but in rising every time we fall." - } - } -} -``` +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. @@ -301,43 +150,11 @@ The below sample demonstrates the configuration of quote block in the Block Edit ### Configure placeholder -You can configure placeholder text for block using the [Placeholder](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Placeholder) 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 -{ - Type = BlockType.Quote, - Props = new { placeholder = 'Quote'} -} -``` +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 [Type](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Type) property as `Callout`. They're useful for notes, warnings, or tips that require special attention. - -### Type & Props - -```typescript -// Adding callout block - { - Type = BlockType.Callout, - Props= new { - Children = new List() - { - new Block() - { - Type = "Paragraph", - Content = new List(){ - new{ - type = "Text", - content = "Important information: This is a callout block used to highlight important content." - } - } - } - } - } -} -``` +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. @@ -354,13 +171,15 @@ The below sample demonstrates the configuration of callout block in the Block Ed ### Configure children -The Block Editor supports hierarchical content structures through the [Children](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Children) property. This property allows you to create nested blocks, which is applicable only for Callout and Collapsible blocks. +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 -For proper hierarchy, you should ensure that the [ParentId](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_ParentId) of each child block matches the `Id` of its parent block. This structure helps maintain the nested relationships within the editor. +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. diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/drag-drop.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/drag-drop.md index f9b1e4b2d3..5ce63737eb 100644 --- a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/drag-drop.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/drag-drop.md @@ -3,7 +3,7 @@ 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. platform: ej2-asp-core-mvc -control: Block Editor +control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/editor-menus.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/editor-menus.md index 7bc1b7117c..e65e33edb6 100644 --- a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/editor-menus.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/editor-menus.md @@ -3,7 +3,7 @@ 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. platform: ej2-asp-core-mvc -control: Block Editor +control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- @@ -24,13 +24,14 @@ The Slash Command menu comes with a set of pre-defined commands for all block ty - **Lists(Bullet, Numbered, Checklist)**: for different list types. - **Paragraph**: for standard text blocks. - **Image**: for media insertion. +- **Table**: Inserts a table block. - **Toggle**: for collapsible content. - **Callout**: for highlighting important information. - **Utility(Divider, Quote, Code)**: for other utility blocks. ### Customize Slash command menu -You can utilize the [CommandMenu](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_CommandMenu) property on the Block Editor control to customize the Slash Command menu to include your own custom commands and other modifications. +You can utilize the [CommandMenuSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_CommandMenuSettings) property on the Block Editor control to customize the Slash Command menu to include your own custom commands and other modifications. #### Show or hide tooltip @@ -42,10 +43,8 @@ The following events are available in the Slash Command menu. |Name|Args|Description| |---|---|---| -|[Open](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.CommandMenuSettings.html#Syncfusion_EJ2_BlockEditor_CommandMenuSettings_Open)|CommandMenuOpenEventArgs|Triggers when the command menu is opened.| -|[Close](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.CommandMenuSettings.html#Syncfusion_EJ2_BlockEditor_CommandMenuSettings_Close)|CommandMenuCloseEventArgs|Triggers when the command menu is closed.| -|[QueryFiltering](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.CommandMenuSettings.html#Syncfusion_EJ2_BlockEditor_CommandMenuSettings_QueryFiltering)|CommandQueryFilteringEventArgs|Triggers when the user types to filter the command menu items.| -|[ItemClicked](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.CommandMenuSettings.html#Syncfusion_EJ2_BlockEditor_CommandMenuSettings_ItemClicked)|CommandItemClickedEventArgs|Triggers when the user clicks on a command menu item.| +|`Filtering`|CommandFilteringEventArgs|Triggers when the user types to filter the command menu items.| +|`ItemSelect`|CommandItemSelectEventArgs|Triggers when the user clicks on a command menu item.| Below example demonstrates the customization of the Slash Command menu. @@ -75,7 +74,7 @@ The Context menu offers different built-in options: ### Customize Context menu -You can utilize the [ContextMenu](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_ContextMenu) property on the Block Editor to customize the Context menu to add specific actions or modify existing ones based on the application needs. +You can utilize the [ContextMenuSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.ContextMenuSettings.html) property on the Block Editor to customize the Context menu to add specific actions or modify existing ones based on the application needs. ### Events @@ -83,11 +82,9 @@ The following events are available in the Context menu. |Name|Args|Description| |---|---|---| -|[BeforeOpen](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.ContextMenuSettings.html#Syncfusion_EJ2_BlockEditor_ContextMenuSettings_BeforeOpen)|ContextMenuBeforeOpenEventArgs|Triggers before the context menu opens.| -|[Open](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.ContextMenuSettings.html#Syncfusion_EJ2_BlockEditor_ContextMenuSettings_Open)|ContextMenuOpenEventArgs|Triggers when the context menu is opened.| -|[BeforeClose](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.ContextMenuSettings.html#Syncfusion_EJ2_BlockEditor_ContextMenuSettings_BeforeClose)|ContextMenuBeforeCloseEventArgs|Triggers before the context menu closes.| -|[Close](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.ContextMenuSettings.html#Syncfusion_EJ2_BlockEditor_ContextMenuSettings_Close)|ContextMenuCloseEventArgs|Triggers when the context menu is closed.| -|[ItemClick](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.ContextMenuSettings.html#Syncfusion_EJ2_BlockEditor_ContextMenuSettings_ItemClick)|ContextMenuItemClickEventArgs|Triggers when a context menu item is clicked.| +|`Opening`|ContextMenuOpeningEventArgs|Triggers before the context menu opens.| +|`Closing`|ContextMenuClosingEventArgs|Triggers before the context menu closes.| +|`ItemSelect`|ContextMenuItemSelectEventArgs|Triggers when a context menu item is clicked.| Below example demonstrates the customization of the Context menu. @@ -117,7 +114,7 @@ The Block Action menu provides convenient actions for managing individual blocks ### Customize Block action menu -You can utilize the [BlockActionsMenu](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_BlockActionsMenu) property on the block editor to customize the Block action menu to include block-specific commands relevant to your application. This allows for highly tailored user experiences. +You can utilize the [BlockActionsMenuSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockActionMenuSettings.html) property on the block editor to customize the Block action menu to include block-specific commands relevant to your application. This allows for highly tailored user experiences. #### Show or hide tooltip @@ -129,9 +126,9 @@ The following events are available in the Block action menu. |Name|Args|Description| |---|---|---| -|[Open](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockActionMenuSettings.html#Syncfusion_EJ2_BlockEditor_BlockActionMenuSettings_Open)|Block actionMenuOpenEventArgs|Triggers when the block action menu is opened.| -|[Close](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockActionMenuSettings.html#Syncfusion_EJ2_BlockEditor_BlockActionMenuSettings_Close)|Block actionMenuCloseEventArgs|Triggers when the block action menu is closed.| -|[ItemClick](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockActionMenuSettings.html#Syncfusion_EJ2_BlockEditor_BlockActionMenuSettings_ItemClick)|Block actionMenuItemClickEventArgs|Triggers when a block action menu item is clicked.| +|`Opening`|BlockActionMenuOpeningEventArgs|Triggers when the block action menu is opened.| +|`Closing`|BlockActionMenuClosingEventArgs|Triggers when the block action menu is closed.| +|`ItemSelect`|BlockActionItemSelectEventArgs|Triggers when a block action menu item is clicked.| Below example demonstrates the customization of the Block action menu. @@ -162,7 +159,7 @@ The Inline Toolbar includes below built-in formatting options: ### Customize Inline Toolbar -You can utilize the [InlineToolbar](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_InlineToolbar) property on the Block Editor to customize the Inline Toolbar to add or remove formatting options based on your application's needs. +You can utilize the [InlineToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_InlineToolbarSettings) property on the Block Editor to customize the Inline Toolbar to add or remove formatting options based on your application's needs. Below example demonstrates how to customize the Inline Toolbar. @@ -176,9 +173,7 @@ The following events are available in the Inline Toolbar. |Name|Args|Description| |---|---|---| -|[Open](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.InlineToolbarSettings.html#Syncfusion_EJ2_BlockEditor_InlineToolbarSettings_Close)|ToolbarOpenEventArgs|Triggers when the inline toolbar is opened.| -|[Close](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.InlineToolbarSettings.html#Syncfusion_EJ2_BlockEditor_InlineToolbarSettings_Close)|ToolbarCloseEventArgs|Triggers when the inline toolbar is closed.| -|[ItemClicked](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.InlineToolbarSettings.html#Syncfusion_EJ2_BlockEditor_InlineToolbarSettings_ItemClicked)|ToolbarItemClickedEventArgs|Triggers when the user clicks on an inline toolbar item.| +|`ItemClick`|ToolbarItemClickEventArgs|Triggers when the user clicks on an inline toolbar item.| Below example demonstrates the customization of the Inline Toolbar. diff --git a/ej2-asp-core-mvc/block-editor/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 new file mode 100644 index 0000000000..7d1507430f --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/editor-security/cross-site-script.md @@ -0,0 +1,18 @@ +--- +layout: post +title: Cross-Site scripting in ##Platform_Name## Block Editor Control | Syncfusion +description: Checkout and learn about Cross-Site scripting with Syncfusion Essential ##Platform_Name## 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 + +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. + +## Enabling XSS prevention + +The [EnableHtmlSanitizer](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_EnableHtmlSanitizer), enabled by default, activates XSS prevention. When active, the editor automatically removes elements like ` @@ -55,7 +55,7 @@ The [SelectionChanged](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.E ```cshtml
- @Html.EJS().BlockEditor("block-editor").Created("selectionChanged").Render() + @Html.EJS().BlockEditor("block-editor").SelectionChanged("selectionChanged").Render()
- -``` - -## BlockAdded - -The [BlockAdded](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_BlockAdded) event is triggered when a new block is added to the editor. This includes blocks added through user interaction, paste operations, or programmatic insertion. - -```cshtml - -
- @Html.EJS().BlockEditor("block-editor").Created("blockAdded").Render() -
- - - -``` - -## BlockRemoved - -The [BlockRemoved](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_BlockRemoved) event is triggered when a block is removed from the editor. This can occur through user deletion, cut operations, or programmatic removal. - -```cshtml - -
- @Html.EJS().BlockEditor("block-editor").Created("blockRemoved").Render() -
- - - -``` - -## BlockMoved - -The [BlockMoved](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_BlockMoved) event is triggered when blocks are moved from one position to another within the editor. This includes drag-and-drop operations, through keyboard shortcuts or programmatic block reordering. - -```cshtml - -
- @Html.EJS().BlockEditor("block-editor").Created("blockMoved").Render() -
- - - -``` - ## BlockDragStart The [BlockDragStart](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_BlockDragStart) event is triggered at the beginning of a block drag operation, providing information about the blocks being dragged and their initial position. @@ -145,7 +73,7 @@ The [BlockDragStart](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2 ```cshtml
- @Html.EJS().BlockEditor("block-editor").Created("blockDragStart").Render() + @Html.EJS().BlockEditor("block-editor").BlockDragStart("blockDragStart").Render()
- -``` - -## BeforePaste +## BeforePasteCleanup -The [BeforePaste](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_BeforePaste) event is triggered before content is pasted into the editor. This event allows you to modify or cancel the paste operation. +The `BeforePasteCleanup` event is triggered before content is pasted into the editor. This event allows you to modify or cancel the paste operation. ```cshtml
- @Html.EJS().BlockEditor("block-editor").Created("beforePaste").Render() + @Html.EJS().BlockEditor("block-editor").BeforePasteCleanup("beforePaste").Render()
+ +``` \ No newline at end of file diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/undo-redo.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/undo-redo.md index 8e55fd7eda..988de5e0d1 100644 --- a/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/undo-redo.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.MVC/undo-redo.md @@ -3,7 +3,7 @@ layout: post title: Undo redo in ##Platform_Name## Block Editor Control | Syncfusion description: Checkout and learn about undo redo with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. platform: ej2-asp-core-mvc -control: Block Editor +control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/appearance.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/appearance.md index edc8e9d810..992186e382 100644 --- a/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/appearance.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/appearance.md @@ -3,7 +3,7 @@ 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. platform: ej2-asp-core-mvc -control: Block Editor +control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- @@ -31,7 +31,7 @@ You can specify the width and height for the Block Editor control using the [wid ## Setting readonly mode -You can utilize the [readonly](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_ReadOnly) property to control whether the editor is in read-only mode. When set to `true`, users cannot edit the content but can still view it. +You can utilize the [readOnly](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_ReadOnly) property to control whether the editor is in read-only mode. When set to `true`, users cannot edit the content but can still view it. ```cshtml diff --git a/ej2-asp-core-mvc/block-editor/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 index 1efe915f9b..5d73f0b95a 100644 --- a/ej2-asp-core-mvc/block-editor/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 @@ -3,7 +3,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. platform: ej2-asp-core-mvc -control: Block Editor +control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -15,9 +15,9 @@ The Block Editor control enables you to create block-based content editing solut ## 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 `e-block` tag helper, allowing for better structure and formatting options. +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 `e-block` tag helper, allowing for better structure and formatting options. -You can configure blocks with various properties such as [id](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Id), [type](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Type), [content](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Content), [children](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Children) and more to create rich, structured editor. +You can configure blocks with various properties such as `id`, `blockType`, `content` and more to create rich and structured editor. ## Block types @@ -40,9 +40,9 @@ The Block Editor supports multiple block types. Each block type offers different ## Configure indent -You can specify the indentation level of a block using the [indent](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Indent) property. This property accepts a numeric value that determines how deeply a block is nested from the left margin. +You can specify the indentation level of a block using the `indent` property. This property accepts a numeric value that determines how deeply a block is nested from the left margin. -By default, the [indent](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Indent) property is set to `0`. +By default, the `indent` property is set to `0`. {% tabs %} {% highlight razor tabtitle="CSHTML" %} @@ -57,7 +57,7 @@ By default, the [indent](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusio ## Configure CSS Class -You can apply custom styling to individual blocks using the [cssClass](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_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` 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. @@ -74,7 +74,7 @@ Custom CSS classes allow you to define specialized styling for specific blocks i ## Configure templates -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.Block.html#Syncfusion_EJ2_BlockEditor_Block_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` property. Templates can be defined as strings, functions, or HTML elements. {% tabs %} {% highlight razor tabtitle="CSHTML" %} 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 index 66344ca439..6506ca2184 100644 --- 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 @@ -3,7 +3,7 @@ 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: Block Editor +control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -11,57 +11,34 @@ domainurl: ##DomainURL## # Code Blocks in ##Platform_Name## Block Editor control -You can render Code blocks by setting the [type](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as `Code`. By setting the [codeSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_CodeSettings) property, you can configure the languages available for syntax highlighting and the default language. The default language is 'javascript'. +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`. -## Configure code properties +## Global Code Settings -For Code blocks, you can configure syntax highlighting and language options using the [Props](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html) property. +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 code [Props](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html) property supports the following options: +The `codeBlockSettings` property supports the following options: | Property | Description | Default Value | |----------|-------------|---------------| -| languages | Array of language options for syntax highlighting | [] | -| defaultLanguage | The default language to use for syntax highlighting | 'javascript' | +| [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 -### Type & Props -```typescript -// Adding Code block -{ - Type = BlockType.Code, - Content = new List() - { - new - { - type = "Text", - content = "function greeting() {\n console.log(\"Hello, world!\");\n}" - } - }, - Props = new - { - defaultLanguage = "javascript", - languages = new List() - { - new - { - label = "JavaScript", - language = "javascript" - }, - new - { - label = "TypeScript", - language = "typescript" - } - } - } -} -``` +## 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. +Below example illustrates how to render the code block in the Block Editor. {% tabs %} {% highlight razor tabtitle="CSHTML" %} 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 index 4081ccb424..d7c3635078 100644 --- 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 @@ -3,7 +3,7 @@ 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: Block Editor +control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -17,51 +17,38 @@ Block Editor supports addition of embeds to help you organize, showcase contents You can use the `Image` block to showcase an image content within your editor. -### Configure image block +### Configure Image Block -You can render Image blocks by setting the [type](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as `Image`. By setting the `Props` property, you can configure the image source, allowed file types, and display dimensions etc. +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. -The image [Props](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html) property supports the following options: +#### 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 | |----------|-------------|---------------| -| saveFormat | Specifies the format to save the image | Base64 | -| src | Specifies the image path | ' '| -| allowedTypes | Specifies the allowed image file types that can be uploaded | ['.jpg', '.jpeg', '.png'] | -| width | Specifies the display width of the image | ' ' | -| height | Specifies the display height of the image | ' '| -| minWidth | Specifies the minimum width of the image in pixels or as a string unit | 40| -| maxWidth | Specifies the maximum width of the image in pixels or as a string unit | ' '| -| minHeight | Specifies the minimum height of the image in pixels or as a string unit | 40| -| maxHeight | Specifies the maximum height of the image in pixels or as a string unit | ' '| -| altText | Specifies the alternative text to be displayed when the image cannot be loaded | ' '| -| cssClass | Specifies one or more CSS classes to be applied to the image element | ' ' | -| readOnly | Specifies whether the image is in read-only mode | false - - -### Type & Props - -```typescript -// Adding image block - { - Type = BlockType.Image, - Props = new - { - src = "https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png", - altText = "Sample image" - saveFormat= "Base64", - allowedTypes = ['.png', '.gif'], - width = '200px', - height = '100px', - minWidth = 50, - maxWidth = 500, - minHeight = 50, - maxHeight = 300, - cssClass = 'img-custom', - readOnly = true - } -} -``` +| 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. diff --git a/ej2-asp-core-mvc/block-editor/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 index b3c1827211..30bfa16238 100644 --- a/ej2-asp-core-mvc/block-editor/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 @@ -3,7 +3,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. platform: ej2-asp-core-mvc -control: Block Editor +control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -11,19 +11,18 @@ domainurl: ##DomainURL## # Inline Content in ##Platform_Name## Block Editor control -Content in the Block Editor is managed through the [content](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Content) property of blocks. +Content in the Block Editor is managed through the `content` property of blocks. -Each content can have properties like `id`, `type`, `content`, `styles`, and more to customize the appearance and behavior of your text. +Each content can have properties like `id`, `contentType`, `content`, `properties`, and more to customize the appearance and behavior of your text. ## Setting content type -You can specify the type of content using the `type` property. The Block Editor supports several content types through the `ContentType` enum: +You can specify the type of content using the `contentType` property. The Block Editor supports several content types through the `ContentType` enum: | Built-in Content Type | Description | |------------------------|-------------------------------------| | Text | Represents plain text content. | | Link | Represents a hyperlink. | -| Code | Represents a code snippet. | | Mention | Represents a user mention. | | Label | Represents a label or tag. | @@ -31,85 +30,25 @@ You can specify the type of content using the `type` property. The Block Editor ## Configure text content -You can configure Text content by setting the type property to `Text`. The default content type is `Text`. - -### Type - -```typescript -// Adding inline text -{ - Type = BlockType.Paragraph, - Content = new List() - { - new - { - type = 'Text', - content = 'Inline Text' - } - } -} -``` - -## Configure inline code - -You can configure inline code content by setting the type property to `Code`. Code content is used for inline code snippets within regular text. - -### Type - -```typescript -// Adding inline code -{ - Type = BlockType.Paragraph, - Content = new List() - { - new - { - type = 'Code', - content = 'Inline Code' - } - } -} -``` +You can configure Text content by setting the `contentType` property to `Text`. The default content type is `Text`. ## Configure hyperlink -You can configure hyperlink content by setting the type property to `Link`. By setting the `Props` property, you can configure the url of the link and specifies the link should open in a new tab/window. +To create a hyperlink, set the `contentType` property to `Link`. You can configure the link's URL using the `properties` property. ### Configure link properties -Link settings control the behavior and properties of hyperlinks in your content. You can configure link settings using the link [Props](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html) property. +Link settings control the behavior and properties of hyperlinks in your content. You can configure link settings using the `properties` property. -The link [Props](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html) property supports the following options: +Link settings accepts the following options: -| Option | Description | Default Value | -|--------------|-----------------------------------------------------------------------------|---------------| -| url | Specifies the URL of the link. | '' | -| openInNewWindow | Specifies whether the link should open in a new window/tab. | false | - - -### Type & Props - -```typescript -{ - Type = BlockType.Paragraph, - Content = new List() - { - new - { - type = 'Link', - content = 'hyperlinks', - props = { - url = 'https =//ej2.syncfusion.com/documentation', - openInNewWindow = true - } - } - } -} -``` +| Option | Description | Default Value | +| ------------------------- | ----------------------------------------------------------------- | ------------- | +|`url`| Specifies the destination URL of the link. | `''` | ## Configure Label -You can render labels by setting the [type](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Type) property as `Label`. Additionally, by configuring the `props` 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. +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. ### Built-in items @@ -120,26 +59,7 @@ The Block Editor comes with offers different built-in options. These include: ### Customize label -You can customize the labels by using the `props` property with type `Label`. - -### Type & Props - -```typescript -// Adding inline label -{ - Type = BlockType.Paragraph, - Content = new List() - { - new - { - type = 'Label', - props = { - lableId = 'Name of the label' - } - } - } -} -``` +You can customize the labels by using the `properties` property with type `Label`. ### Trigger Character configuration @@ -178,32 +98,15 @@ The below sample demonstrates the customization of labels in the Block Editor. ## Configure mention -Mentions are references to users or entities that can be inserted into your content. You can configure mention content by setting the type property to `Mention`. +Mentions are references to users or entities that can be inserted into your content. You can configure mention content by setting the `contentType` property to `Mention`. Mentions are typically triggered by the `@` character and are linked to the `users` collection defined in the Block Editor. -### Type - -```typescript -// Adding inline code -{ - Type = BlockType.Paragraph, - Content = new List() - { - new - { - type = 'Mention', - id = 'user1' - } - } -} -``` - -## Setting content styles +## Applying inline styles -The Block Editor enables you to customize the appearance of Text, Link, and Code elements using the `styles` property. This property offers rich formatting options to enhance the visual presentation of these content types. +The Block Editor allows you to apply rich formatting to block contents using the `styles` property. -The `styles`property supports the following formatting options: +The `styles` property supports the following formatting options: | Style Property | Description | Default Value | |---------------|-------------|---------------| @@ -217,6 +120,6 @@ The `styles`property supports the following formatting options: | subscript | Displays the text as subscript | false | | uppercase | Converts the text to uppercase | false | | lowercase | Converts the text to lowercase | false | -| custom | Adds custom CSS styles to the text | '' | +| inlineCode | Converts the text to InlineCode | false | -You can apply one or more of these styles to any content element for rich text formatting \ No newline at end of file +You can apply one or more of these styles to any content element for rich text formatting. \ No newline at end of file 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 index da5c4e345b..81115d837f 100644 --- 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 @@ -3,7 +3,7 @@ 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: Block Editor +control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -11,116 +11,33 @@ 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 [type](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) 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 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 [type](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as `BulletList`. This block type is used for unordered lists. - -### Type - -```typescript -// Adding bulletlist block -{ - Type = BlockType.BulletList, - Content = new List() - { - new - { - type = "Text", - content = "Implement bulletlist" - } - } -} -``` +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](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Placeholder) property. This text appears when the block is empty. The default placeholder for bullet list is `Add item`. - -```typescript -// Adding placeholder value -{ - Type = BlockType.BulletList, - Props = new { placeholder = "bulletlist" } - Content = new List() - { - new - { - type = "Text", - content = "Implement bulletlist" - } - } -} -``` +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 [type](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as `NumberedList`.This block type is used for ordered lists. - -### Type - -```typescript -// Adding numberedlist block -{ - Type = BlockType.NumberedList, - Content = new List() - { - new - { - type = "Text", - content = "Implement numberlist" - } - } -} -``` +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](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Placeholder) property. This text appears when the block is empty. The default placeholder for numbered list is `Add item`. - -```typescript -// Adding placeholder value -{ - Type = BlockType.NumberList, - Props = new { placeholder = "Numberlist" } - Content = new List() - { - new - { - type = "Text", - content = "Implement numberlist" - } - } -} -``` +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 [type](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockType.html) property as `Checklist`. This block type is used for creating interactive to-do lists. - -### Type - -```typescript -// Adding checklist block -{ - Type = BlockType.Checklist, - Content = new List() - { - new - { - type = "Text", - content = "Implement 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 `props` property with [isChecked](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_IsChecked). +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](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_IsChecked) property is set to `false`. +By default, the `isChecked` property is set to `false`. {% tabs %} {% highlight razor tabtitle="CSHTML" %} @@ -135,23 +52,7 @@ By default, the [isChecked](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfu ### Configure placeholder -You can configure placeholder text for block using the [placeholder](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Placeholder) property. This text appears when the block is empty. The default placeholder for check list is `To Do`. - -```typescript -// Adding placeholder value -{ - Type = BlockType.Checklist, - Props = new { placeholder = "Checklist" } - Content = new List() - { - new - { - type = "Text", - content = "Implement Checklist" - } - } -} -``` +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 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..575de645b3 --- /dev/null +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/built-in-blocks/table-block.md @@ -0,0 +1,29 @@ +--- +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/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 index f0626dba25..39cbc157f5 100644 --- 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 @@ -3,7 +3,7 @@ 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: Block Editor +control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug domainurl: ##DomainURL## @@ -11,28 +11,11 @@ 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 BlockEditor component supports various structural blocks—such as Paragraph, Heading, Collapsible Block, Divider, Quote, and Callout to help you format and structure content effectively. +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 [type](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Type) 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. - -### Type - -```typescript -// Adding paragraph block -{ - Type = BlockType.Paragraph, - Content = new List() - { - new - { - type = "Text", - content = 'This is a paragraph block example.' - } - } -} -``` +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. @@ -49,19 +32,7 @@ The below sample demonstrates the configuration of paragraph block in the Block ### Configure placeholder -You can configure placeholder text for block using the [placeholder](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Placeholder) property. This text appears when the block is empty. The default placeholder for the paragraph block is `Write something or ‘/’ for commands.`. - -### Type & Props - -```typescript -// Adding placeholder - { - Type = BlockType.Paragraph, - Props = new {placeholder: 'Start typing ...'} -} -``` - -The below sample demonstrates the configuration of paragraph block in the Block Editor. +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. @@ -78,33 +49,14 @@ The below sample demonstrates the configuration of placeholder in the Block Edit ## Configure heading block -You can render Heading blocks by setting the [type](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Type) 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` 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`. +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`. -### Type & Props - -```typescript -// Adding heading block -{ - Type = BlockType.Heading, - Props = new { level = 1 }, - // levels range from 1 to 4 - Content = new List() - { - new - { - type = "Text", - content = 'This is a heading block example.' - } - } -} -``` - -The below sample demonstrates the configuration of paragraph block in the Block Editor. +The below sample demonstrates the configuration of heading block in the Block Editor. {% tabs %} {% highlight razor tabtitle="CSHTML" %} @@ -119,65 +71,31 @@ The below sample demonstrates the configuration of paragraph block in the Block ### Configure placeholder -You can configure placeholder text for block using the [placeholder](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Placeholder) property. This text appears when the block is empty. The default placeholder for heading block is `Heading{levels}`. - -```typescript -// Adding placeholder value to blocktype -{ - Type = BlockType.Heading, - Props = new { - level = 1, - placeholder = 'Heading1' - } -} -``` +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 [type](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Type) 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` 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 `props` property . The levels can be varied from `level: 1` to `level: 4`. +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](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Children) property. This property can be achieved through `props` property that allows you to create nested blocks, which is applicable only for Callout and Collapsible blocks. +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](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_IsExpanded) property. By default, this property is set to `false`, meaning the block will be collapsed initially. This setting is only applicable to Collapsible blocks. - -### Type & Props - -```typescript -// Configuring CollapsibleHeading block -{ - Type = BlockType.CollapsibleHeading, - Props= new - { - level=1, - IsExpanded = true, - Children = new List() - { - //your content to be here.. - } - } -} -// Configuring CollapsibleParagraph block -{ - Type = BlockType.CollapsibleParagraph, - Props= new - { - Children = new List() - { - //your content to be here.. - } - } -} -``` +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. @@ -194,65 +112,11 @@ The below sample demonstrates the configuration of collapsibleHeading and collap ### Configure placeholder -You can configure placeholder text for block using the [placeholder](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Placeholder) property. This text appears when the block is empty. The default placeholder for collapsible heading and collapsible paragraph is `Collapsible Heading{levels}` and `Collapsible Paragraph` respectively. - -```typescript -// Adding placeholder value to collapsible heading -{ - Type = BlockType.CollapsibleHeading, - Props= new - { - level=1, - IsExpanded = true, - placeholder = 'collapsible heading block', - } -} -//Adding placeholder value for collapsible paragraph -{ - Type = BlockType.CollapsibleParagraph, - Props= new - { - placeholder = 'collapsible paragraph block', - } -} -``` +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 [type](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Type) property as `Divider`. - -### Type & Props - -```typescript -// Adding divider block -{ - { - Type = BlockType.Paragraph, - Content = new List() - { - new - { - type = "Text", - content = "This section discusses the features of the Block Editor." - } - } - }, - { - Type = BlockType.Divider - }, - { - Type = BlockType.Paragraph, - Content = new List() - { - new - { - type = "Text", - content = "This section discusses the features of the Block Editor." - } - } - } -} -``` +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. @@ -269,24 +133,7 @@ The below sample demonstrates the configuration of divider block in the Block Ed ## Configure quote block -You can render Quote blocks by setting the [type](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Type) property as `Quote`. Quote blocks are specially styled for quotations or excerpts. - -### Type & Props - -```typescript -// Adding quote block -{ - Type = BlockType.Quote, - Content = new List() - { - new - { - type = "Text", - content = "The greatest glory in living lies not in never falling, but in rising every time we fall." - } - } -} -``` +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. @@ -303,43 +150,11 @@ The below sample demonstrates the configuration of quote block in the Block Edit ### Configure placeholder -You can configure placeholder text for block using the [placeholder](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Placeholder) 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 -{ - Type = BlockType.Quote, - Props = new { placeholder = 'Quote'} -} -``` +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 [Type](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Type) property as `Callout`. They're useful for notes, warnings, or tips that require special attention. - -### Type & Props - -```typescript -// Adding callout block - { - Type = BlockType.Callout, - Props= new { - Children = new List() - { - new Block() - { - Type = "Paragraph", - Content = new List(){ - new{ - type = "Text", - content = "Important information: This is a callout block used to highlight important content." - } - } - } - } - } -} -``` +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. @@ -356,13 +171,15 @@ The below sample demonstrates the configuration of callout block in the Block Ed ### Configure children -The Block Editor supports hierarchical content structures through the [children](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_Children) property. This property allows you to create nested blocks, which is applicable only for Callout and Collapsible blocks. +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 -For proper hierarchy, you should ensure that the [parentId](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.Block.html#Syncfusion_EJ2_BlockEditor_Block_ParentId) of each child block matches the `Id` of its parent block. This structure helps maintain the nested relationships within the editor. +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. diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/drag-drop.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/drag-drop.md index 2197e23898..9dca58f723 100644 --- a/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/drag-drop.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/drag-drop.md @@ -3,7 +3,7 @@ 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. platform: ej2-asp-core-mvc -control: Block Editor +control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/editor-menus.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/editor-menus.md index d8dbbdd6df..2ed32115a1 100644 --- a/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/editor-menus.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/editor-menus.md @@ -3,7 +3,7 @@ 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. platform: ej2-asp-core-mvc -control: Block Editor +control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- @@ -24,6 +24,7 @@ The Slash Command menu comes with a set of pre-defined commands for all block ty - **Lists(Bullet, Numbered, Checklist)**: for different list types. - **Paragraph**: for standard text blocks. - **Image**: for media insertion. +- **Table**: Inserts a table block. - **Toggle**: for collapsible content. - **Callout**: for highlighting important information. - **Utility(Divider, Quote, Code)**: for other utility blocks. @@ -42,10 +43,8 @@ The following events are available in the Slash Command menu. |Name|Args|Description| |---|---|---| -|[open](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.CommandMenuSettings.html#Syncfusion_EJ2_BlockEditor_CommandMenuSettings_Open)|CommandMenuOpenEventArgs|Triggers when the command menu is opened.| -|[close](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.CommandMenuSettings.html#Syncfusion_EJ2_BlockEditor_CommandMenuSettings_Close)|CommandMenuCloseEventArgs|Triggers when the command menu is closed.| -|[queryFiltering](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.CommandMenuSettings.html#Syncfusion_EJ2_BlockEditor_CommandMenuSettings_QueryFiltering)|CommandQueryFilteringEventArgs|Triggers when the user types to filter the command menu items.| -|[itemClicked](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.CommandMenuSettings.html#Syncfusion_EJ2_BlockEditor_CommandMenuSettings_ItemClicked)|CommandItemClickedEventArgs|Triggers when the user clicks on a command menu item.| +|`filtering`|CommandFilteringEventArgs|Triggers when the user types to filter the command menu items.| +|`itemSelect`|CommandItemSelectEventArgs|Triggers when the user clicks on a command menu item.| Below example demonstrates the customization of the Slash Command menu. @@ -83,11 +82,9 @@ The following events are available in the Context menu. |Name|Args|Description| |---|---|---| -|[beforeOpen](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.ContextMenuSettings.html#Syncfusion_EJ2_BlockEditor_ContextMenuSettings_BeforeOpen)|ContextMenuBeforeOpenEventArgs|Triggers before the context menu opens.| -|[open](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.ContextMenuSettings.html#Syncfusion_EJ2_BlockEditor_ContextMenuSettings_Open)|ContextMenuOpenEventArgs|Triggers when the context menu is opened.| -|[beforeClose](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.ContextMenuSettings.html#Syncfusion_EJ2_BlockEditor_ContextMenuSettings_BeforeClose)|ContextMenuBeforeCloseEventArgs|Triggers before the context menu closes.| -|[close](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.ContextMenuSettings.html#Syncfusion_EJ2_BlockEditor_ContextMenuSettings_Close)|ContextMenuCloseEventArgs|Triggers when the context menu is closed.| -|[itemClick](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.ContextMenuSettings.html#Syncfusion_EJ2_BlockEditor_ContextMenuSettings_ItemClick)|ContextMenuItemClickEventArgs|Triggers when a context menu item is clicked.| +|`opening`|ContextMenuOpeningEventArgs|Triggers before the context menu opens.| +|`closing`|ContextMenuClosingEventArgs|Triggers before the context menu closes.| +|`itemSelect`|ContextMenuItemSelectEventArgs|Triggers when a context menu item is clicked.| Below example demonstrates the customization of the Context menu. @@ -129,9 +126,9 @@ The following events are available in the Block action menu. |Name|Args|Description| |---|---|---| -|[open](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockActionMenuSettings.html#Syncfusion_EJ2_BlockEditor_BlockActionMenuSettings_Open)|Block actionMenuOpenEventArgs|Triggers when the block action menu is opened.| -|[close](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockActionMenuSettings.html#Syncfusion_EJ2_BlockEditor_BlockActionMenuSettings_Close)|Block actionMenuCloseEventArgs|Triggers when the block action menu is closed.| -|[itemClick](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockActionMenuSettings.html#Syncfusion_EJ2_BlockEditor_BlockActionMenuSettings_ItemClick)|Block actionMenuItemClickEventArgs|Triggers when a block action menu item is clicked.| +|`opening`|BlockActionMenuOpeningEventArgs|Triggers when the block action menu is opened.| +|`closing`|BlockActionMenuClosingEventArgs|Triggers when the block action menu is closed.| +|`itemSelect`|BlockActionItemSelectEventArgs|Triggers when a block action menu item is clicked.| Below example demonstrates the customization of the Block action menu. @@ -174,9 +171,7 @@ The following events are available in the Inline Toolbar. |Name|Args|Description| |---|---|---| -|[open](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.InlineToolbarSettings.html#Syncfusion_EJ2_BlockEditor_InlineToolbarSettings_Open)|ToolbarOpenEventArgs|Triggers when the inline toolbar is opened.| -|[close](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.InlineToolbarSettings.html#Syncfusion_EJ2_BlockEditor_InlineToolbarSettings_Close)|ToolbarCloseEventArgs|Triggers when the inline toolbar is closed.| -|[itemClicked](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.InlineToolbarSettings.html#Syncfusion_EJ2_BlockEditor_InlineToolbarSettings_ItemClicked)|ToolbarItemClickedEventArgs|Triggers when the user clicks on an inline toolbar item.| +|`itemClick`|ToolbarItemClickEventArgs|Triggers when the user clicks on an inline toolbar item.| Below example demonstrates the customization of the Inline Toolbar. diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/events.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/events.md index 03cacdb301..2338eec373 100644 --- a/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/events.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/events.md @@ -3,7 +3,7 @@ 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. platform: ej2-asp-core-mvc -control: Block Editor +control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- @@ -30,18 +30,18 @@ The [created](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Block ``` -## ContentChanged +## BlockChanged -The [contentChanged](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_ContentChanged) event is triggered whenever the content within the editor is modified. This includes content additions, deletions, or any structural modifications to the document. +The `blockChanged` event is triggered whenever the editor blocks are changed. This includes block additions, deletions, or any structural modifications to the document. Its event handler receives details about the changes. ```cshtml
- +
@@ -66,78 +66,6 @@ The [selectionChanged](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion. ``` -## UndoRedoPerformed - -The [undoRedoPerformed](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_UndoRedoPerformed) event is triggered when an undo or redo operation is executed. This event provides information about the action performed and the state before and after the operation. - -```cshtml - -
- -
- - - -``` - -## BlockAdded - -The [blockAdded](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_BlockAdded) event is triggered when a new block is added to the editor. This includes blocks added through user interaction, paste operations, or programmatic insertion. - -```cshtml - -
- -
- - - -``` - -## BlockRemoved - -The [blockRemoved](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_BlockRemoved) lockRemoved` event is triggered when a block is removed from the editor. This can occur through user deletion, cut operations, or programmatic removal. - -```cshtml - -
- -
- - - -``` - -## BlockMoved - -The [blockMoved](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_BlockMoved) event is triggered when blocks are moved from one position to another within the editor. This includes drag-and-drop operations, through keyboard shortcuts or programmatic block reordering. - -```cshtml - -
- -
- - - -``` - ## BlockDragStart The [blockDragStart](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_BlockDragStart) event is triggered at the beginning of a block drag operation, providing information about the blocks being dragged and their initial position. @@ -157,14 +85,14 @@ The [blockDragStart](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ ``` -## BlockDrag +## BlockDragging -The [blockDrag](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_BlockDrag) event is triggered during a drag operation, providing information about the blocks being dragged and their current position. +The `blockDragging` event is triggered during a drag operation, providing information about the blocks being dragged and their current position. ```cshtml
- +
- -``` - -## BeforePaste +## BeforePasteCleanup -The [beforePaste](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.BlockEditor.BlockEditor.html#Syncfusion_EJ2_BlockEditor_BlockEditor_BeforePaste) event is triggered before content is pasted into the editor. This event allows you to modify or cancel the paste operation. +The `beforePasteCleanup` event is triggered before content is pasted into the editor. This event allows you to modify or cancel the paste operation. ```cshtml
- +
+ +``` \ No newline at end of file diff --git a/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/undo-redo.md b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/undo-redo.md index c78de6068c..da633441d7 100644 --- a/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/undo-redo.md +++ b/ej2-asp-core-mvc/block-editor/EJ2_ASP.NETCORE/undo-redo.md @@ -3,7 +3,7 @@ layout: post title: Undo redo in ##Platform_Name## Block Editor Control | Syncfusion description: Checkout and learn about undo redo with Syncfusion Essential ##Platform_Name## BlockEditor control, its elements, and more details. platform: ej2-asp-core-mvc -control: Block Editor +control: BlockEditor publishingplatform: ##Platform_Name## documentation: ug --- diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/appearance/appearance.cs b/ej2-asp-core-mvc/code-snippet/block-editor/appearance/appearance.cs index aa6bf69ad6..32a854c554 100644 --- a/ej2-asp-core-mvc/code-snippet/block-editor/appearance/appearance.cs +++ b/ej2-asp-core-mvc/code-snippet/block-editor/appearance/appearance.cs @@ -1,73 +1,79 @@ -using Syncfusion.EJ2.BlockEditor; +public List BlocksData { get; set; } = new List(); -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 Appearance() { - BlocksData.Add(new Block + BlocksData.Add(new BlockModel { - Id = "title-block", - Type = BlockType.Heading, - Props = new { level = 1 }, - Content = new List() + id = "title-block", + blockType = "Heading", + properties = new { level = 1 }, + content = new List() { new { - type = "Text", + contentType = "Text", content = "Appearance Configuration Demo" } } }); - BlocksData.Add(new Block + BlocksData.Add(new BlockModel { - Id = "intro-block", - Type = BlockType.Paragraph, - Content = new List() + id = "intro-block", + blockType = "Paragraph", + content = new List() { new { id = "paragraph1-content", - type = "Text", + contentType = "Text", content = "This demo showcases different appearance configurations including readonly mode and a custom CSS theme." } } }); - BlocksData.Add(new Block + BlocksData.Add(new BlockModel { - Id = "features-heading", - Type = BlockType.Heading, - Props = new { level = 2 }, - Content = new List() + id = "features-heading", + blockType = "Heading", + properties = new { level = 2 }, + content = new List() { new { - type = "Text", + contentType = "Text", content = "Configured Custom Theme" } } }); - BlocksData.Add(new Block + BlocksData.Add(new BlockModel { - Id = "theme-list-1", - Type = BlockType.BulletList, - Content = new List() + id = "theme-list-1", + blockType = "BulletList", + content = new List() { new { - type = "Text", + contentType = "Text", content = "Gradient background with modern styling" } } }); - BlocksData.Add(new Block + BlocksData.Add(new BlockModel { - Id = "readonly-info", - Type = BlockType.Paragraph, - Content = new List() + id = "readonly-info", + blockType = "Paragraph", + content = new List() { new { - type = "Text", + contentType = "Text", content = "Use the readonly toggle to switch between editable and read-only modes. In readonly mode, you can view content but cannot make changes." } } diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/appearance/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/appearance/tagHelper index 03eeed476a..566a938636 100644 --- a/ej2-asp-core-mvc/code-snippet/block-editor/appearance/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/block-editor/appearance/tagHelper @@ -1,14 +1,7 @@ @using Syncfusion.EJ2.BlockEditor
- - - @foreach (var block in ViewBag.BlocksData) - { - - } - - +

Appearance Configuration Demo

@@ -91,10 +84,10 @@ backdrop-filter: blur(10px); } - .custom-theme .e-block:hover { - transform: translateY(-2px); - transition: all 0.3s ease; - } + .custom-theme .e-block:hover { + transform: translateY(-2px); + transition: all 0.3s ease; + } .custom-theme .e-block-content { color: #2d3748; diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/callout-block/callout.cs b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/callout-block/callout.cs index a62b5152e6..495f363a0f 100644 --- a/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/callout-block/callout.cs +++ b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/callout-block/callout.cs @@ -1,22 +1,31 @@ using Syncfusion.EJ2.BlockEditor; -public List BlocksData { get; set; } = new List(); +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 List children { get; set; } +} public ActionResult Callout() { - BlocksData.Add(new Block() { - Type = BlockType.Callout, - Props= new { - Children = new List() + BlocksData.Add(new BlockModel() { + blockType = "Callout", + properties = new { + children = new List() { - new Block() + new BlockModel() { - Id = "callout-content-1", - Type = "Paragraph", - Content = new List(){ + id = "callout-content-1", + blockType = "Paragraph", + content = new List(){ new{ id = "callout-content-1", - type = "Text", + contentType = "Text", content = "Important information: This is a callout block used to highlight important content." } } diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/callout-block/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/callout-block/tagHelper index 60b28f3f4d..a1cba0eeb6 100644 --- a/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/callout-block/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/block-editor/blocks/blockTypes/callout-block/tagHelper @@ -1,14 +1,7 @@ @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/block-editor/editor-menus/block-action/blockAction.cs b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/block-action/blockAction.cs index 842f68df0e..3976608bf6 100644 --- a/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/block-action/blockAction.cs +++ b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/block-action/blockAction.cs @@ -1,31 +1,39 @@ using Syncfusion.EJ2.BlockEditor; -public List BlocksData { get; set; } = new List(); +public List BlocksData { get; set; } = new List(); public List BlockItems { get; set; } public BlockActionMenuSettings BlockActionMenuSettings { get; set; } +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 BlockAction() { - BlocksData.Add(new Block() { - Id = "title-block", - Type = BlockType.Heading, - Props = new { level = 1}, - Content = new List() + BlocksData.Add(new BlockModel() { + id = "title-block", + blockType = "Heading", + properties = new { level = 1}, + content = new List() { new { - type = "Text", + contentType = "Text", content = "Block Action Menu Demo" } } }); - BlocksData.Add(new Block() + BlocksData.Add(new BlockModel() { - Id = "intro-block", - Type = BlockType.Quote, - Content = new List() + id = "intro-block", + blockType = "Quote", + content = new List() { new { - type = "Text", + contentType = "Text", content = "Hover over any block and click the drag handle icon to see custom actions." } } diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/context-menu/contextMenu.cs b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/context-menu/contextMenu.cs index ef5adc20cc..2cfe674f08 100644 --- a/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/context-menu/contextMenu.cs +++ b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/context-menu/contextMenu.cs @@ -1,9 +1,17 @@ using Syncfusion.EJ2.BlockEditor; -public List BlocksData { get; set; } +public List BlocksData { get; set; } public List ContextMenuItems { get; set; } public ContextMenuSettings ContextMenuSettings { get; set; } +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 ContextMenu() { var Items1 = new List(){ @@ -61,27 +69,27 @@ public ActionResult ContextMenu() items = Items2 } }; - BlocksData = new List + BlocksData = new List { - new Block + new BlockModel { - Id = "title-block", - Type = BlockType.Heading, - Props = new { level = 1}, - Content = new List + id = "title-block", + blockType = "Heading", + properties = new { level = 1}, + content = new List { - new { type = "Text", content = "Context Menu Demo" } + new { contentType = "Text", content = "Context Menu Demo" } } }, - new Block + new BlockModel { - Id = "intro-block", - Type = BlockType.Quote, - Content = new List + id = "intro-block", + blockType = "Quote", + content = new List { new { - type = "Text", + contentType = "Text", content = "Right-click anywhere in this editor to open the custom context menu. Try different areas and blocks." } } diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/inline-toolbar/inlineToolbar.cs b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/inline-toolbar/inlineToolbar.cs index a0f5737dd0..a106a84007 100644 --- a/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/inline-toolbar/inlineToolbar.cs +++ b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/inline-toolbar/inlineToolbar.cs @@ -1,9 +1,17 @@ using Syncfusion.EJ2.BlockEditor; -public List BlocksData { get; set; } +public List BlocksData { get; set; } public List InlineToolbarItems { get; set; } public InlineToolbarSettings InlineToolbarSettings { get; set; } +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 InlineToolbar() { InlineToolbarItems = new List @@ -21,27 +29,27 @@ public ActionResult InlineToolbar() tooltip = "Highlight" } }; - BlocksData = new List + BlocksData = new List { - new Block + new BlockModel { - Id = "title-block", - Type = BlockType.Heading, - Props = new { level = 1}, - Content = new List + id = "title-block", + blockType = "Heading", + properties = new { level = 1}, + content = new List { - new { type = "Text", content = "Inline Toolbar Demo" } + new { contentType = "Text", content = "Inline Toolbar Demo" } } }, - new Block + new BlockModel { - Id = "intro-block", - Type = BlockType.Quote, - Content = new List + id = "intro-block", + blockType = "Quote", + content = new List { new { - type = "Text", + contentType = "Text", content = "Select any text in the editor to open the Inline Toolbar" } } diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/slash-command/razor b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/slash-command/razor index e30d0bf822..eb63c325b6 100644 --- a/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/slash-command/razor +++ b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/slash-command/razor @@ -18,20 +18,12 @@ diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/slash-command/slashCommand.cs b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/slash-command/slashCommand.cs index 79b9eaabe8..69a3eb6ec6 100644 --- a/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/slash-command/slashCommand.cs +++ b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/slash-command/slashCommand.cs @@ -1,9 +1,17 @@ using Syncfusion.EJ2.BlockEditor; -public List BlocksData { get; set; } +public List BlocksData { get; set; } public List CommandMenuItems { get; set; } public CommandMenuSettings CommandMenuSettings { get; set; } +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 SlashCommand() { CommandMenuItems = new List @@ -24,15 +32,15 @@ public ActionResult SlashCommand() iconCss = "e-icons e-schedule", } }; - BlocksData = new List + BlocksData = new List { - new Block + new BlockModel { - Id = "Paragraph", - Type = BlockType.Paragraph, - Content = new List + id = "Paragraph", + blockType = "Paragraph", + content = new List { - new { type = "Text", content = "Type \"/\" anywhere in this editor to open the custom slash command menu." } + new { contentType = "Text", content = "Type \"/\" anywhere in this editor to open the custom slash command menu." } } } }; @@ -41,10 +49,8 @@ public ActionResult SlashCommand() EnableTooltip = false, PopupWidth = "350px", PopupHeight = "400px", - Open = "open", - Close = "close", - ItemClicked = "itemClicked", - QueryFiltering = "queryFiltering", + ItemSelect = "itemSelect", + Filtering = "filtering", Commands = CommandMenuItems }; ViewData["CommandMenuItems"] = CommandMenuItems; diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/slash-command/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/slash-command/tagHelper index d13092c96d..5515138e51 100644 --- a/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/slash-command/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/block-editor/editor-menus/slash-command/tagHelper @@ -8,7 +8,7 @@ } - +

Slash Command Menu Configuration Demo

@@ -74,19 +74,11 @@ diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/getting-started/gettingstarted.cs b/ej2-asp-core-mvc/code-snippet/block-editor/getting-started/gettingstarted.cs index 2779a246e7..cc6993f779 100644 --- a/ej2-asp-core-mvc/code-snippet/block-editor/getting-started/gettingstarted.cs +++ b/ej2-asp-core-mvc/code-snippet/block-editor/getting-started/gettingstarted.cs @@ -1,4 +1,5 @@ + public ActionResult Index() - { - return View(); - } \ No newline at end of file +{ + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/globalization/locale/locale.cs b/ej2-asp-core-mvc/code-snippet/block-editor/globalization/locale/locale.cs index ef09ec6a8e..4201a9dcc3 100644 --- a/ej2-asp-core-mvc/code-snippet/block-editor/globalization/locale/locale.cs +++ b/ej2-asp-core-mvc/code-snippet/block-editor/globalization/locale/locale.cs @@ -1,36 +1,44 @@ using Syncfusion.EJ2.BlockEditor; -public List BlocksData { get; set; } = new List(); +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 Locale() { - BlocksData.Add(new Block() { - Id = "block-1", - Type = BlockType.Heading, - Props = new { level = 1}, - Content = new List() + BlocksData.Add(new BlockModel() { + id = "block-1", + blockType = "Heading", + properties = new { level = 1}, + content = new List() { new{ - type = "Text", + contentType = "Text", content = "Sample Heading" } } }); - BlocksData.Add(new Block() { - Id = "block-2", - Type = BlockType.Paragraph, - Content = new List() + BlocksData.Add(new BlockModel() { + id = "block-2", + blockType = "Paragraph", + content = new List() { new { - type = "Text", + contentType = "Text", content = "This is a sample paragraph block." } } }); - BlocksData.Add(new Block() + BlocksData.Add(new BlockModel() { - Id = "block-3", - Type = BlockType.Paragraph + id = "block-3", + blockType = "Paragraph" }); ViewBag.BlocksData = BlocksData; return View(); diff --git a/ej2-asp-core-mvc/code-snippet/block-editor/globalization/locale/tagHelper b/ej2-asp-core-mvc/code-snippet/block-editor/globalization/locale/tagHelper index 0809ecf451..82bf7178fe 100644 --- a/ej2-asp-core-mvc/code-snippet/block-editor/globalization/locale/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/block-editor/globalization/locale/tagHelper @@ -1,14 +1,7 @@ @using Syncfusion.EJ2.BlockEditor
- - - @foreach (var block in ViewBag.BlocksData) - { - - } - - +