Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
AntonQUT opened this issue Jan 13, 2021 · 10 comments

Comments

@AntonQUT
Copy link

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
Copy link
Collaborator

ADefWebserver commented Jan 13, 2021

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
Copy link
Author

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

@srosy
Copy link

srosy commented Feb 13, 2021

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

@Jrmay1
Copy link

Jrmay1 commented May 1, 2021

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:
image

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

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
Copy link
Collaborator

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
Copy link

Jrmay1 commented May 1, 2021

That makes sense. Thank you for your swift response!

@DaNeubi
Copy link

DaNeubi commented Jun 23, 2022

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
Copy link
Collaborator

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

@iram2390
Copy link

iram2390 commented Jun 9, 2024

@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
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants