Retrieve the document and bookmark content in Blazor Document Editor

1 Oct 20255 minutes to read

How to retrieve the whole document and bookmark content as text in Blazor Document Editor

The Blazor Document Editor component allows retrieving bookmark or whole document content as plain text and SFDT (rich text).

Get the bookmark content as plain text

Use the SelectBookmarkAsync API to navigate to the bookmark and use GetTextAsync API to get the bookmark content as plain text from Blazor Document Editor component.

The following example code illustrates how to get the bookmark content as plain text.

@using Syncfusion.Blazor.DocumentEditor

<SfDocumentEditorContainer @ref="container" EnableToolbar=true>
    <DocumentEditorContainerEvents Created="OnCreated"></DocumentEditorContainerEvents>
</SfDocumentEditorContainer>

@code {
    SfDocumentEditorContainer container;

    public async void OnCreated(object args)
    {
        // To insert text in cursor position
        await container.DocumentEditor.Editor.InsertTextAsync("Document editor");
        // To select all the content in document
        await container.DocumentEditor.Selection.SelectAllAsync();
        // Insert bookmark to selected content
        await container.DocumentEditor.Editor.InsertBookmarkAsync("Bookmark1");
        // Provide your bookmark name to navigate to specific bookmark
        await container.DocumentEditor.Selection.SelectBookmarkAsync("Bookmark1");
        // To get the selected content as text
        string selectedContent =await container.DocumentEditor.Selection.GetTextAsync();
    }
}

To get the bookmark content as SFDT (rich text), check this link.

Get the whole document content as text

The GetTextAsync API can be used to get the whole document content as plain text from Blazor Document Editor component.

The following example code illustrates how to get the whole document content as plain text.

@using Syncfusion.Blazor.DocumentEditor

<SfDocumentEditorContainer @ref="container" EnableToolbar=true>
    <DocumentEditorContainerEvents Created="OnCreated"></DocumentEditorContainerEvents>
</SfDocumentEditorContainer>

@code {
    SfDocumentEditorContainer container;

    public async void OnCreated(object args)
    {
        // To insert text in cursor position
        await container.DocumentEditor.Editor.InsertTextAsync("Document editor");
        // To select all the content in document
        await container.DocumentEditor.Selection.SelectAllAsync();
        // To get the selected content as text
        string selectedContent = await container.DocumentEditor.Selection.GetTextAsync();
    }
}

Get the whole document content as SFDT(rich text)

The SerializeAsync API is used to get the whole document content as an SFDT string from Blazor Document Editor component.

The following example code illustrates how to get the whole document content as SFDT.

@using Syncfusion.Blazor.DocumentEditor

<SfDocumentEditorContainer @ref="container" EnableToolbar=true>
    <DocumentEditorContainerEvents Created="OnCreated"></DocumentEditorContainerEvents>
</SfDocumentEditorContainer>

@code {
    SfDocumentEditorContainer container;

    public async void OnCreated(object args)
    {
        // To insert text in cursor position
        await container.DocumentEditor.Editor.InsertTextAsync("Document editor");
        // To get the content as SFDT
        string selectedContent = await container.DocumentEditor.SerializeAsync();
    }
}

Get the header content as text

Use the GoToHeaderAsync API to navigate the selection to the header and then use the GetTextAsync API to get the content as plain text.

The following example code illustrates how to get the header content as plain text.

@using Syncfusion.Blazor.DocumentEditor

<SfDocumentEditorContainer @ref="container" EnableToolbar=true>
    <DocumentEditorContainerEvents Created="OnCreated"></DocumentEditorContainerEvents>
</SfDocumentEditorContainer>

@code {
    SfDocumentEditorContainer container;

    public async void OnCreated(object args)
    {
        await container.DocumentEditor.Selection.GoToHeaderAsync();
        // To insert text in cursor position
        await container.DocumentEditor.Editor.InsertTextAsync("Document editor");
        // To select all the content in header
        await container.DocumentEditor.Selection.SelectAllAsync();
        // To get the selected content as text
        string selectedContent = await container.DocumentEditor.Selection.GetTextAsync();
    }
}

Similarly, the GoToFooterAsync API can be used to navigate the selection to the footer, followed by the GetTextAsync API to get the content as plain text.