You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: blazor/blockeditor/built-in-blocks/inline-content.md
+18-20Lines changed: 18 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,15 +3,15 @@ layout: post
3
3
title: Inline content in Blazor Block Editor Component | Syncfusion
4
4
description: Checkout and learn about Inline content in Syncfusion Blazor Block Editor component and more.
5
5
platform: Blazor
6
-
control: Block Editor
6
+
control: BlockEditor
7
7
documentation: ug
8
8
---
9
9
10
10
# Inline Content in Blazor Block Editor component
11
11
12
-
In the Syncfusion Block Editor, all content is organized within blocks. Each block contains a `Content` property, which is an array of inline elements that define the text and functionality within that block.
12
+
In the Syncfusion Block Editor, all content is organized within blocks. Each block contains a `Content` property, which is a list of `ContentModel`that defines the text and functionality within that block.
13
13
14
-
Each inline element in the `Content` array is an object with properties such as `ID`, `ContentType`, `Content`, and `Styles`, allowing for granular control over its appearance and behavior.
14
+
Each `ContentModel`is an object with properties such as `ID`, `ContentType`, `Content`, and `Properties`, allowing for granular control over its appearance and behavior.
15
15
16
16
## Setting content type
17
17
@@ -30,7 +30,7 @@ By default, the content type is set to `Text`.
30
30
31
31
To configure text content, set the `ContentType` property to `Text`. This is the default content type if none is specified.
32
32
33
-
### Type
33
+
### ContentType
34
34
35
35
```cshtml
36
36
// Adding inline text
@@ -43,19 +43,17 @@ To configure text content, set the `ContentType` property to `Text`. This is the
43
43
44
44
## Configure hyperlink
45
45
46
-
To create a hyperlink, set the `ContentType` property to `Link`. You can configure the link's URL and target using the `Properties` property.
46
+
To create a hyperlink, set the `ContentType` property to `Link`. You can configure the link's URL using the `Properties` property.
47
47
48
48
### Configure link properties
49
49
50
-
Link settings control the behavior and properties of hyperlinks in your content. You can configure link settings using the link `Properties` property.
51
-
52
-
Link settings are configured through the `Properties` property, which accepts the following options:
50
+
Link settings control the behavior and properties of hyperlinks in your content. You can configure link settings using the `Properties` property which accepts the following options:
53
51
54
52
| Property | Description | Default Value |
55
53
|----------|-------------|---------------|
56
54
| Url | Specifies the destination URL of the link. |`''`|
57
55
58
-
### Type & Props
56
+
### ContentType and Properties
59
57
60
58
```cshtml
61
59
new BlockModel
@@ -65,7 +63,7 @@ Link settings are configured through the `Properties` property, which accepts th
65
63
}
66
64
```
67
65
68
-
## Configure Label
66
+
## Configure label
69
67
70
68
To render labels, set the `ContentType` property to `Label`. Specify the `LabelID` of the particular label in `Properties` to render a label.
71
69
@@ -78,9 +76,9 @@ The Block Editor comes with different built-in label items. These includes:
78
76
79
77
### Customize label
80
78
81
-
You can customize the labels by using the `Properties` property along with contentType`Label`.
79
+
You can customize the labels by using the `Properties` property along with `ContentType` as`Label`.
82
80
83
-
### Type & Props
81
+
### ContentType and Properties
84
82
85
83
```cshtml
86
84
// Adding inline label
@@ -101,31 +99,31 @@ Use the `TriggerChar` property to define the character that opens the label sugg
101
99
102
100
Define the available labels using the `Items` array. When a user types the trigger character, a popup will show matching items.
103
101
104
-
Each item in the [Items] array supports the following properties:
|`GroupBy`| The category name for grouping similar labels. |
111
109
|`LabelColor`| The background color of the label. |
112
110
|`IconCss`| A CSS class for an icon to display with the label. |
113
111
114
112
115
-
When users type the trigger character followed by text, a popup will appear showing matching label items from which they can select. The selected label will be inserted into the content as a Label content item.
113
+
When users type the trigger character, a popup will appear showing matching label items from which they can select. The selected label will be inserted into the content as a Label content item.
116
114
117
115
### Using labels with group headers
118
116
119
117
Labels with the same `GroupBy` value will be grouped together in the label selection popup:
120
118
121
-
The below sample demonstrates the customization of labels in the Block Editor.
122
-
123
119
## Configure mention
124
120
125
121
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`. Specify the `UserID` of particular user in `Properties` to render a mention.
126
122
127
123
Mentions are typically triggered by the `@` character and are linked to the `Users` collection defined in the Block Editor.
128
124
125
+
The below sample demonstrates the usage of Mention and Label types in the Block Editor.
126
+
129
127
```cshtml
130
128
131
129
@using Syncfusion.Blazor.BlockEditor
@@ -150,7 +148,7 @@ Mentions are typically triggered by the `@` character and are linked to the `Use
150
148
new BlockModel
151
149
{
152
150
BlockType = BlockType.Paragraph,
153
-
Content =[
151
+
Content =[
154
152
new ContentModel{ContentType = ContentType.Text, Content = "The Block Editor supports various content types: "},
155
153
new ContentModel{ContentType = ContentType.Link, Content = "hyperlinks", Properties = new LinkContentSettings { Url = "https://ej2.syncfusion.com/documentation/"} },
156
154
new ContentModel{ContentType = ContentType.Text, Content = ", inline "},
@@ -184,7 +182,7 @@ The `Styles` property supports the following options:
184
182
|`Subscript`| Renders the text as subscript. |`false`|
185
183
|`Uppercase`| Converts the text to uppercase. |`false`|
186
184
|`Lowercase`| Converts the text to lowercase. |`false`|
187
-
|`InlineCode`| Converts the text to inline code. |`false`|
185
+
|`InlineCode`| Converts the text to inline code. |`false`|
188
186
189
187
You can apply one or more of these styles to any supported content element for rich text formatting.
Copy file name to clipboardExpand all lines: blazor/blockeditor/built-in-blocks/typography.md
+11-11Lines changed: 11 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,7 @@ layout: post
3
3
title: Typography Blocks in Blazor Block Editor Component | Syncfusion
4
4
description: Checkout and learn about Typography Blocks in Syncfusion Blazor Block Editor component and more.
5
5
platform: Blazor
6
-
control: Block Editor
6
+
control: BlockEditor
7
7
documentation: ug
8
8
---
9
9
@@ -15,7 +15,7 @@ Typography blocks are essential for organizing and presenting text-based content
15
15
16
16
Paragraph blocks are the most common type, used for standard text content. They serve as the default block type and provide basic text formatting options. To render a Paragraph block, set the `BlockType` property to `Paragraph`.
17
17
18
-
### Type
18
+
### BlockType
19
19
20
20
```cshtml
21
21
// Adding paragraph block
@@ -50,9 +50,9 @@ The below sample demonstrates the configuration of paragraph block in the Block
50
50
51
51
### Configure placeholder
52
52
53
-
You can configure placeholder text for block using the `placeholder` property. This text appears when the block is empty. The default placeholder for the paragraph block is `Write something or ‘/’ for commands.`.
53
+
You can configure placeholder text for block using the `Placeholder` property. This text appears when the block is empty. The default placeholder for the paragraph block is `Write something or ‘/’ for commands.`.
54
54
55
-
### Type & Props
55
+
### BlockType and Properties
56
56
57
57
```cshtml
58
58
// Adding placeholder
@@ -97,7 +97,7 @@ Heading blocks create document titles and section headers. These blocks help str
97
97
98
98
Set the heading level using the `Level` property, with `1` being the highest level (title) and `4` being the lowest (subsection).
99
99
100
-
### Type & Props
100
+
### BlockType and Properties
101
101
102
102
```cshtml
103
103
//Adding Heading block
@@ -150,7 +150,7 @@ The following sample demonstrates the configuration of a heading block in the Bl
150
150
151
151
### Configure placeholder
152
152
153
-
You can configure placeholder text for block using the `Paceholder` property. This text appears when the block is empty. The default placeholder for heading block is `Heading{levels}`.
153
+
You can configure placeholder text for block using the `Placeholder` property. This text appears when the block is empty. The default placeholder for heading block is `Heading{level}`.
154
154
155
155
```cshtml
156
156
//Adding Placeholder value to blocktype
@@ -179,7 +179,7 @@ Child blocks can be configured with all the same properties as top-level blocks.
179
179
180
180
You can control whether a block is expanded or collapsed using the `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.
181
181
182
-
### Type & Props
182
+
### BlockType and Properties
183
183
184
184
```cshtml
185
185
//Configure collapsibleHeading block
@@ -238,7 +238,7 @@ This example shows how to configure `CollapsibleHeading` and `CollapsibleParagra
238
238
239
239
### Configure placeholder
240
240
241
-
You can configure placeholder text for block using the `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.
241
+
You can configure placeholder text for block using the `Placeholder` 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.
242
242
243
243
```cshtml
244
244
// Adding placeholder value to collapsible heading
@@ -261,7 +261,7 @@ A Divider block inserts a horizontal line to separate content. Render it by sett
261
261
262
262
This sample shows how to place a divider between two blocks.
@@ -291,7 +291,7 @@ This sample shows how to place a divider between two blocks.
291
291
292
292
## Configure quote block
293
293
294
-
Quote blocks are styled for displaying quotations or excerpts. Render a Quote block by setting the [BlockType] to `Quote`.
294
+
Quote blocks are styled for displaying quotations or excerpts. Render a Quote block by setting the `BlockType` to `Quote`.
295
295
296
296
The following sample shows how to configure a quote block.
297
297
@@ -370,7 +370,7 @@ Child blocks can be configured with all the same properties as top-level blocks.
370
370
371
371
### Configure parent id
372
372
373
-
The Block Editor supports hierarchical content through the `Children` property, which is available for `Callout` and `Collapsible` blocks. To establish a clear parent-child relationship, the `ParentId` of each child block must match the `ID` of its parent.
373
+
The Block Editor supports hierarchical content through the `Children` property, which is available for `Callout` and `Collapsible` blocks. To establish a clear parent-child relationship, the `ParentID` of each child block must match the `ID` of its parent block.
374
374
375
375
This structure is essential for maintaining nested relationships within the editor. The following sample demonstrates how to create a nested hierarchy.
description: Check out and learn here about the documentation for getting started with Blazor Block Editor Component in Blazor WASM App. Explore here to more details.
4
+
description: Checkout and learn about the documentation for getting started with Blazor Block Editor Component in Blazor WASM App. Explore here to more details.
Copy file name to clipboardExpand all lines: blazor/blockeditor/getting-started-web-app.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,9 +1,9 @@
1
1
---
2
2
layout: post
3
-
title: Getting Started with Syncfusion Block Editor Component | Blazor Web App
4
-
description: Check out and learn here about the documentation for getting started with Blazor Block Editor Component in Blazor Web App. Explore here to more details.
3
+
title: Getting Started | Syncfusion Block Editor Component | Blazor Web App
4
+
description: Checkout and learn about the documentation for getting started with Blazor Block Editor Component in Blazor Web App. Explore here to more details.
0 commit comments