Blazored / TextEditor

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

[Question] GetHtml Error #70

Closed turgayacar closed 8 months ago

turgayacar commented 8 months ago

Hello; I have an issue. I am using the editor, and I am using tabs in the place I am working. When I switch to a different tab, I encounter an error in the GetHtml part. However, if I save while on the tab with the editor, I don't get an error.

lazor.server.js:1 [2024-02-01T09:14:19.817Z] Information: Normalizing '_blazor' to 'https://localhost:7060/_blazor'. blazor.server.js:1 [2024-02-01T09:14:19.826Z] Information: WebSocket connected to wss://localhost:7060/_blazor?id=1ixZVzDX0bU82bRUSRBiHA. quill.js:4165 [Deprecation] Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event. This event type is deprecated (https://w3c.github.io/uievents/#legacy-event-types) and work is underway to remove it from this browser. Usage of this event listener will cause performance issues today, and represents a risk of future incompatibility. Consider using MutationObserver instead. Scroll @ quill.js:4165 quill.js:1987 quill:events scroll-optimize Array(2) Object quill.js:1987 quill:selection getNativeRange null quill.js:1987 quill:events editor-change selection-change null Range silent quill.js:1987 quill:clipboard convert

What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.



Delta quill.js:1987 quill:events scroll-before-update user Array(1) quill.js:1987 quill:events scroll-optimize Array(1) Object quill.js:1987 quill:selection getNativeRange null quill.js:1987 quill:events scroll-update user Array(1) quill.js:1987 quill:events scroll-optimize Array(3) Object quill.js:1987 quill:selection getNativeRange null quill.js:1987 quill:events scroll-optimize Array(41) Object quill.js:1987 quill:selection getNativeRange null quill.js:1987 quill:events scroll-optimize Array(1) Object quill.js:1987 quill:selection getNativeRange null quill.js:1987 quill:events editor-change text-change Delta Delta api quill.js:1987 quill:selection getNativeRange null quill.js:1987 quill:events text-change Delta Delta api quill.js:1987 quill:events scroll-before-update user Array(2) quill.js:1987 quill:events scroll-optimize Array(2) Object quill.js:1987 quill:selection getNativeRange null quill.js:1987 quill:events scroll-update user Array(2) quill.js:1987 quill:selection getNativeRange null blazor.server.js:1 [2024-02-01T09:14:38.699Z] Error: Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'quill') TypeError: Cannot read properties of null (reading 'quill') at Object.getQuillHTML (https://localhost:7060/_content/Blazored.TextEditor/Blazored-BlazorQuill.js:33:33) at https://localhost:7060/_framework/blazor.server.js:1:3244 at new Promise () at y.beginInvokeJSFromDotNet (https://localhost:7060/_framework/blazor.server.js:1:3201) at Yt._invokeClientMethod (https://localhost:7060/_framework/blazor.server.js:1:61041) at Yt._processIncomingData (https://localhost:7060/_framework/blazor.server.js:1:58516) at Yt.connection.onreceive (https://localhost:7060/_framework/blazor.server.js:1:52157) at s.onmessage (https://localhost:7060/_framework/blazor.server.js:1:80302) at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args) at Blazored.TextEditor.BlazoredTextEditor.GetHTML() at DogruBlazorWeb.Pages.Manager.ManagerProductDetail2.GetHTML() in D:\PROJELER\AYAZB2B\DogruBlazorWeb\DogruBlazorWeb\Pages\Manager\ManagerProductDetail2.razor:line 1139 at DogruBlazorWeb.Pages.Manager.ManagerProductDetail2.HandleValidSubmit() in D:\PROJELER\AYAZB2B\DogruBlazorWeb\DogruBlazorWeb\Pages\Manager\ManagerProductDetail2.razor:line 930 at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task) at Microsoft.AspNetCore.Components.Forms.EditForm.HandleSubmitAsync() at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState) log @ blazor.server.js:1 blazor.server.js:1 [2024-02-01T09:14:38.700Z] Information: Connection disconnected.

My sole purpose is to send back the updated HTML content from the editor to my model and save it. I've looked for something like bind-value to directly bind the content, but it doesn't exist. How can I resolve this issue?

ADefWebserver commented 8 months ago

This is a simple wrapper around the Quill.js component that we cannot change. A limitation is that it will not work in tabs.