Trumboqyg WYSIWYG 编辑器不适用于 Jquery.Validate 插件，“未捕获类型错误：无法读取未定义的属性‘nodeName’”

Question

我一直在努力想弄清楚这个问题。

我现在正在使用 jquery 验证插件运行 jquery 2.2.2。https://jqueryvalidation.org/ 和 Trumbowyg WYSIWYG 编辑器。https://alex-d.github.io/Trumbowyg/

很棒的是，大多数情况下，每次用户点击或执行任何操作时，一切都会正常工作。您收到控制台错误Uncaught TypeError: Cannot read property 'nodeName' of undefined。它还会导致 Trumbowyg 的某些部分无法正常工作。

所以我的解决方案是在 jquery 验证插件上使用忽略类。但这不起作用。我尝试忽略不同领域的几乎每个类标签，无论我做什么，它都不会被忽略。

那么如何将 jquery 验证插件与 trumbowyg 文本编辑器一起使用呢？

这是我的验证码。

$('form').validate({
    errorPlacement: function (error, element) {
        if ($(element).parent('.input-group').length) {
            error.insertAfter(element.parent().siblings('label'));
            error.addClass('alert alert-danger validate');
        } else {
            error.insertAfter(element.siblings('label'));
            error.addClass('alert alert-danger validate');
        }
    },
    errorElement: 'div',
    highlight: function (element) {
        $(element).parent().addClass("has-error");
    },
    unhighlight: function (element) {
        $(element).parent().removeClass("has-error");
    },
    ignore: '.advanced',
    rules: {
        password_confirm: {
            equalTo: 'input[name=password]'
        },
        user_username: {
            remote: {
                url: 'action/check/',
                type: 'POST',
                data: {
                    id: function () {
                        return $('input[name=id]').val();
                    }
                }
            }
        },
        nav_name: {
            remote: {
                url: 'action/check/',
                type: 'POST',
                data: {
                    id: function () {
                        return $('input[name=id]').val();
                    }
                }
            }
        }
    },
    messages: {
        password_confirm: {
            equalTo: "Passwords must match"
        },
        user_username: {
            remote: "This Username already exists"
        },
        nav_name: {
            remote: "This Nav Item Name already exists"
        }
    },
    submitHandler: function (form) {
        $('button[type="submit"]').addClass('disabled').prop('disabled', true).prepend('<span class="bootstrap-dialog-button-icon glyphicon glyphicon-asterisk icon-spin"></span>');
        form.submit();
    }
});

我确实删除了验证插件，并且 trumbowyg 的所有内容都有效。所以也许是时候寻找一个新的验证插件了，我真的想避免这种情况。

更新：我确实注意到 Firefox 给了我一个不同的错误，所以我想我也会分享这个错误。

TypeError: owner is undefined
owner[ this.expando ] && owner[ this.expando ][ key ];

该问题的示例应可在此处进行演示：http ://develop.chrischampeau.com/admin/test.php

Answer 1

这是jQuery 验证插件的一个已知问题，其中表单中的内容可编辑元素在触发事件时会导致异常。

您可以找到这个问题描述完全相同的问题：

• 打破你所见即所得。
• 未定义的错误。
• 所见即所得中的所有工具栏按钮都需要单击两次才能触发。

此线程中提出了修改/破解来解决该问题，但解决同一问题的拉取请求已于 5 月份合并到该项目中。

问题是最新版本是二月份的，所以这个合并目前不可用。根据另一个问题，维护人员在 15 小时前表示，版本很快就会发布，其中包含针对您的问题的修复。

如果您等不及新版本的发布，您可以随时从他们的存储库获取最新版本，或者自己挑选此拉取请求中包含的修复程序。

关于您在应用拉取请求中的修复后在评论中描述的第二个问题，jQuery 验证通过检查元素是否具有在设置中指定的类来检查各种事件（onfocusout尤其是在这种情况下）是否应忽略某个元素。

您添加到文本区域class="advanced"以忽略它，不幸的是，当Trumbowyg初始化时，创建的包装器将如下所示：

<div class="trumbowyg-editor trumbowyg-reset-css" contenteditable="true" dir="ltr" placeholder="">

它不会将advanced类传播到包装器。一个可能的解决方法是在初始化Trumbowyg时添加自己的此类。为此，您可以tbwinit通过修改构造函数来依赖该事件。

// Setup WYSIWYG
$('textarea.advanced').trumbowyg( {
    resetCss: true,
    removeformatPasted: true,
    autogrow: true,
    btnsDef: {
    // Customizables dropdowns
        image: {
            dropdown: ['insertImage', 'upload', 'base64', 'noEmbed'],
            ico: 'insertImage'
        }
    },
    btns: [
        ['viewHTML'],
        ['undo', 'redo'],
        ['formatting'],
        'btnGrp-design',
        ['link'],
        ['image'],
        'btnGrp-justify',
        'btnGrp-lists',
        ['foreColor', 'backColor'],
        ['preformatted'],
        ['horizontalRule'],
        ['fullscreen']
    ],
    plugins: {
        // Add imagur parameters to upload plugin
        upload: {
            serverPath: 'https://api.imgur.com/3/image',
            fileFieldName: 'image',
            headers: {
                'Authorization': 'Client-ID 9e57cb1c4791cea'
            },
            urlPropertyName: 'data.link'
        }
    }
}).on('tbwinit', function(){
  $('.trumbowyg-editor').addClass('advanced');
});

初始化后，您的包装器将具有该类advanced，以便jQuery 验证可以使用它。

<div class="trumbowyg-editor trumbowyg-reset-css advanced" contenteditable="true" dir="ltr" placeholder="">

关于第二个问题，它被触发是因为像Trumbowyg这样的一些库在打开弹出窗口时（就像您在评论中提到的那些：Insert Link，Insert Image等），它们实际上是<form>在 DOM 中附加 a 但在另一个<form>导致到嵌套形式。

对于嵌套表单，您提到的第二个错误是由 jQuery 验证触发的。您可以查看jQuery Validation插件所有者对此问题的评论：

嵌套表单是无效的 HTML。如果已经存在表单，则 [...] 插件不会生成表单，或者必须将其附加到当前表单之外。

Trumbowyg Github上已经就这个问题提出了一个问题，但它是对插件核心的重大修改，目前，它自 2015 年以来已经从一个里程碑转移到另一个里程碑。