Как проверить, есть ли у 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(/^(&nbsp;)+$/i) == 0);
}

Заметьте также тест для   - часто, когда редактор кажется пустым, он фактически содержит что-то вроде: <p> </p>.

Ответ 5

CKEditor 5 - классический редактор

Это старый вопрос, но, поскольку он является одним из первых результатов в Google, я думаю, что было бы полезно обновить ответ для последних версий ckeditor, в моем случае ckeditor 5 версии 11.0.1

Проблема с ckeditor 5 даже в том случае, если он/выглядит пустым, при отправке формы он не отправляет пустое значение, как вы могли ожидать, а вместо этого отправляет следующую строку:

<p>&nbsp;</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(/&nbsp;|\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 == "") {
      ...
   }