CKEditor 5-经典编辑器

Question

我有一个包含几个字段的HTML表单。其中一个是由CKEditor管理的textarea。

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

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

如何查看文字？

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

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

Answer 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>的{{1}}。该特定页面不使用jQuery，因此需要一些额外的工作来证明此示例有效。安装FireQuery，“jqueryify”页面，然后在Firebug控制台中执行此操作（请注意，您必须使用cke_editor1而不是jQuery。这就是FireQuery的工作原理。

简而言之，确保您拥有正确的选择器来访问您的iframe 。是否从jQuery("#cke_editor1 iframe").contents().find("body").text();或<div>创建CKEditor并不重要。只要您可以选择CKEditor注入DOM的<textarea>，您就可以使用<iframe>来获取该iframe的文本。您是否测试了jquery选择器以查看是否.contents().find("body").text()？

Answer 2

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

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

Documentation

Answer 3

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

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

Answer 4

我们使用原型，使用该库并添加以下内容：

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(/^(&nbsp;)+$/i) == 0);
}

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

Answer 5

CKEditor 5-经典编辑器

这是一个古老的问题，但是，由于它是google中的第一个结果，因此我认为更新ckeditor的最新版本的答案会很有帮助，在我的情况下， ckeditor 5版本11.0.1 < / strong>

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 6

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

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

如何检查CKEditor中是否包含一些文本？

6 个答案:

CKEditor 5-经典编辑器