检查 CKEditor 的值，如果没有内容，则禁用提交按钮

Question

运行一个基本函数，该函数根据输入长度禁用表单提交按钮。

我正在使用这个：

    // check if the newpost text area in empty on page load and also input change
$(document).ready(function(){
    disableNewPost();
    $('#newpost').keyup(disableNewPost);
});
// disable new post submit button if the new post ckeditor is empty
function disableNewPost() {
    if ($('#newpost').val().length > 0) {
        $(".addnewpostbtn").prop("disabled", false);
    } else {
        $(".addnewpostbtn").prop("disabled", true);
    }
}

这适用于普通文本区域，请参见此处：http：//jsfiddle.net/QA22X/

但是当使用CKEditor时，它不起作用。

我已经做了研究，但找不到任何有用的东西。

我看到了这个并尝试了一下：

    // check if the newpost text area in empty on page load and also input change
$(document).ready(function(){
    disableNewPost();
    var e = CKEditor.instances['#newpost']
    e.on( 'keyup', function( event ) {
    disableNewPost();
    });
});
// disable new post submit button if the new post ckeditor is empty
function disableNewPost() {
    var value = CKEDITOR.instances['#newpost'].getData();
    if ($(value).length > 0) {
        $(".addnewpostbtn").prop("disabled", false);
    } else {
        $(".addnewpostbtn").prop("disabled", true);
    }
}

但这也行不通。

对此有任何帮助吗？

Answer 1

如上所述，像这样的编辑器倾向于在其中包含空元素，或者返回包装元素内的内容，因此该值永远不会为空，即使它看起来是空的。 如果在这种情况下是这种情况，那么这将有所帮助...

// disable new post submit button if the new post ckeditor is empty
function disableNewPost() {
    var value = CKEDITOR.instances['#newpost'].getData();
    if ($(value).text() == "") {
        $(".addnewpostbtn").prop("disabled", false);
    } else {
        $(".addnewpostbtn").prop("disabled", true);
    }
}

Answer 2

弓箭手的答案可能有效，但我认为这是另一个合理的解决方案

1. 当编辑器准备就绪并加载内容时，执行editor.resetDirty()（instanceready，setData回调或任何适合您的内容）
2. 创建一个setInterval()并在其中检查编辑器是否被editor.checkDirty()弄脏
3. 当它不脏时，做$(".addnewpostbtn").prop("disabled", false);或任何你需要
的东西
4. 如果是，做$(".addnewpostbtn").prop("disabled", true);或任何你需要的事情

你可以用标志和jquery缓存等对它进行相当多的性能调整，但基本的想法是使用CKEditorAPI来检查它是否脏（内容已更改）。此外，您可能还有其他变量用于脏检查，例如您的其他表单元素是否脏，但您可以弄清楚它们。