我有一个包含几个字段的 HTML 表单。其中之一是由 CKEditor 管理的文本区域。
当用户想要提交表单时，我想检查他是否在所有字段中输入了值。
我知道如何检查 CKEditor 控件中是否有任何内容，但它可能是“空”HTML 标记，其中没有任何文本。
如何检查文本？
服务器端我使用类似PHP的trim(strip_tags($content))的东西，所以我想在JavaScript中也有同样的东西。
使用 jQuery 的解决方案也是可用的。
这会起作用：
$("#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
同样，我的代码仍然正确，并且它仍然可以在该页面上运行。您只需要正确的选择器。在您链接到的页面上，它是一个
<span>cke_editor1jQuery$jQuery("#cke_editor1 iframe").contents().find("body").text();
简而言之，确保您有正确的选择器来访问您的 iframe。无论您是从
<div><textarea><iframe>.contents().find("body").text().length == 1CKeditor 有自己的内置函数，用于在文本编辑器中检索数据：
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的答案会很有帮助，就我而言是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);
});
});
<script>
CKEDITOR.replace('messagechat');
var feedback = CKEDITOR.instances.messagechat.document.getBody().getChild(0).getText();
// get Data
alert(feedback);
</script>
我们使用原型、该库和以下附加内容：
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);
}
还要注意
<p> </p>您可以通过首先更新所有实例来检查该字段是否有任何内容，首先，创建一个函数来执行此操作：
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
}
我们在 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 属性的文档。