javascript - example - ckeditor tutorial español

¿Cómo comprobar si CKEditor tiene algún texto?

Question

Tengo un formulario HTML con algunos campos. Uno de ellos es un textarea gestionado por CKEditor.

Cuando el usuario desea enviar el formulario, quiero verificar si ingresó valores en todos los campos.

Sé cómo puedo verificar si el control CKEditor tiene algo en él, pero podría ser etiquetas HTML "vacías" sin texto.

¿Cómo verifico el texto?

Del lado del servidor, estoy usando algo como el recorte de PHP (strip_tags ($ contenido)), así que me gustaría tener lo mismo en JavaScript.

Una solución utilizando jQuery también sería utilizable.

Answer 1

CKEditor 5 - Editor clásico

Esta es una pregunta antigua pero, dado que es uno de los primeros resultados en Google, creo que sería útil actualizar la respuesta para las últimas versiones de ckeditor, en mi caso ckeditor 5 versión 11.0.1

El problema con ckeditor 5 es incluso cuando está / parece vacío, al enviar el formulario, no envía un valor vacío como se puede esperar, sino que envía esta cadena:

<p>&nbsp;</p>

No es lo que desea, especialmente cuando desea establecer algunas reglas de validación en el lado del servidor.

Para evitar este dolor de cabeza, utilizo este fragmento de código basado en light-flight respuesta de 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 2

CKeditor tiene su propia función incorporada para recuperar datos en un editor de texto:

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

Documentation

Answer 3

Esto funcionará:

$("#editorContainer iframe").contents().find("body").text();

Eso contendrá solo el texto, y ninguna de las etiquetas html.

ACTUALIZAR

Definitivamente funciona en la página de demostración de CKEditor . Use Firefox y Firebug, vaya a la consola de Firebug y escriba:

$("#demoInside iframe").contents().find("body").text();

La consola imprimirá el texto en el editor, sin etiquetas html. Asegúrese de tener el selector correcto en su aplicación particular. Puedes probar tu selector de esta manera:

$("#demoInside iframe").contents().find("body").length;

Eso debería ser igual a 1. Si es 0, su selector está equivocado.

ACTUALIZACIÓN 2

Una vez más, mi código sigue siendo correcto y aún funciona en esa página. Solo necesitas el selector correcto. En la página a la que has vinculado, es un <span> con id cke_editor1 . Esa página en particular no hace uso de jQuery, por lo que requiere algún trabajo adicional para probar que este ejemplo funciona. Instale FireQuery , "jqueryify" la página, y luego haga esto en la consola de Firebug (tenga en cuenta que debe usar jQuery y no $ . Así funciona FireQuery)

jQuery("#cke_editor1 iframe").contents().find("body").text();

En resumen, asegúrese de tener el selector correcto para llegar a su iframe . Si creas tu CKEditor desde un <div> o un <textarea> no es importante. Mientras pueda seleccionar el <iframe> que CKEditor inyecta en el DOM, puede usar .contents().find("body").text() para obtener el texto de ese iframe. ¿Has probado tu selector de jquery para ver si .length == 1 ?

Answer 4

Puede usar el siguiente fragmento de código para verificar si el ckeditor tiene algún texto.

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

Answer 5

Usamos prototipo, con esa biblioteca y la siguiente adición:

Element.addMethods({  
  getInnerText: function(element) {
    element = $(element);
    return element.innerText && !window.opera ? element.innerText
      : element.innerHTML.stripScripts().unescapeHTML().replace(/[/n/r/s]+/g, '' '');
  }
});

(Gracias a Tobie Langel )

Pude usar la siguiente función para determinar si algún texto real estaba dentro de CKEditor:

function editorEmpty(instanceName){

    var ele = (new Element(''div'')).update(CKEDITOR.instances[instanceName].getData()); 

    return (ele.getInnerText() == '''' || innerText.search(/^( )+$/i) == 0);
}

Tenga en cuenta la prueba para   también, a menudo, cuando el editor aparece vacío, en realidad contiene algo como: <p>&nbsp;</p> .