我有一个包含几个字段的 HTML 表单。其中之一是由 CKEditor 管理的文本区域。
当用户要提交表单时，我想检查他是否在所有字段中输入了值。
我知道如何检查 CKEditor 控件中是否有任何内容，但它可能是没有任何文本的“空”HTML 标记。
如何检查文本？
服务器端我正在使用 PHP 的 trim(strip_tags($content)) 之类的东西，所以我想在 JavaScript 中使用相同的东西。
使用 jQuery 的解决方案也可以使用。
【问题讨论】：
标签： javascript ckeditor fckeditor
这将起作用：
$("#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？
【讨论】：
.html() 就像一个魅力
我们使用原型，带有该库和以下附加功能：
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);
}
还要注意 &nbsp; 的测试 - 通常当编辑器显示为空时，它实际上包含如下内容：<p>&nbsp;</p>。
【讨论】：
CKeditor 有自己的内置函数，用于在文本编辑器中检索数据：
function CheckForm(theForm)
{
textbox_data = CKEDITOR.instances.mytextbox.getData();
if (textbox_data==='')
{
alert('please enter a comment');
}
}
【讨论】：
if (textbox_data === '')。
你可以使用下面的sn-p来检查ckeditor是否有一些文字。
var _contents = CKEDITOR.instances.editor1.document.getBody().getText();
if (_contents == '') {
alert('Please provide the contents.') ;
}
【讨论】：
这是一个老问题，但由于它是谷歌的首批结果之一，我认为更新 ckeditor 最新版本的答案会有所帮助，在我的例子中 ckeditor 5 版本 11.0.1
ckeditor 5 的问题是即使它/看起来是空的，在提交表单时，它并没有像您期望的那样发送空值，而是发送这个字符串：
<p> </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);
});
});
【讨论】：
是从 NBSP_FILLER() 生成的，但是这些机器人功能在编辑器实例上不起作用！
<script>
CKEDITOR.replace('messagechat');
var feedback = CKEDITOR.instances.messagechat.document.getBody().getChild(0).getText();
// get Data
alert(feedback);
</script>
【讨论】：