jquery - Posabsolute 的 jQuery 验证引擎和 CkEditor

Question

我已经搜索了该网站（和 Google），但找不到解决我问题的有效解决方案。

我正在使用 Posabsolute 的验证引擎，它工作得很好。除了我的问题孩子 - 我的 CKeditor 格式化文本区域。

我知道我需要使用 评估 textarea CKEditor.instances.textareaid.updateElement()，但无法使其正常工作。

有人对如何工作有任何提示/解决方案吗？也许我需要覆盖validationEngine.js 中的一个设置？

任何指针都将受到欢迎:)

Answer 1

jQuery(function()
{
    CKEDITOR.replace("editor_id",
    {
        width:"750px",
        height:"300px",
        on:
        {
            instanceReady: function(ev)
            { 
                jQuery("#editor_id").css({display:"block",visibility:"hidden",position:"absolute"});
                this.document.on("keyup", CK_jQ);
                this.document.on("paste", CK_jQ);
            }
        }
    });
});

function CK_jQ()
{
    CKEDITOR.tools.setTimeout( function()
    { 
        jQuery("#editor_id").val(CKEDITOR.instances.editor_id.getData()); 
    }, 0);
}

function validateFrm()
{
    if(JQObj('#'+frmID).validationEngine('validate'))
    {
        return true;
    } 
    else
    {
        return false;
    }
}

//你的html如下

表单方法="post" name="formId" id="formId" action="" enctype="multipart/form-data" onsubmit="return validateFrm('formId');"

Answer 2

我已经这样做了：

         if(typeof CKEDITOR !== 'undefined'){
               for(var i in CKEDITOR.instances){ //editors
                $("form textarea[name="+CKEDITOR.instances[i].name+"]").addClass("validate[required]");
                $("form textarea[name="+CKEDITOR.instances[i].name+"]").attr("data-prompt-position", 'bottomLeft:400,0');
               }
            }

Answer 3

请记住，ValidationEngine 仅验证可见字段，CKeditor 使用visibility: hidden; display: none;内联样式隐藏原始文本区域或 div。
正如您所发现的，需要此代码CKEditor.instances.textareaId.updateElement()将编辑器区域的内容传输回原始元素，但还需要做更多工作。

您还需要使原始元素再次可见，并使用$('#textareaId').toggle()or$('#textareaId').show()执行此操作。现在您可以使用以下方法验证所有字段：

$('#formId').validationEngine('validate');

现在出现另一个问题，错误提示不是在编辑器区域附近，而是在原始元素处，因为visibility: hidden，但这不是问题。我们只需使用$('#textareaId').toggle()or再次隐藏原始元素$('#textareaId').hide()，以使提示符与编辑器对齐。

完整代码

此代码使用 CKEditor v4 和 validationEngine v2.5。

<form id="yourFormId" onsubmit="return validate(this);">
<textarea id="textareaId" class="ckeditor"></textarea>
</form>
<script>
function validate(form) {
    CKEDITOR.instances.textareaId.updateElement();
    $('#textareaId').toggle();
    validated = $(form).validationEngine('validate');
    $('#textareaId').toggle();

    return validated;
}
</script>

如果您有多个编辑器元素，您可能需要添加一个循环。
此代码的唯一缺点是硬编码的原始 elementId(s)。

Answer 4

我宁愿使用一些 CSS 技巧。我会将这种样式用于 textarea

.wysiwyg-editor{
    visibility: hidden !important;
    display: block !important;
    height: 0px;
}

我认为这是一个更清洁的解决方案。