3

サイト (および Google) を検索しましたが、問題の有効な解決策が見つかりません。

Posabsolute の Validation-Engine を使用していますが、問題なく動作しています。私の問題のある子供たちを除いて-CKeditorでフォーマットされたテキストエリア。

を使用してテキストエリアを評価する必要があることはわかっていますが、機能さCKEditor.instances.textareaid.updateElement()せることができません。

これを機能させる方法に関するヒント/解決策はありますか? おそらく、validationEngine.js にオーバーライドする必要がある設定がありますか?

どんなポインタでも大歓迎です:)

4

4 に答える 4

4 
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');"

于 2013-09-30T09:24:42.903 に答える
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');
               }
            }
于 2012-09-19T14:06:33.493 に答える
0

ValidationEngine は可視フィールドのみを検証し、CKeditor はvisibility: hidden; display: none;インライン スタイルで元のテキスト領域または div を非表示にすることに注意してください。
お気づきのとおり、このコードCKEditor.instances.textareaId.updateElement()はエディター領域のコンテンツを元の要素に転送するために必要ですが、さらに多くの作業が必要です。

また、元の要素を再び表示する必要があり、$('#textareaId').toggle()orを使用$('#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>

複数のエディター要素がある場合は、ループを追加することができます。このコード
の唯一の欠点は、元の要素 ID がハードコードされていることです。

于 2012-12-05T15:58:56.983 に答える
0

代わりに、いくつかの CSS トリックを使用したいと思います。このスタイルをテキストエリアに使用します

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

これはよりクリーンなソリューションだと思います。

于 2015-08-12T13:57:19.727 に答える