CKEditor 5 和 jQuery 验证错误

Posted 2023-05-08

【中文标题】CKEditor 5 和 jQuery 验证错误

【英文标题】：CKEditor 5 and jQuery Validation error

【发布时间】：2018-12-31 10:32:57

【问题描述】：

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

【问题讨论】：

你如何以及在哪里调用 .validate() 是模糊触发的验证

我在一个 c# MVC 项目中并且正在使用 UnobtrusiveJavaScriptEnabled 和 jQuery.validate.unobtrusive，所以我没有在任何特定的地方调用 validate。不知道是不是和CKEditor在生成编辑器时隐藏了文本区域有关？

您能否通过在页面顶部添加此内容来确认一次jQuery.validator.setDefaults(ignore: ":hidden:not(#bookMainInfo),.note-editable.card-block" ); 并检查一次是否有效

我在视图顶部的

您不认为在您的 OP 中提及您正在使用 MVC 框架和 Unobtrusive Validation 插件的某个地方很重要吗？编辑标签。

【参考方案1】：

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

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

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

【参考方案2】：

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

$(document).ready(function() 
 $('form').each(function() 
       if $(this).data('validator')
          $(this).data('validator').settings.ignore=".ck";
 );
);

【参考方案3】：

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