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

Question

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

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

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

如何检查文本？

服务器端我使用类似PHP的trim(strip_tags($content))的东西，所以我想在JavaScript中也有同样的东西。

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

Answer 1

这将起作用：

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

它将仅包含文本，而不包含任何 html 标签。

更新

它绝对可以在CKEditor演示页面上运行。使用 Firefox 和 Firebug，进入 Firebug 控制台，然后输入：

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

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

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

它应该等于 1。如果它是 0，则您的选择器是错误的。

更新2

同样，我的代码仍然正确，并且它仍然可以在该页面上运行。您只需要正确的选择器。在您链接到的页面上，它是一个 ID 为 cke_editor1 的 。该特定页面不使用 jQuery，因此需要一些额外的工作来证明该示例有效。安装 FireQuery，“jqueryify”页面，然后在 Firebug 控制台中执行此操作（请注意，您必须使用 < code>jQuery 而不是 $ 这就是 FireQuery 的工作原理）。

jQuery("#cke_editor1 iframe").contents().find("body").text();

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

还是 </code> 创建 CKEditor 并不重要。只要能选择CKEditor注入到DOM中的<code><iframe></code>，就可以使用<code>.contents().find("body").text()</code>获取该 iframe 的文本。你测试过你的jquery选择器来看看是否<code>.length == 1</code>吗？

Answer 2

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

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

文档

Answer 3

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

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

Answer 4

CKEditor 5 - 经典编辑器

这是一个老问题，但是，由于它是谷歌的第一个结果之一，我认为更新最新版本的ckeditor的答案会很有帮助，在我的例子中是ckeditor 5版本11.0。 1

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

<p> </p>

这不是您想要的，尤其是当您想在服务器端设置一些验证规则时。

为了避免这个头痛，我使用了这段基于 light-flight 答案：

$(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);
        });
});

Answer 5

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

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

Answer 6

我们在 CKEditor 5 中处理带有嵌入图片的长文本，并且长文档的函数 editor.getData() 非常繁重。每次更改时都调用它来确保编辑器是否为空，这太慢了。

所以这是我的解决方案：

isEditorEmpty(editor) {
    // Get root node of editor document
    const root = editor.model.document.getRoot();
    
    // Root node is empty
    if (root.childCount === 0 || root.isEmpty) {
        return true;
    }
    
    // Root contains more then one initial paragraph 
    if (root.childCount >= 2 ) {
        return false
    }

    // Root contains one empty paragraph or one node with content
    return !editor.getData();
}

// Initialization and event binding
ClassicEditor.create( el, config )
    .then( editor => {
        editor.model.document.on('change:data', () => {
            if ( isEditorEmpty(editor) ) {
                doSomething_itIsEmpty();
            } else {
                doSomethingElse_itHasContent();
            }
        });
    })
; 

希望对您有所帮助。请参阅 isEmpty 文档 的详细信息文档节点。

Answer 7

我们使用原型，以及该库和以下附加内容：（

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

感谢 Tobie Langel< /a>)

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

function editorEmpty(instanceName){

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

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

还要注意   的测试 - 通常当编辑器显示为空时，它实际上包含类似于：

 

。

Answer 8

您可以通过首先更新所有实例来检查该字段是否有任何内容，首先，创建一个函数来执行此操作：

function updateInstances(){
    for( instance in CKEDITOR.instances )`
CKEDITOR.instances[instance].updateElement();
}

然后，在提交时，

只需调用 updateInstances() 函数，之后您可以测试该字段通常就像，

var fieldValue = $.trim($(document).find('textarea#field_ID').val());
if(fieldValue.length != 0){
//your code
}