Estoy usando ckeditor 4.6.2 y me he encontrado con un problema en el que si cambio los contenidos en el editor, no se envían al servidor a través de una llamada ajax.
Mi configuración es así:
#editor1 tiene ckeditor aplicado.#sendBtn Luego uso ajax para manejar el envío del formulario, presionando #sendBtn . La publicación funciona, pero si edité el contenido en #editor1 , envía el contenido original : lo que había en la carga de la página, no el contenido editado.
Encontré esta publicación ¿Cómo enviar ajax una entrada de área de texto de formulario desde CKEditor? . Agregué la respuesta aceptada antes de mi llamada ajax. Entonces mi jquery para manejar el envío se ve así:
$('#sendBtn').click(function(e) { e.preventDefault(); $('#sendBtn').prop( "disabled", true); var dataString = $("#emailForm").serialize(); /** * https://stackoverflow.com/questions/3256510/how-to-ajax-submit-a-form-textarea-input-from-ckeditor */ for ( instance in CKEDITOR.instances ) CKEDITOR.instances[instance].updateElement(); $.ajax({ url: "/admin/ajax/email", data: dataString, method: "POST", }).done(function(data) { // ... }); }); Si uso PHP para volcar los datos POST en /admin/ajax/email , muestra el contenido original, no la versión actualizada.
Lo extraño es que si ejecuto esto en la consola de mi navegador, devuelve true y luego todo parece funcionar:
for ( instance in CKEDITOR.instances ) CKEDITOR.instances[instance].updateElement();Entonces, ¿el problema es que el código anterior no se completa antes de que se realice la llamada ajax? ¿Cómo manejaría esto?
bueno un poco tarde
Como indica su referencia (muy útil), debe actualizar las instancias de CKEDITOR antes de tocar el formulario, así que:
$('#sendBtn').click(function(e) { e.preventDefault(); $('#sendBtn').prop( "disabled", true); // This before: for ( instance in CKEDITOR.instances ) CKEDITOR.instances[instance].updateElement(); // Then this: var dataString = $("#emailForm").serialize(); $.ajax({ url: "/admin/ajax/email", data: dataString, method: "POST", }).done(function(data) { // ... }); });