菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码:
点击运行
保存
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>jQuery 插件:使用 TinyMCE 进行交互</title> <!--[if gte IE 9]><!--><script src="//cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script><!--<![endif]--><!--[if lt IE 9]><script src="//cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script><script src="//cdn.staticfile.org/html5shiv/r29/html5.min.js"></script><script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><![endif]--> <script src="/public/jquery/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> <script src="/public/jquery/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script> <script src="/public/jquery/jquery-validation-1.14.0/demo/tinymce/tiny_mce.js"></script> <script> tinyMCE.init({ mode:"textareas", theme:"simple", // 当改变时更新验证状态 onchange_callback:function(editor) { tinyMCE.triggerSave(); $("#" + editor.id).valid(); } }); $(function() { var validator = $("#myform").submit(function() { // 在提交验证之前更新相关的文本框 tinyMCE.triggerSave(); }).validate({ ignore:"", rules:{ title:"required", content:"required" }, errorPlacement:function(label, element) { // 在生成文本框之后定位错误标签 if (element.is("textarea")) { label.insertAfter(element.next()); } else { label.insertAfter(element) } } }); validator.focusInvalid = function() { // 当提交验证时放置焦点在 tinymce 上 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) { // 当聚焦在隐藏的元素上时忽略 IE 抛出的错误 } } } }) </script> <!-- /TinyMCE --> </head> <body> <form id="myform" action="/try/try.php"> <h3>TinyMCE 和 Validate 插件交互实例</h3> <label>字段</label> <input name="title"> <br> <label>文本</label> <textarea id="content" name="content" rows="15" cols="80" style="width:80%"></textarea> <br> <input type="submit" name="save" value="提交"> </form> </body> </html>
运行结果