如何检查CKEditor中是不是有一些文字？

Posted 2023-02-16

【中文标题】如何检查CKEditor中是不是有一些文字？

【英文标题】：How to check whether CKEditor has some text in it?如何检查CKEditor中是否有一些文字？

【发布时间】：2011-03-17 16:13:03

【问题描述】：

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

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

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

如何检查文本？

服务器端我正在使用 php 的 trim(strip_tags($content)) 之类的东西，所以我想在 javascript 中使用相同的东西。

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

【参考方案1】：

这将起作用：

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

这将只包含文本，不包含任何 html 标记。

更新

它绝对适用于CKEditor demo page。使用 Firefox 和 Firebug，进入 Firebug 控制台，然后输入：

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

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

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

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

更新 2

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

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

简而言之，确保您有正确的选择器来访问您的 iframe。是从<div> 还是<textarea> 创建CKEditor 并不重要。只要可以选择CKEditor注入DOM的<iframe>，就可以使用.contents().find("body").text()获取那个iframe的文本。您是否测试过您的 jquery 选择器以查看是否为 .length == 1？

【讨论】：

似乎不起作用，即使我在控件中输入了一些文本，我也会得到一个空字符串。我尝试用#editor1 替换#editorContainer，因为那是textarea 的ID，但这也不起作用。

Demo 替换了 DIV，而我的代码替换了 TEXTAREA。你能告诉我在 CKEditor 示例页面上使用哪个选择器：nightly.ckeditor.com/latest/ckeditor/_samples/… 吗？这将帮助我确定我应该在我的代码中使用什么。谢谢。

我知道这个问题很老，但我很好奇什么会选择 val()，因为 .text() 只是提取文本，但没有 html 或格式。

@SamuelMeacham - 很棒的答案兄弟和@Trip - 如果需要完整的 HTML

，.html() 就像一个魅力

【参考方案2】：

我们使用原型，带有该库和以下附加功能：

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）

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

function editorEmpty(instanceName)

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

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

还要注意   的测试 - 通常当编辑器显示为空时，它实际上包含如下内容：<p> </p>。

【参考方案3】：

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

function CheckForm(theForm) 

    textbox_data = CKEDITOR.instances.mytextbox.getData();
    if (textbox_data==='')
    
        alert('please enter a comment');
    

Documentation

【讨论】：

我想你的意思是if (textbox_data === '')。

【参考方案4】：

你可以使用下面的sn-p来检查ckeditor是否有一些文字。

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

【讨论】：

是的。我在最后添加了 .trim() 。 .getText().trim();

【参考方案5】：

CKEditor 5 - 经典编辑器

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

ckeditor 5 的问题是即使它/看起来是空的，在提交表单时，它并没有像您期望的那样发送空值，而是发送这个字符串：

<p>&nbsp;</p>

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

为了避免这个头疼，我使用这个基于light-flight 答案的sn-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);
        );
);

【讨论】：

我想有一种更直观的方法来检查这一点，在 API 中有一个叫做 getDataWithoutFiller() 的东西，而

【参考方案6】：

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

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

【讨论】：

虽然此代码可能会解决问题，但一个好的答案还应该解释代码如何/为何提供帮助。