How to access and modify the underlying Quill object in the RichTextEdit - i.e. set focus, blur, unshift key bindings

[swaipa]

Hi

I would like to now how to get the Quill instance behind RichTextEdit, so that I can use .blur() when using the "tab" to comply with accessibility standards?

Devexpress has a work around for their Quill editor - but I can't seem to figure out how to get the Quill instance from your editor.

onContentReady() {  
    this.editor.instance.getQuillInstance().keyboard.bindings[9].unshift({  
       key: 9,  
       handler: function(range) {  
          this.quill.blur();  
       }  
    });   
}

Thx in advance 🙂

[stsrki]

You can use public getter for ElementRef or ElementId.

<RichTextEdit @ref="@richTextEditRef">
@code{
  RichTextEdit richTextEditRef;

  async Task DoSomething()
  {
    await JSInterop.DoSomething(richTextEditRef.ElementId);
  }
}

[stsrki]

Cool. Glad I could help :)

[njannink]

There is also the ConfigureQuillJsMethod="myproduct.configureQuillJs" property on the RichTextEdit. This javascript method is called during initialization. I use it for example to sanatize my url's that a user types.

        configureQuillJs() {
            var link = Quill.import("formats/link");

            link.sanitize = url => {
                let newUrl = window.decodeURIComponent(url);
                newUrl = newUrl.trim().replace(/\s/g, "");

                if (/^(:\/\/)/.test(newUrl)) {
                    return `http${newUrl}`;
                }
                if (!/^(f|ht)tps?:\/\//i.test(newUrl)) {
                    return `http://${newUrl}`;
                }

                return newUrl;
            }
        }

[swaipa]

Thanks - I was wondering how to use that. The documentation doesn't state that.

[swaipa]

Awesome help - thanks guys 😀

[njannink]

I will add it to the documentation and example

[njannink]

@swaipa I'm happy to see that more people start using the RichTextEdit. Any feedback, suggestions etc would be welcome. So we can make this a mature component of Blazorise

[swaipa]

Could be very cool to see image resize out of the box.

With your help today, I can probably side load it, but it would be really nice to have out of the box.

[swaipa]

https://github.com/kensnyder/quill-image-resize-module

[njannink]

Yes. I was thinking to optionally add support for a number of modules. Like image resizing, emoticons etc. Can you make a feature request for it. Then I will see if one of these days I can add it. For next release it will then be (0.9.4)

[Devteamsolutions]

Can you help with an example of how to include a module? I've included the resize js file, and have configureQuillJs setup as per your example, but can't work out how to add the module in via options.modules.