Class ContentModel

Represents a content model within a block in the SfBlockEditor component.

Inheritance

object

ContentModel

Inherited Members

object.Equals(object)

object.Equals(object, object)

object.GetHashCode()

object.GetType()

object.MemberwiseClone()

object.ReferenceEquals(object, object)

object.ToString()

Namespace: Syncfusion.Blazor.BlockEditor

Assembly: Syncfusion.Blazor.dll

Syntax

public class ContentModel

Remarks

This model defines individual content items such as text, images, etc., within a block.

Content can have type-specific properties and styles.

Constructors

ContentModel()

Declaration

public ContentModel()

Properties

Content

Gets or sets the actual data of the content element, typically text content.

Declaration

[JsonInclude]
public string Content { get; set; }

Property Value

Type	Description
string	A string representing user-entered or programmatically defined content. The default value is "" (empty string).

Remarks

This is the main body of what appears in a content item inside the block.

The content may include plain text or formatted text depending on the editor configuration.

For large content, consider performance implications when frequently updating this property.

ContentType

Gets or sets the type of the content in the SfBlockEditor.

Declaration

[JsonInclude]
[JsonConverter(typeof(JsonStringEnumConverter))]
public ContentType ContentType { get; set; }

Property Value

Type	Description
ContentType	A ContentType value that represents the kind of content being rendered. The default is Text.

Remarks

This property defines how a content item should be interpreted and displayed. Supported values include:

• Text – For plain or rich text content.

Examples

<BlockContent ContentType="ContentType.InlineCode" />

ID

Gets or sets the unique identifier for this content element.

Declaration

[JsonInclude]
public string ID { get; set; }

Property Value

Type	Description
string	A string representing a unique identifier for the content element. The default value is "" (empty string).

Remarks

Used to reference or modify specific content items inside a block.

When not explicitly set, a unique 10-character string is automatically generated upon element creation.

This identifier remains consistent throughout the content element's lifecycle and can be used for selection, targeting with JavaScript, or associating data.

Properties

Gets or sets the content type-specific settings for a content item within a block.

Declaration

[JsonInclude]
[JsonConverter(typeof(ContentPropsJsonConverter))]
public ContentSettings Properties { get; set; }

Property Value

Type	Description
ContentSettings	An ContentSettings instance that contains settings specific to the current ContentModel type. The default value is null.

Remarks

When Properties is null, it may be initialized based on the value of the ContentType property. During serialization and deserialization, the Syncfusion.Blazor.BlockEditor.Internal.ContentPropsJsonConverter can instantiate the appropriate concrete implementation of ContentSettings corresponding to the ContentType.

Assign a settings implementation that matches the content type. For example, use TextContentSettings for Text when applying text styles via StyleModel (e.g., Bold, Italic, BackgroundColor). If the content type changes, update Properties to avoid mismatches.

Performance note: Polymorphic serialization can add overhead. Reuse settings objects when applying the same styles to many content items, and avoid unnecessary allocations in large documents. This property is not thread-safe; synchronize access if shared across threads.

Examples

Demonstrates assigning content settings for text content items, including styled spans, matching the sample data used in the block editor overview.

// Simple paragraph content without extra settings (Properties remains null)
var intro = new ContentModel
{
    ID = "intro-content",
    ContentType = ContentType.Text,
    Content = "Block Editor is a powerful rich text editor..."
    Properties = new TextContentSettings
    {
        Styles = new StyleModel { Bold = true }
    }
};

// Styled text: bold + italic
var styled1 = new ContentModel
{
    ID = "styled-text-2",
    ContentType = ContentType.Text,
    Content = "formatting options",
    Properties = new TextContentSettings
    {
        Styles = new StyleModel { Bold = true, Italic = true }
    }
};

// Styled text: bold with background color
var styled2 = new ContentModel
{
    ID = "styled-text-4",
    ContentType = ContentType.Text,
    Content = "\"/\"",
    Properties = new TextContentSettings
    {
        Styles = new StyleModel { Bold = true, BackgroundColor = "#999999" }
    }
};