1

使用 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 验证做它试图在这里做的任何事情吗？它在功能上对我没有影响，但它很烦人。

4

3 回答 3

2

所以我找到了一个适合我需求的解决方案。以前，#bookMainInfo TextArea 与具有 [Required] 属性的模型属性相关联。

发生错误是因为当 jQuery 验证调用 escapeCssMeta 时，它试图在创建的 CKEditor 编辑器上运行验证。编辑器没有 ID 或名称，因此在控制台中抛出“无法读取未定义的属性'替换'”消息。

就我而言，我能够从该字段中删除 [Required] 属性，这不再是问题。

于 2018-07-24T17:19:55.613 回答
1

通过添加 .ignore = ".ck" 解决了我的错误

$(document).ready(function() {
 $('form').each(function() {
       if $(this).data('validator')
          $(this).data('validator').settings.ignore=".ck";
 });
});
于 2020-08-24T23:57:04.767 回答
0 
VM149 jquery.validate.js:1033 Uncaught TypeError: Cannot read property 'replace' of undefined

结果是因为 CKEditor 为编辑创建的元素没有属性“名称”。当然可以尝试给 CKEditor 元素一个“名称”属性......

或者您可以专门从验证中排除此元素。它只是形式上的一个工具。应该验证包含来自 CKEditor 的值的实际元素。

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

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

于 2021-10-14T09:05:36.757 回答