0

我在创建 iframe 元素的表单上使用 bootstrap-wysihtml5 编辑器。

<iframe class="wysihtml5-sandbox" width="0" height="0" frameborder="0" security="restricted" allowtransparency="true" marginwidth="0" marginheight="0" name="for_nod" src="#" style="display: inline-block; background-color: rgb(255, 255, 255); border-collapse: separate; border-color: rgb(204, 204, 204); border-style: solid; border-width: 1px; clear: none; float: none; margin: 0px 0px 10px; outline: 0px none rgb(0, 0, 0); outline-offset: 0px; padding: 4px 6px; position: static; top: auto; left: auto; right: auto; bottom: auto; z-index: auto; vertical-align: middle; text-align: start; -moz-box-sizing: content-box; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.075) inset; border-radius: 4px 4px 4px 4px; width: 750px; height: 300px;">
<html>
    <head>
    <meta charset="UTF-8">
    <link href="/js/plug-ins/bootstrap-wysihtml5/rtl/rtl-editor.css" rel="stylesheet">
    <style type="text/css">
    </head>
    <body class="wysihtml5-editor" contenteditable="true" spellcheck="true" style="background-color: rgb(255, 255, 255); color: rgb(85, 85, 85); cursor: text; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; letter-spacing: normal; text-align: start; text-decoration: none; text-indent: 0px; text-rendering: optimizelegibility; word-break: normal; word-wrap: break-word; word-spacing: 0px;">
        simple text
        <br>
    </body>
</html>
</iframe>

我需要使用 Nod 验证插件来验证 iframe 中的 body 元素是否为空。

问题是 Nod 验证插件接受 jquery 选择器 TEXT 来设置元素的验证规则，而不是对象 - 我可以使用 $("iframe").content().find("body") 获取 iframe 对象，但验证逻辑将不行。

我曾尝试设置提交按钮onclick事件处理程序来手动处理 iframe 的验证，问题是如果 Nod 使用的规则通过，那么自定义验证函数如果返回 true 或 false 值将无效。

无论如何要解决这个问题？

4

1 回答 1

0

我通过创建未显示的 textarea 元素，然后使用自定义事件功能来侦听 iframe body 的更改事件，并将隐藏的 textarea 内容设置为相同，从而解决了我的问题。点头规则已应用于隐藏的文本区域。

我不确定这是否是完美的解决方案，但目前我别无选择:)。

自定义 contentchange 事件代码

/*
 * custom-change-event  
 *
 *  This custom event is used for those elements  
 *  that has no support for default change event
 *  like : body , div ,span, ....
 *
 *
 */

    var interval;

    jQuery.fn.contentchange = function (fn) {
        return this.on('contentchange', fn);
    };

    jQuery.event.special.contentchange = {
        setup: function (data, namespaces, eventHandle) {
            var self = this,
                $this = $(this),
                $originalContent = $this.text();
            interval = setInterval(function () {
                if ($originalContent != $this.text()) {
                    $originalContent = $this.text();
                    jQuery.event.special.contentchange.handler.call(self);
                }
            }, 500);
        },
        teardown: function (namespaces) {
            clearInterval(interval);
        },
        handler: function (event) {
            $(this).trigger('contentchange');
        }
    };
于 2013-11-05T19:28:22.933 回答