RichTextEdit and quill-paste-smart

[zerox981]

How to get quill-paste-smart working with latest RichTextEdit versions. In older versions where you included the quill.js manually and then added quill-paste-smart it work perfectly, but now I can not get it to work.

I did try to load the script in configureQuillJs and it seems to register window.QuillPasteSmart but it just does not filter pastes.

[stsrki]

You might be able to do it by overriding RTE internals and then adding your custom code. See this thread that we answered recently https://blazorise.com/support/issues/319/recommended-way-to-register-custom-quill-plug-ins for reference.

[panmona]

I needed to do the same thing for our project and thanks to the fixed overriding issue I was able to do it in the following way:

1. Create a new JSModule:

public class CustomJSRichTextEditModule : JSRichTextEditModule
{
    public CustomJSRichTextEditModule(
        IJSRuntime jsRuntime,
        IVersionProvider versionProvider,
        BlazoriseOptions blazoriseOptions,
        RichTextEditOptions options
    )
        : base(jsRuntime, versionProvider, blazoriseOptions, options) { }

    public override string ModuleFileName => $"./_content/{yourAssemblyName}/{jsFileNameThatYouWillCreateLater}.js";
}

2. Register it where you register the RichTextEdit:

serviceCollection.AddBlazoriseRichTextEdit(options =>
{
    // specify your options
});
// Override RichText module to get custom plug-ins working
serviceCollection.Replace(ServiceDescriptor.Scoped<JSRichTextEditModule, CustomJSRichTextEditModule>());

3. Create a new js file in the same project in wwwroot. There you can import your plug-in:

export * from "../../../_content/Blazorise.RichTextEdit/richtextedit.js"
import "./your-plugin.js";

// Make a call to Quill.register here (or in your configureQuillJs function)
// You can update options for your plug-in in your configureQuillJs function

4. Don't forget to add the name of the JS file that you created, into the ModuleFileName path!

@stsrki Would you do it the same way? Or did you have something else in mind?

[stsrki]

Yes, that's how it is done @panmona

Thank you for providing us with the solution.

[zerox981]

Thank you very much, this works now. I did spent hours experimenting and searching for a workaround 😳. I did not realize there is a separate issue board on blazorise. .

It would be ideal if https://blazorise.com/docs/extensions/richtextedit#toc_QuillJS-Configuration had the same example @panmona provided.