Содержимое редактора Quill очищается при выборе другого текстового поля в форме - PullRequest
Новая
       4

Содержимое редактора Quill очищается при выборе другого текстового поля в форме

0 голосов
/ 18 февраля 2020

У меня есть серверное приложение Blazor, которое использует редактор Quill. Если я должен был добавить некоторый контент в редактор Quill, то go для ввода текста в другое текстовое поле в той же форме, а затем нажмите, чтобы ввести текст в другое текстовое поле, содержимое редактора Quill потеряно.

Chrome Консоль показывает следующие ошибки при переходе I go из одного текстового поля в другое -

WASM: Необработанный компонент рендеринга исключений: blazor.webassembly. js: 1 : 35618 WASM: Microsoft.JSInterop.JSException: элемент является нулевым blazor.webassembly. js: 1: 35618 WASM: selectItem @ https://cdn.quilljs.com/1.3.6/quill.js: 9693: 7 blazor.webassembly. js: 1 : 35618 WASM: IconPicker @ https://cdn.quilljs.com/1.3.6/quill.js: 9684: 11 blazor.webassembly. js: 1: 35618 WASM: buildPickers / this.pickers <@ <a href="https://cdn.quilljs.com/1.3.6/quill.js:6739:18" rel="nofollow noreferrer">https://cdn.quilljs.com/1.3.6/quill.js: 6739: 18 blazor.webassembly. js: 1: 35618 WASM: buildPickers @ https://cdn.quilljs.com/1.3.6/quill.js: 6734: 30 blazor.webassembly. js: 1: 35618 WASM: exteToolbar @ https://cdn.quilljs.com/1.3.6/quill.js: 9851: 12 blazor.webassembly. js: 1: 35618 WASM: addModule @ https://cdn.quilljs.com/1.3.6/quill.js: 6703: 14 blazor.webassembly. js: 1: 35618 WASM: init / <@ <a href="https://cdn.quilljs.com/1.3.6/quill.js:6049:17" rel="nofollow noreferrer">https://cdn.quilljs.com/1.3.6/quill.js: 6049: 17 blazor.webassembly. js: 1: 35618 WASM: init @ https://cdn.quilljs.com/1.3.6/quill.js: 6047: 41 blazor.webassembly. js: 1: 35618 WASM: Quill @ https://cdn.quilljs.com/1.3.6/quill.js: 1113: 16 blazor.webassembly. js: 1: 35618 WASM: cre ateQuill @ https://localhost: 44323 / BlazorQuill. js: 17: 13 blazor.webassembly. js: 1: 35618 WASM: beginInvokeJSFromDotNet / r <@ <a href="https://localhost:44323/_framework/blazor.webassembly.js:1:9610" rel="nofollow noreferrer">https://localhost: 44323 / _framework / blazor.webassembly. js: 1: 9610 blazor.webassembly. js: 1: 35618 WASM: beginInvokeJSFromDotNet @ https://localhost: 44323 / _framework / blazor.webassembly. js: 1: 9579 blazor.webassembly. js: 1: 35618 WASM: _mono_wasm_invoke_js_marshalled @ https://localhost: 44323 / _framework / wasm / mono. js: 1: 178941 blazor.webasse. js: 1: 35618 WASM: @ https://localhost: 44323 / _framework / wasm / mono.wasm: функция wasm [132]: 0x0 blazor.webassembly. js: 1: 35618 WASM : @ https://localhost: 44323 / _framework / wasm / mono.wasm: функция wasm [6361]: 0x11d724 blazor.webassembly. js: 1: 35618 WASM: @ https://localhost : 44323 / _framework / wasm / mono.wasm: функция wasm [1463]: 0x3f118 blazor.webassembly. js: 1: 35618 WASM: @ https://localhost: 44323 / _framework / wasm / mono .wasm: функция wasm [616]: 0x1373b blazor.webassembly. js: 1: 35618 WASM: @ https://localhost: 44323 / _fr amework / wasm / mono.wasm: функция wasm [616]: 0x1eb39 blazor.webassembly. js: 1: 35618 WASM: @ https://localhost: 44323 / _framework / wasm / mono.wasm: wasm-функция [616]: 0x1eb17 blazor.webassembly. js: 1: 35618 WASM: @ https://localhost: 44323 / _framework / wasm / mono.wasm: функция wasm [616]: 0x1eb39 3 blazor.webassembly. js: 1: 35618 WASM: @ https://localhost: 44323 / _framework / wasm / mono.wasm: функция wasm [616]: 0x1eb17 10 blazor.webassembly . js: 1: 35618 WASM: @ https://localhost: 44323 / _framework / wasm / mono.wasm: функция wasm [616]: 0x1eb39 2 blazor.webassembly. js: 1: 35618 WASM: @ https://localhost: 44323 / _framework / wasm / mono.wasm: функция wasm [616]: 0x1eb17 6 blazor.webassembly. js: 1: 35618 WASM: @ https://localhost: 44323 / _framework / wasm / mono.wasm: функция wasm [5230]: 0xf3546 blazor.webassembly. js: 1: 35618 WASM: @ https://localhost: 44323 / _framework / wasm / mono.wasm: функция wasm [3309]: 0xa1906 blazor.webassembly. js: 1: 35618 WASM: @ https://localhost: 44323 / _framework / wasm / mono.wasm: wasm- функция [ 1352]: 0x39ba7 blazor.webassembly. js: 1: 35618 WASM: @ https://localhost: 44323 / _framework / wasm / mono.wasm: функция wasm [449]: 0xd78f блейзор .webassembly. js: 1: 35618 WASM: @ https://localhost: 44323 / _framework / wasm / mono.wasm: функция wasm [1761]: 0x4f8aa blazor.webassembly. js: 1 : 35618 WASM: @ https://localhost: 44323 / _framework / wasm / mono.wasm: функция wasm [3549]: 0xac258 blazor.webassembly. js: 1: 35618 WASM: Module._mono_wasm_invoke_method @ https://localhost: 44323 / _framework / wasm / mono. js: 1: 202599 blazor.webassembly. js: 1: 35618 WASM: callMethod @ https://localhost: 44323 / _framework /blazor.webassembly.js:1:39515 blazor.webassembly. js: 1: 35618 WASM: endInvokeJSFromDotNet @ https://localhost: 44323 / _framework / blazor.webassembly. js: 1: 37995 blazor.webassembly. js: 1: 35618 WASM: beginInvokeF /<@<a href="https://localhost:44323/_framework/blazor.webassembly.js:1:9663" rel="nofollow noreferrer">https://localhost:44323/_framework/blazor.webassembly.js:1:9663 blazor.webassembly. js: 1: 35618 WASM: blazor.webassembly. js: 1 : 35618 WASM: в System.Threading.Tasks.ValueTask 1[TResult].get_Result () <0x2b88ab8 + 0x0004a> in <c50882760828481c927e00b7db67d1a5>:0 blazor.webassembly.js:1:35618 WASM: at System.Runtime.CompilerServices.ValueTaskAwaiter 1 [TResult] .GetResult () <0x2b88a08 + 0x00006> в: 0 blazor.webassembly. js: 1: 35618 WASM: в HOG.BlazorClient.Plient , (System.Threading.Tasks.Task taskToHandle) <0x2104898 + 0x000be> в <44d78cab266c4647aa96aadd4455da2 c>: 0 blazor.webassembly. js: 1: 35618

