Javascript 如何检查CKEditor中是否有文本？

我有一个带有几个字段的HTML表单。其中一个是由CKEditor管理的文本区域

当用户想要提交表单时，我想检查他是否在所有字段中输入了值

我知道如何检查CKEditor控件中是否有任何内容，但它可能是没有任何文本的“空”HTML标记

如何检查文本

服务器端我使用的是类似PHP的trim（strip_tags（$content）），所以我希望在JavaScript中使用相同的东西

使用jQuery的解决方案也可以使用。

这将起作用：

$("#editorContainer iframe").contents().find("body").text();

它将只包含文本，而不包含任何html标记

更新

它肯定能在最短的时间内发挥作用。使用Firefox和Firebug，转到Firebug控制台，然后键入：

$("#demoInside iframe").contents().find("body").text();

控制台将在编辑器中打印文本，没有html标记。确保您的特定应用程序中的选择器正确。您可以这样测试选择器：

$("#demoInside iframe").contents().find("body").length;

这应该等于1。如果为0，则表示选择器错误

更新2

同样，我的代码仍然正确，并且在该页面上仍然有效。您只需要选择正确的选择器。在您链接到的页面上，它是一个id为cke_editor1的

。该特定页面没有使用jQuery，因此需要进行一些额外的工作来证明该示例的有效性。安装“jqueryify”页面，然后在Firebug控制台中执行此操作（注意，您必须使用

jQuery

，而不是

$

。FireQuery就是这样工作的）

---

简而言之，确保您有正确的选择器来访问iframe。是否从

或

创建CKEditor并不重要。只要您可以选择CKEditor注入DOM的

，就可以使用

.contents（）.find（“body”）.text（）

获取该iframe的文本。您是否测试了jquery选择器以查看

.length==1

？

我们使用prototype以及该库和以下添加项：

Element.addMethods({  
  getInnerText: function(element) {
    element = $(element);
    return element.innerText && !window.opera ? element.innerText
      : element.innerHTML.stripScripts().unescapeHTML().replace(/[\n\r\s]+/g, ' ');
  }
});

（感谢）

我能够使用以下函数来确定是否有任何实际文本在CKEditor中：

function editorEmpty(instanceName){

    var ele = (new Element('div')).update(CKEDITOR.instances[instanceName].getData()); 

    return (ele.getInnerText() == '' || innerText.search(/^( )+$/i) == 0);
}

---

请注意

的测试-通常当编辑器显示为空时，它实际上包含如下内容：

CKeditor有自己的内置函数，用于在文本编辑器中检索数据：

function CheckForm(theForm) 
{
    textbox_data = CKEDITOR.instances.mytextbox.getData();
    if (textbox_data==='')
    {
        alert('please enter a comment');
    }
}

---

您可以使用以下代码段检查ckeditor是否有一些文本

var _contents = CKEDITOR.instances.editor1.document.getBody().getText();
if (_contents == '') {
    alert('Please provide the contents.') ;
}

CKEditor 5-经典编辑器 这是一个老生常谈的问题，但由于这是谷歌的首批搜索结果之一，我认为更新最新版本的ckeditor的答案会有所帮助，在我的例子中，ckeditor 5版本11.0.1

ckeditor 5的问题是，即使它是/看起来是空的，在提交表单时，它也不会像您预期的那样发送空值，而是发送以下字符串：

<p>&nbsp;</p>

CKEDITOR.replace（'messagechat'）；
var feedback=CKEDITOR.instances.messagechat.document.getBody（）.getChild（0.getText（）；
//获取数据
警惕（反馈）；

似乎不起作用，即使在控件中键入了一些文本，我也会得到一个空字符串。我尝试用#editor1替换#editorContainer，因为这是textarea的ID，但也不起作用。Demo替换DIV，而我的代码替换textarea。您能告诉我在CKEditor示例页上使用哪个选择器吗？这将帮助我确定我应该在代码中使用什么。谢谢。我知道这个问题很老了，但我很好奇什么会选择val（），因为.text（）只提取文本，而不提取html或格式。@SamuelMeacham-真棒的答案bro和@Trip-

.html（）

如果需要完整的HTMLI我想你的意思是

如果（textbox\u data==''）

。是的。我在末尾添加了.trim（）。getText（）.trim（）；我想有一种更直观的方法来检查这一点，在API中有一种称为getDataWithoutFiller（）的东西，

是从NBSP_FILLER（）生成的，但是这些bot函数在编辑器实例上不起作用！虽然这段代码可能会解决问题，但一个好的答案也应该解释代码如何/为什么会有帮助。

<p>&nbsp;</p>

$(document).ready(function() {

    var editorContainer = document.querySelector('#editor');

    var check_if_empty = function(val) {

        return $.makeArray($(val)).every(function(el) {

            return el.innerHTML.replace(/ |\s/g, '').length === 0;
        });
    };

    var clear_input_if_empty_content = function(input) {

        var $form = $(input).parents('form');

        $form.on('submit', function() {

            if (check_if_empty($(input).val())) {

                $(input).val('');
            }
        });
    };

    ClassicEditor.create( editorContainer )
        .then(function(editor) {
            clear_input_if_empty_content(editorContainer)
        })
        .catch(function(error) {
            console.log(error);
        });
});

<script>
CKEDITOR.replace('messagechat');

var feedback = CKEDITOR.instances.messagechat.document.getBody().getChild(0).getText(); 
// get Data
alert(feedback);
</script>