Problème insertion JavaScript dans une instance CKEditor en cours d'exécution dans une boîte de dialogue jQuery-UI Boîte

Question

Voici ce qui se passe:

Je construis une application (en utilisant PHP, jQuery, etc.), dont une partie permet aux utilisateurs de modifier différents bits d'une page Web (en-tête, pied de page, contenu principal, barre latérale) en utilisant CKEditor.

Il est configuré de sorte que chaque bit modifiable possède un bouton "Modifier le contenu" en haut à droite qui, lors d'un clic, lance une instance de CKEditor dans une boîte de dialogue jQuery-UI. Une fois l'édition terminée, l'utilisateur peut cliquer sur le bouton «Mettre à jour les modifications» qui renvoie le contenu édité à la page principale et ferme le dialogue/CKeditor.

Tout cela fonctionne magnifiquement, sauf pour une chose. Si quelqu'un insère un code JavaScript, enveloppé dans des balises 'script', en utilisant le plugin HTML Insert pour CKEditor ou en allant sur 'Source' dans CKEditor et en plaçant le code dans la source, tout semble bien jusqu'à ce qu'ils cliquent sur 'Update Changes' bouton. Le JavaScript semble s'être inséré correctement, mais lorsqu'on clique sur 'Mettre à jour les changements', au lieu de fermer le dialogue et de le renvoyer dans le div où il appartient, ce que je reçois à la place est un écran tout blanc avec juste la sortie du JavaScript. Par exemple, un simple script 'Hello World' donne un écran blanc avec la chaîne 'Hello World' dans le coin supérieur gauche; Pour des scripts plus complexes, comme un appel d'API pour, par exemple, Aweber, qui génère un formulaire d'inscription à la newsletter, j'obtiens un écran tout blanc avec le formulaire résultant de l'appel API Aweber parfaitement rendu au milieu de l'écran. L'une des parties les plus déroutantes est que, sur ces pages, si je clique sur 'View Source', je n'ai absolument rien. Vide vide.

Voici tout mon code qui gère le lancement de l'instance CKEditor dans la boîte de dialogue jQuery-UI, et le passage des données modifiées de nouveau dans son div associé à un clic du bouton 'Mise à jour Changes:

$(function() 
{ 
    $('.foobar_edit_button') 
    .button() 
    .click(function() 
    { 
    var beingEdited = $(this).nextAll('.foobar_editable').attr('id'); 
    var content = $(this).nextAll('.foobar_editable').html(); 
    $('#foobar_editor').html(content); 
    $('#foobar_editor').dialog(
    { 
     open:function() 
     { 
     $(this).ckeditor(function() 
     { 
      CKFinder.SetupCKEditor(this, '<?php echo '/foobar/lib/editor/ckfinder/'; ?>'); 
     }); 
     }, 
     close:function() 
     { 
     $(this).ckeditorGet().destroy(); 
     }, 
     autoOpen: false, 
     width: 840, 
     modal: true, 
     buttons: 
     { 
     'Update Changes': function() 
     { 
      // TODO: submit changes to server via ajax once its completed: 
      for (instance in CKEDITOR.instances) 
      CKEDITOR.instances[instance].updateElement(); 

      var edited_content = $('#foobar_editor').html(); 
      $('#' + beingEdited).html(edited_content); 
      $(this).dialog('close'); 
     } 
     } 
    }); 
    $('#foobar_editor').dialog('open'); 
    }); 
}); 

Je suis toutes sortes de confus. Si quelqu'un peut me diriger dans la bonne direction, ce sera grandement apprécié.

Merci!

Answer 1

J'ai un problème similaire en utilisant ckeditor avec drupal. Comme vous le dites je peux entrer javascript dans ckeditor et il semble fonctionner la première fois. Cependant, quand il s'agit de mettre à jour le contenu, mon javascript semble être cassé. Une chose que je remarque qu'il semble ajuster la sortie et en particulier insère un espace après toutes les périodes.

Ma solution était de ne pas utiliser ckeditor lors de l'ajout ou la mise à jour de tout javascript dans le contenu.