* 1108 здесь - это форма здесь 1109 * 
<EditForm Model="@PostObject">
                <DataAnnotationsValidator />

                <div class="form-group">
                    <label>Title</label>
                    <InputText class="form-control" @bind-Value="@PostObject.Title" />
                    <ValidationMessage For="@(() => PostObject.Title)" />
                </div>

                <div class="form-group">
                    <label>Preview Text</label>
                    <InputTextArea class="form-control" @bind-Value="@PostObject.PreviewText" />
                    <ValidationMessage For="@(() => PostObject.PreviewText)" />
                </div>

                <div class="form-group">
                    <label for="content">Content</label>
                    <div id="toolbar">
                        <span class="ql-formats">
                            <select class="ql-font">
                                <option selected=""></option>
                                <option value="serif"></option>
                                <option value="monospace"></option>
                            </select>
                            <select class="ql-size">
                                <option value="small"></option>
                                <option selected=""></option>
                                <option value="large"></option>
                                <option value="huge"></option>
                            </select>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-bold"></button>
                            <button class="ql-italic"></button>
                            <button class="ql-underline"></button>
                            <button class="ql-strike"></button>
                        </span>
                        <span class="ql-formats">
                            <select class="ql-color"></select>
                            <select class="ql-background"></select>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-list" value="ordered"></button>
                            <button class="ql-list" value="bullet"></button>
                            <button class="ql-indent" value="-1"></button>
                            <button class="ql-indent" value="+1"></button>
                            <select class="ql-align">
                                <option selected=""></option>
                                <option value="center"></option>
                                <option value="right"></option>
                                <option value="justify"></option>
                            </select>
                            <button class="ql-image"></button>
                            <button class="ql-video"></button>
                        </span>
                        <span class="ql-formats">
                            <button class="ql-link"></button>
                        </span>
                    </div>

                    <div @ref="@divEditorElement" />

                </div>

                <div class="form-group">
                    <label>Tags</label>
                    <InputText class="form-control" @bind-Value="@PostObject.Tags" />
                    <ValidationMessage For="@(() => PostObject.Tags)" />
                </div>

                <div class="form-group">
                    <label>META Tags</label>
                    <InputText class="form-control" @bind-Value="@PostObject.MetaTags" />
                    <ValidationMessage For="@(() => PostObject.MetaTags)" />
                </div>
                <div class="form-group">
                    <label>META Description</label>
                    <InputText class="form-control" @bind-Value="@PostObject.MetaDesc" />
                    <ValidationMessage For="@(() => PostObject.MetaDesc)" />
                </div>

                <button type="submit" class="btn btn-primary" @onclick="(() => HandleValidSubmit())">Submit</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            </EditForm>
...