Как проверить, есть ли у CKEditor какой-то текст?
У меня есть HTML-форма с несколькими полями. Один из них - текстовое поле, управляемое CKEditor.
Когда пользователь хочет отправить форму, я хочу проверить, вводит ли он значения во всех полях.
Я знаю, как я могу проверить, имеет ли элемент управления CKEditor что-нибудь в нем, но это могут быть "пустые" HTML-теги без текста.
Как проверить текст?
Серверная часть Я использую что-то вроде PHP trim (strip_tags ($ content)), поэтому я хотел бы иметь то же самое в JavaScript.
Решение с использованием jQuery также можно использовать.
Ответы
Ответ 1
Это будет работать:
$("#editorContainer iframe").contents().find("body").text();
Это будет содержать только текст и ни один из html-тегов.
UPDATE
Он определенно работает на демонстрационной странице CKEditor. Используйте 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. Создавать ли ваш CKEditor из <div>
или <textarea>
не важно. Пока вы можете выбрать <iframe>
, который CKEditor вводит в DOM, вы можете использовать .contents().find("body").text()
, чтобы получить текст этого iframe. Вы проверили свой селектор jquery, чтобы узнать, есть ли .length == 1
?
Ответ 2
CKeditor имеет собственную встроенную функцию для извлечения данных в текстовом редакторе:
function CheckForm(theForm)
{
textbox_data = CKEDITOR.instances.mytextbox.getData();
if (textbox_data==='')
{
alert('please enter a comment');
}
}
Документация
Ответ 3
Вы можете использовать следующий фрагмент, чтобы проверить, есть ли у ckeditor какой-либо текст.
var _contents = CKEDITOR.instances.editor1.document.getBody().getText();
if (_contents == '') {
alert('Please provide the contents.') ;
}
Ответ 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(/^( )+$/i) == 0);
}
Заметьте также тест для
- часто, когда редактор кажется пустым, он фактически содержит что-то вроде: <p> </p>
.
Ответ 5
CKEditor 5 - классический редактор
Это старый вопрос, но, поскольку он является одним из первых результатов в Google, я думаю, что было бы полезно обновить ответ для последних версий ckeditor, в моем случае ckeditor 5 версии 11.0.1
Проблема с ckeditor 5 даже в том случае, если он/выглядит пустым, при отправке формы он не отправляет пустое значение, как вы могли ожидать, а вместо этого отправляет следующую строку:
<p> </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);
});
});
Ответ 6
Следующее сработало для меня. (Так как я использую встроенный ck-редактор)
var currentTxtText = CKEDITOR.instances['inline4'].document.getActive().getText();
if (currentTxtText == "") {
...
}