Trumboqyg WYSIWYG 编辑器不适用于 Jquery.Validate 插件,“Uncatch TypeEr
Trumboqyg WYSIWYG editor does not work with Jquery.Validate plugin, "Uncaught TypeError: Cannot read property 'nodeName' of undefined"
我一直在拔头发试图弄清楚这一点。
我目前正在使用 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
这是 jQuery 验证插件的一个已知问题,其中表单中的内容可编辑元素会在触发事件时导致异常。
您可以找到描述完全相同问题的此问题:
- 打破你的所见即所得。
- 未定义的错误。
- 所见即所得的所有工具栏按钮只需单击两次即可触发。
在此线程中提出了修改/黑客来解决此问题,但是解决相同问题的拉取请求已在 5 月合并到项目中。
问题是最新版本是从 2 月份开始的,因此此合并目前不可用。根据另一个问题,维护人员在 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 这样的库在打开弹出窗口时(如您在评论中提到的那些:插入链接、插入图像等),它们实际上是在 DOM 中附加一个<form>
,但在另一个<form>
中,这会导致嵌套表单。
对于嵌套表单,您提到的第二个错误是由 jQuery 验证触发的。您可以在此消息上查看 jQuery 验证插件所有者关于此问题的评论:
嵌套表单是无效的 HTML。如果已经有一个表单,则 [...] 插件不会生成表单,或者必须将其附加到当前表单之外。
关于这个问题,Trumbowyg Github上已经存在一个问题,但它是对插件核心的一次重大修改,目前,自2015年以来,它从一个里程碑移动到另一个里程碑。
如果在 jQuery 验证尝试启动 Trumbowyg 元素时,您仍然在第 jquery.validate.min.js:formatted:490
行收到以下错误:
Uncaught TypeError: Cannot read properties of undefined (reading 'replace')
尝试向div 中的id
属性添加一个随机值trumbowyg-editor
。这样的东西会起作用:
$(".trumbowyg").find(".trumbowyg-editor").attr("id", Math.random());
这可能不会启动实际的验证,但它会消除错误。
- 如何在Angular2中使用jQuery插件
- 可以前端maven插件使用节点,npm已经安装
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- 我的jQuery插件参数没有正确启动,遇到了问题
- 如何在elfinder插件(一个文件管理器插件)上获得上传前事件
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- TableExport jquery插件:文件名和扩展名问题
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- jQuery插件-从插件中调用公共方法
- 压缩phonegap中ios的图像插件
- jQuery粘性插件可变顶部间距
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- 高亮显示与数组字符串一起使用时文本插件中断
- 如何为jQuery屏蔽输入插件创建一个允许字母数字、空格和重音字符的掩码
- Wordpress插件根据需要加载js和css
- jQuery Wan Spinner插件的多个字段
- jQuery Facebox插件:关注弹出的外观
- CKEditor v4:自制插件中对话框的动态标题
- jquery 插件 Uncatch TypeError:对象不是一个函数
- Trumboqyg WYSIWYG 编辑器不适用于 Jquery.Validate 插件,“Uncatch TypeEr