Blazored / TextEditor

Rich text editor for Blazor applications - Uses Quill JS
MIT License
276 stars 58 forks source link

Cannot resize images when inserting image from url #40

Closed ClumsyPenguin closed 3 years ago

ClumsyPenguin commented 3 years ago

When clicking to upload an image to a folder in the project and retrieving. I can't resize the image...

<RichTextEditor @ref="@QuillHtml">
    <ToolbarContent>
        <select class="ql-header">
            <option selected=""></option>
            <option value="1"></option>
            <option value="2"></option>
            <option value="3"></option>
            <option value="4"></option>
            <option value="5"></option>
        </select>
        <span class="ql-formats">
            <button class="ql-bold"></button>
            <button class="ql-italic"></button>
            <button class="ql-underline"></button>
            <button class="ql-strike"></button>
        </span>
        <span class="ql-formats">
            <select class="ql-color"></select>
            <select class="ql-background"></select>
        </span>
        <span class="ql-formats">
            <button class="ql-list" value="ordered"></button>
            <button class="ql-list" value="bullet"></button>
        </span>
        <span class="ql-formats">
            <button class="ql-link"></button>
        </span>
    </ToolbarContent>
    <EditorContent>
    </EditorContent>
</RichTextEditor>

<button class="btn btn-primary"
        @onclick="GetHTML">
    Get HTML
</button>
<button class="btn btn-primary"
        @onclick="SetHTML">
    Set HTML
</button>

<br>
@QuillHTMLContent
<br>

<InputFile id="fileElem" OnChange="(e) => UploadFiles(e)"></InputFile>
private async void UploadFiles(InputFileChangeEventArgs e)
    {
        var fileName = Path.GetFileName(e.File.Name);
        var filePath = @"****\wwwroot\uploads\" + fileName;
        var file = e.File;
        try
        {
            await using FileStream fs = new(filePath, FileMode.Create);
            file = await file.RequestImageFileAsync("image/png", 500, 500);
            await file.OpenReadStream().CopyToAsync(fs);
            InsertImage(fileName);
        }
        catch (Exception ex)
        {
            //snackbar with error
        }

    }

    public async void InsertImage(string fileName)
    {
        await this.QuillHtml.InsertImage(nav.BaseUri + "uploads/" + fileName);
        StateHasChanged();
    }

image