Request: Add OnChange event.

[danm36]

Would it be possible to add an onchange event similar to the existing Blazor onchange implementation (Triggered on input defocus)? This would make updating models significantly easier than at the moment. I understand that the event wouldn't be able to pass any parameters, given the number of formats, but just a signal to say "now you can fetch formats from the control" will be a massive help. This would also allow us to flag the page for unsaved changes and the like.

[ADefWebserver]

We are dependent on the underlying quill.js library and its events are not clear. For example a pre-populated textbox will also fire as 'dirty' (see: https://stackoverflow.com/questions/50107174/quill-js-check-if-text-change-on-form-submit). Trying to do too much, when you really don't have 'control' over the situation (because 99% of the work is handled in a JavaScript library we don't have control of) is to be avoided. So we just handle the minimum features.

[danm36]

Ah, fair enough. I'll dive into the Quill library to see if I can hack together something for my particular use case. Thanks!

[ghosttie]

Could someone give me a pointer to how I would subscribe to quill's text-change JS event in Blazor? I've only just started learning Blazor and I can't even figure out how I would get a reference to the JS quill object that BlazoredTextEditor wraps...

[ADefWebserver]

@ghosttie The place where the component interacts with Quill is in this file: https://github.com/Blazored/TextEditor/blob/main/src/Blazored.TextEditor/wwwroot/Blazored-BlazorQuill.js

Anything more specific, you will want to ask on the Quill site.

Thanks

[ghosttie]

How likely are you to accept PRs for this?

[ADefWebserver]

@ghosttie My number one concern is to have this Blazor control remain stable. Any tighter interaction with the Quill JavaScript will risk that stability and severely affect performance. So it is best that you just fork the project, Thanks!

[borosbence]

For anyone who meet with this problem:

1. Create a child component like RichTextEditorComponent.razor.

@using Blazored.TextEditor

<BlazoredTextEditor @ref="@quill">
    <EditorContent>
        @((MarkupString?)RichText)
    </EditorContent>
</BlazoredTextEditor>

@code {
    [Parameter]
    public string? RichText { get; set; }
    public BlazoredTextEditor quill = new();
}

2. Put the child component in the parent's with reference.

   <RichTextEditorComponent RichText="@comment" @ref="@RTeditor" />

3. Create a function in the parent component to get the component's HTML value.

   @code {
   private string? comment;
   private RichTextEditorComponent RTeditor = new();
   // Call on a form submit or another event
   private async void UpdateComment()
   {
       // Gets the HTML value from the Blazored.TextEditor
       comment = await RTeditor.quill.GetHTML();
   }
   }

   Voilà!