Ошибка проверки CKEditor 5 и jQuery

Довольно плохо знаком с работой с CKEditor, и меня смущает эта ошибка проверки jQuery, которую я получаю. Мой проект - C# MVC, использующий UnobtrusiveJavascript и плагин Unobtrusive Validate.

У меня есть текстовая область, построенная с помощью HtmlHelper:

 @Html.TextAreaFor(model => model.BookSummary, new { id = "bookMainInfo" })

Вот что я делаю для создания редактора. Он заменяет текстовую область при открытии страницы:

 var theEditor;

// Load CKEditor in place of the information table
ClassicEditor
    .create(document.querySelector('#bookMainInfo'), {
        toolbar: ['heading', 'bold', 'italic', 'underline', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'],
        heading: {
            options: [
                { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                { model: 'heading4', view: 'h4', title: 'Large Heading', class: 'ck-heading_heading4' },
                { model: 'heading5', view: 'h5', title: 'Medium Heading', class: 'ck-heading_heading5' },
                { model: 'heading6', view: 'h6', title: 'Small Heading', class: 'ck-heading_heading6' }
            ]
        }
    })
    .then(editor => {
        theEditor = editor; // Save editor for usage later
    })
    .catch(error => {
        console.error(error);
    });

Кажется, все работает хорошо. Я могу успешно ввести данные и отправить форму без проблем. Однако, если у меня есть текст, введенный в редакторе, и я щелкаю за пределами редактора, в консоли выдается следующая ошибка:

VM149 jquery.validate.js:1033 Uncaught TypeError: Cannot read property 'replace' of undefined
at $.validator.escapeCssMeta (VM149 jquery.validate.js:1033)
at $.validator.errorsFor (VM149 jquery.validate.js:1014)
at $.validator.prepareElement (VM149 jquery.validate.js:692)
at $.validator.element (VM149 jquery.validate.js:475)
at $.validator.onfocusout (VM149 jquery.validate.js:300)
at HTMLDivElement.delegate (VM149 jquery.validate.js:424)
at HTMLFormElement.dispatch (VM148 jquery-3.3.1.js:5183)
at HTMLFormElement.elemData.handle (VM148 jquery-3.3.1.js:4991)
at Object.trigger (VM148 jquery-3.3.1.js:8249)
at Object.simulate (VM148 jquery-3.3.1.js:8318)

Ошибка регистрируется дважды, и я могу неоднократно генерировать ошибку, щелкая в и из редактора с текстом в нем. Пустой редактор не приводит к ошибке. Кажется, что это взрывается в этом разделе jquery.validate.js в частности:

    escapeCssMeta: function( string ) {
        return string.replace( /([\\!"#$%&'()*+,./:;<=>?@\[\]^`{|}~])/g, "\\$1" );
    }

Могу ли я что-нибудь сделать, чтобы подавить эту ошибку или прекратить валидацию jQuery от того, что она пытается здесь сделать? Это не влияет на меня функционально, но это довольно раздражает.

3 ответа

Решение

Поэтому я нашел решение, которое соответствует моим потребностям. Ранее, #bookMainInfo TextArea было привязано к свойству модели с атрибутом [Обязательный].

Произошла ошибка, потому что когда проверка jQuery вызывала escapeCssMeta, она пыталась запустить проверку в созданном редакторе CKEditor. Редактор не имеет идентификатора или имени, поэтому в консоли было выдано сообщение "Не удается прочитать свойство" заменить "неопределенного".

В моем случае я смог удалить атрибут [Required] из этого поля, и это больше не проблема.

Моя ошибка была устранена добавлением.ignore = ".ck"

$(document).ready(function() {
 $('form').each(function() {
       if $(this).data('validator')
          $(this).data('validator').settings.ignore=".ck";
 });
});
      VM149 jquery.validate.js:1033 Uncaught TypeError: Cannot read property 'replace' of undefined

Результаты, потому что элемент, который CKEditor создает для редактирования, не имеет атрибута «имя». Конечно, можно попробовать дать элементу CKEditor атрибут name ...

Или вы можете специально исключить этот элемент из проверки. Это всего лишь инструмент в форме. Фактический элемент, который должен содержать значение из CKEditor, должен быть проверен.

      $('FORM').validate({
      ignore: ".cke_editable"
});

https://jqueryvalidation.org/validate/#ignore

Другие вопросы по тегам