0

I'm using https://quilljs.com/ text editor for my project on Blazor Server App. I need this for article page.

enter image description here

For now, I can save the text (in the content) into SQl database and the text also can be read from database when I opened on specific article Id.

But now how can I save images that has been inserted in the text editor (in the content) in SQL database or server folder directory?? Multiple images should be stored in this content page and also the database. Anyone here familiar with Blazor?? I've been stuck on this matter for days to solve this issue.

I also have been trying using InputFile component to add multiple upload function, but still the image cannot be save properly in project folder directory.

Update: Below is my code on how to capture the text into Sql database.

    private MarkupString preview;

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (!firstRender) return;
        bool loading = true;
        while (loading)
        {
            try
            {
                if (!string.IsNullOrEmpty(monthlySharing.Content))
                {
                    await QuillHtml.LoadHTMLContent(monthlySharing.Content);

                }
                loading = false;
            }
            catch
            {
                await Task.Delay(10);
                loading = true;
            }
        } 
    }

private async Task Save()
    {
        message = "wait...";
        monthlySharing.Content = await QuillHtml.GetText();

        if (monthlySharingService.AddUpdate(monthlySharing))
        {

            message = "Your post is successfully created! ";
            monthlySharing = new(); 
        }
        else
        {
            message = "Could not saved";
        }

    }
```
Improve this question

1 Answer 1

Reset to default
0

The below provided might not be an idle solution to your question but a dirty way to get the images from the quill editor. In the past, I faced a similar problem with the quill editor, for which I came up with a workaround.

Dependencies: HtmlAgilityPack

Summary: Use quill.root.innerHTML to get the raw HTML content. Once fetched, pass the content to a helper method to load the HTML document and look for the IMG tag. Read the src property and extract the base64 string. Once done, either you can create a Memory Stream and save it physically on the disk/blob storage and keep the URL in your SQL DB or keep the base64 itself in the database.

HtmlDocument document = new HtmlDocument();

// Load the raw content into the HTMLDocument
document.LoadHtml(rawContent);

// Get all descendant nodes particularly an img
document.DocumentNode.Descendants("img")
                    .Where(e =>
                    {
                        //  
                        var src = e.GetAttributeValue("src", null) ?? "";
                        return !string.IsNullOrEmpty(src) && src.StartsWith("data:image");
                    })
                    .ToList()
                    .ForEach(x =>
                    {
                        var source = x.GetAttributeValue("src", null);

                        /* Do whatever you want to do with the image */
                    });

If possible, please share a code snippet of how Quill editor is used in your application.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I've shared my code above.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.