jQuery validation 与 tinyMCE编辑器的故事

项目使用了jQuery validation验证插件,但是与tinyMCE拍档时,就来问题了。

1、验证错误信息显示在编辑器上方了。

2、tinyMCE的值不能及时赋给绑定的输入框,非空验证第一次总是失败的。

自己开始时候想了几个解决方案,但是统统失败了,查两个各自的api,浩如烟海,不是那么容易找到自己需要的。

后来Google到官方作者的解决方案,恩,很好。

DEMO: http://jquery.bassistance.de/validate/demo/tinymce/

记录下代码以备后用:

<script type="text/javascript" src="../../lib/jquery.js"></script>
<script type="text/javascript" src="../../jquery.validate.js"></script>
<script type="text/javascript" src="tiny_mce.js"></script>
<script type="text/javascript">
	tinyMCE.init({
		mode : "textareas",
		theme : "simple",
		// update validation status on change
		onchange_callback: function(editor) {
			tinyMCE.triggerSave();
			$("#" + editor.id).valid();
		}
	});
	$(function() {
		var validator = $("#myform").submit(function() {
			// update underlying textarea before submit validation
			tinyMCE.triggerSave();
		}).validate({
			rules: {
				title: "required",
				content: "required"
			},
			errorPlacement: function(label, element) {
				// position error label after generated textarea
				if (element.is("textarea")) {
					label.insertAfter(element.next());
				} else {
					label.insertAfter(element)
				}
			}
		});
		validator.focusInvalid = function() {
			// put focus on tinymce on submit validation
			if( this.settings.focusInvalid ) {
				try {
					var toFocus = $(this.findLastActive() || this.errorList.length && this.errorList[0].element || []);
					if (toFocus.is("textarea")) {
						tinyMCE.get(toFocus.attr("id")).focus();
					} else {
						toFocus.filter(":visible").focus();
					}
				} catch(e) {
					// ignore IE throwing errors when focusing hidden elements
				}
			}
		}
	})
</script>

http://cssor.com/the-story-of-jquery-validation-and-tinymce-editor.html

参与评论

电子邮件地址不会被公开。 必填项已用*标注

*

全部分类
Books(4)code(7)database(6)html&css(24)java(11)JavaScript(48)jQuery(24)linux(20)python(1)React(1)share(1)soft(4)solution(53)thinking(17)vim(9)WordPress(8)前端优化(12)拓展(33)服务器(31)移动开发(4)自然(22)