You can't load the text editor within the OnInitialized event. Is there another way?

[AntonQUT]

I want to load the editor when the form starts up, with existing content that has been saved in a database. Currently I can't see any way of doing this as the only way to load the editor is by using an async method - which is not permitted in the onInitialized event. There are also no events on the editor itself (i.e. onloaded).

Other than clicking a button to load the editor, I can't see any other way of loading the editor?

If you can help - would be much obliged as this must be common request.

Anton

[ADefWebserver]

Please see the example here: https://github.com/Blazored/TextEditor/blob/main/samples/BlazorServerSide/Pages/Index.razor

It has code like this:

<BlazoredTextEditor @ref="@QuillReadOnly"
                    ReadOnly="true"
                    Theme="bubble"
                    DebugLevel="log">   
    <EditorContent>
        @((MarkupString)@QuillReadOnlyContent)
    </EditorContent>
</BlazoredTextEditor>
@code {
    BlazoredTextEditor QuillReadOnly;

    string QuillReadOnlyContent = 
        @"<span><b>This is the default /b> <u>Content</u> that shows on load.</span>";
}

Basically you load content from the database and store it in the @QuillReadOnlyContent variable and it shows up when the user first loads the page.

The .LoadContent call should only be used when triggered by a user action.

You can see how I implement that in Blazor Blogs: https://github.com/ADefWebserver/Blazor-Blogs/blob/main/BlazorBlogsLibrary/Pages/BlogAdministration.razor

[AntonQUT]

Really appreciate the swift response. I'll try that now and let you know how it goes. Thanks again.

[srosy]

Thanks for posting this, I had the same question and the suggested solution works great.

[Jrmay1]

Hi there,

I can see how this solution would work with HTML formatting, but what is the knack for the QuillNative formatting?

When I extract and save the quillNative string for the following:

And then refresh and reload the string, it displays the full string (with the formatting that should be hidden):

This is my EditorContent in html:

<EditorContent>
    @((MarkupString)@TestString);
<\EditorContent>

I know that MarkupString is used to indicate html markup, but is there a QuillNative Equivalent?

[ADefWebserver]

I know that MarkupString is used to indicate html markup, but is there a QuillNative Equivalent?

No there is not. QuillNative uses the "Delta" format, that is what you are seeing. To use it, you have to call special JavaScript methods.

That is why the Blazored Text Editor does not try to do interactive binding.

[Jrmay1]

That makes sense. Thank you for your swift response!

[DaNeubi]

I just wanted to share my way. It's maybe not the cleanest one, but it works for me. The Delay can be adjusted, I'm using this one, for a fake like loading screen.

The component gets the NewsBoard as a parameter

    [Parameter]
    public NewsBoard? NewsBoard { get; set; }

And here the editor declaration for completion.

private BlazoredTextEditor _quillEditor = new BlazoredTextEditor();

I'm calling a async method in the OnParametersSetAsync method.

protected override Task OnParametersSetAsync()
    {
        LoadHtml();

        return base.OnParametersSetAsync();
    }

And this is the method that loads the HTML into the TextEditor.

    private async Task LoadHtml()
    {
        await Task.Delay(1200);
        await _quillEditor.LoadHTMLContent(NewsBoard?.Content);
        StateHasChanged();
    }

[ADefWebserver]

@DaNeubi - I am curious, does setting <EditorContent> not work for you?

[iram2390]

@DaNeubi - I am curious, does setting <EditorContent> not work for you?

For me it wasn't working because it wasn't creating an instance of an object. It took me a day to figure out what was going on, when it was clear that the console was showing the error.

But works without problems.

PS: Always watch the console, it can save you a lot of time.

[ADefWebserver]

@DaNeubi - Thank you for following up. That will help others.