Ошибка проверки 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 от выполнения того, что она пытается здесь сделать? Функционально на меня это не влияет, но сильно раздражает.
Я работаю в проекте C# MVC и использую UnobtrusiveJavaScriptEnabled и jQuery.validate.unobtrusive, поэтому я не вызываю проверку в конкретном месте. Интересно, связано ли это с тем, что CKEditor скрывает текстовую область при создании редактора?
Можете ли вы подтвердить один раз, добавив его вверху страницы jQuery.validator.setDefaults({ignore: ":hidden:not(#bookMainInfo),.note-editable.card-block" });, и один раз проверить, работает ли он
Я добавил это в тег <script> в верхней части моего представления, и ошибка все еще возникала при нажатии и закрытии редактора CKEditor.
Вам не кажется важным упомянуть где-нибудь в своем OP, что вы используете фреймворк MVC вместе с плагином ненавязчивой проверки? Отредактировал теги.
Хех, я полагаю. Меня обрезали за включение тегов, которые раньше не были напрямую связаны с моим вопросом (например, тегирование asp.net в вопросе jQuery), поэтому я не был уверен. Я буду знать в следующий раз. Спасибо.
Ответы 2
Итак, я нашел решение, соответствующее моим потребностям. Раньше #bookMainInfo TextArea был привязан к свойству модели с атрибутом [Required].
Ошибка возникла из-за того, что когда проверка jQuery вызывала escapeCssMeta, она пыталась запустить проверку в созданном редакторе CKEditor. У редактора нет идентификатора или имени, поэтому в консоли было выдано сообщение «Невозможно прочитать свойство 'replace' of undefined».
В моем случае мне удалось удалить атрибут [Обязательный] из этого поля, и это больше не проблема.
Моя ошибка была устранена добавлением .ignore = ".ck"
$(document).ready(function() {
$('form').each(function() {
if $(this).data('validator')
$(this).data('validator').settings.ignore = ".ck";
});
});
как и где вы вызываете
.validate(), срабатывает ли проверка при размытии