web-dev-qa-db-fra.com

Obtenir la valeur textarea d'un ckeditor textarea avec javascript

En ce qui concerne JS, je suis un apprenant et bien que j'ai passé de bonnes heures à lire des tutoriels, ce qui m'a beaucoup aidé, mais j'ai toujours du mal à comprendre comment je peux savoir ce qu'un utilisateur tape dans un éditeur de texte .

Ce que j'essaie de faire, c'est de faire en sorte que, lorsque quelqu'un tape dans la zone de texte, tout ce qu'il tape apparaît dans un div situé dans une autre partie de la page.

J'ai une simple saisie de texte qui fonctionne très bien, mais comme la zone de texte est un ckEditor, le code similaire ne fonctionne pas.

Je sais que la réponse est la suivante: Valeur textarea de l’API ckEditor mais je ne sais pas assez pour comprendre ce que je suis censé faire. Je suppose que personne n'a envie de m'aider?

Le code que je travaille est:

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

et

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

et

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

J'ai toujours du mal à comprendre exactement comment je découvre ce qu'est un l'utilisateur tape dans un ckeditor textarea.

Ok, c'est assez facile. En supposant que votre éditeur se nomme "editor1", cela vous donnera une alerte avec son contenu:

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

La partie la plus difficile détecte quand l'utilisateur tape. D'après ce que je peux dire, il n'y a pas réellement de soutien pour le faire (et je ne suis pas trop impressionné par la documentation fournie). Voir cet article: http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html

Au lieu de cela, je suggérerais de définir une minuterie qui mettra à jour continuellement votre deuxième div avec la valeur de textarea:

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

Cela semble bien fonctionner. Voici la chose entière pour plus de clarté:

<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>
100
Jere

Au moins à partir de CKEDITOR 4.4.5, vous pouvez configurer un écouteur pour chaque modification du contenu de l'éditeur, plutôt que d'exécuter un timer:

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

Je me rends compte que c'est peut-être trop tard pour le PO et que la réponse n'est pas correcte ou que je n'ai pas encore de vote, mais j'ai pensé mettre à jour le post pour les futurs lecteurs.

16
Lindsay

Simplement exécuter 

CKEDITOR.instances[elementId].getData();

avec l'élément id = id de l'élément affecté à l'éditeur.

8
itzmukeshy7

Vous pourriez intégrer une fonction sur JQuery

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

et en passant en paramètre l'identifiant d'élément ckeditor

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

Bien. Vous avez demandé à textarea d'obtenir de la valeur, mais dans votre exemple, vous utilisez une entrée. Quoi qu'il en soit, c'est parti:

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

Si vous voulez vraiment un textarea changer votre texte de type d'entrée à cette

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

J'espère que ça aide.

0
Rodrigo Manguinho