完整代码

Question

我搜索了网站（和Google），找不到解决问题的方法。

我正在使用Posabsolute的验证引擎，它运行得很好。除了我的问题孩子 - 我的CKeditor格式化textareas。

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

任何人都有关于如何工作的任何提示/解决方案？也许我需要覆盖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如下所示

form method =“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;内联样式隐藏原始textarea或div。
正如您所知，需要使用代码CKEditor.instances.textareaId.updateElement()将编辑区域的内容传回原始元素，但还需要做更多的工作。

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

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

现在又出现了另一个问题，错误提示不在编辑区附近，而是因为visibility: hidden而在原始元素处，但这不是问题。我们只需使用$('#textareaId').toggle()或$('#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;
}

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

Posabsolute的jQuery Validation-Engine和CkEditor

4 个答案:

完整代码