Obtener el valor de área de texto de un área de texto de ckeditor con javascript

ckeditor get value jquery

Question

Soy un aprendiz en lo que respecta a JS y, aunque he pasado unas horas leyendo los tutoriales, que me han ayudado muchísimo, pero sigo teniendo problemas para descubrir exactamente cómo averiguo qué está escribiendo un usuario en un área de texto de ckeditor. .

Lo que trato de hacer es tenerlo para que cuando alguien escriba en el área de texto, todo lo que escriban aparezca en un div en una parte diferente de la página.

Tengo una entrada de texto simple haciendo eso bien, pero como el área de texto es un ckEditor, el código similar no funciona.

Sé que la respuesta está aquí: ckEditor API textarea value, pero no sé lo suficiente como para descubrir lo que debo hacer. ¿No creo que a nadie le guste ayudarme?

El código que tengo trabajando es:

$(''#CampaignTitle'').bind("propertychange input", function() {
  $(''#titleBar'').text(this.value);
});

y

<label for="CampaignTitle">Title</label>
<input name="data[Campaign][title]" type="text" id="CampaignTitle" />

y

<div id="titleBar" style="max-width:960px; max-height:76px;"></div>

Answer 1

Sigo teniendo problemas para averiguar exactamente cómo averiguo qué está escribiendo un usuario en un área de texto de ckeditor.

Ok, esto es bastante fácil. Suponiendo que su editor se llame "editor1", esto le dará una alerta con su contenido:

alert(CKEDITOR.instances.editor1.getData());

La parte más difícil es detectar cuando el usuario escribe. Por lo que puedo decir, en realidad no hay soporte para hacer eso (y no estoy demasiado impresionado con la documentación por cierto). Vea este artículo: http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html

En su lugar, le sugiero que configure un temporizador que actualice continuamente su segundo div con el valor del área de texto:

timer = setInterval(updateDiv,100);
function updateDiv(){
    var editorText = CKEDITOR.instances.editor1.getData();
    $(''#trackingDiv'').html(editorText);
}

Esto parece funcionar bien. Aquí está todo para mayor claridad:

<textarea id="editor1" name="editor1">This is sample text</textarea>

<div id="trackingDiv" ></div>

<script type="text/javascript">
    CKEDITOR.replace( ''editor1'' );

    timer = setInterval(updateDiv,100);
    function updateDiv(){
        var editorText = CKEDITOR.instances.editor1.getData();
        $(''#trackingDiv'').html(editorText);
    }
</script>

Answer 2

Al menos a partir de CKEDITOR 4.4.5, puede configurar un oyente para cada cambio en el contenido del editor, en lugar de ejecutar un temporizador:

CKEDITOR.on("instanceCreated", function(event) {
    event.editor.on("change", function () {
        $("#trackingDiv").html(event.editor.getData());
    });
});

Me doy cuenta de que esto puede ser demasiado tarde para el PO, y no se muestra como la respuesta correcta ni tengo votos (todavía), pero pensé que actualizaría la publicación para futuros lectores.

Answer 3

Bien. Preguntaste acerca de obtener valor de textarea, pero en tu ejemplo estás usando una entrada. De todos modos, aquí vamos:

$("#CampaignTitle").bind("keyup", function()
{
    $("#titleBar").text($(this).val());
});

Si realmente deseaba un área de texto, cambie su texto de tipo de entrada a este

<textarea id="CampaignTitle"></textarea>

Espero eso ayude.

Answer 4

Puede integrar una función en JQuery

jQuery.fn.CKEditorValFor = function( element_id ){
  return CKEDITOR.instances[element_id].getData();
}

y pasando como un parámetro el id del elemento ckeditor

var campaign_title_value = $().CKEditorValFor(''CampaignTitle'');

Answer 5

Simplemente ejecuta

CKEDITOR.instances[elementId].getData();

con elemento id = id del elemento asignado al editor.

Answer 6

puede agregar el siguiente código: los datos del campo ckeditor se almacenarán en $ (''# ELEMENT_ID''). val () con cada clic. He usado el método y funciona muy bien. Los datos de campo de ckeditor se guardarán en tiempo real y estarán listos para ser enviados.

$().click(function(){
    $(''#ELEMENT_ID'').val(CKEDITOR.instances[''ELEMENT_ID''].getData());
});

Answer 7

var campaignTitle= CKEDITOR.instances[''CampaignTitle''].getData();