0

I've modified a Blazor-JS component based on QuillJs to enable two-way binding from the text editor to blazor/c# property

I've done this by adding a 'blur' event listener and invoking a method c# method from js:

All source code here: https://github.com/gismofx/TextEditor/blob/3ea6d0705a443d8ea81bdcce46814ef2261e1e26/src/Blazored.TextEditor/wwwroot/Blazored-BlazorQuill.js#L40

//On Blur - we update the object in dotnet
            quillElement.__quill.editor.scroll.domNode.addEventListener('blur',
                () => {
                    if (quillElement.__quill.options.debug === "info") {
                        console.log('info: Quill Editor blur event for ' + quillElement.id);
                    }
                    QuillFunctions.dotNetRefs.get(quillElement.id).invokeMethodAsync('DeltaChanged', QuillFunctions.getQuillContent(quillElement));
                }
            );

The two-way binding works just fine.

Issue: When interacting with quill's toolbar, e.g. to change some highligted text's format, the cursor jumps to start of text and formatting it not applied. If you repeat, it applied the fomatting. This happens every time.

See recording of strange behavior: strange behavior

If I remove the invokeMethodAsync call, it restores correct functionality and formatting is applied correctly.

Is there different event to use or another way to keep binding and not affect the quill functionality?

0

0

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.