CODEWITHSUNDEEP
phpjavascriptjqueryckeditorjquery-ui-dialog
PlasmaFlux
PlasmaFlux

Reputation: 323

Problem inserting JavaScript into a CKEditor Instance running inside a jQuery-UI Dialog Box

Here's what's going on:

I'm building an app (using PHP, jQuery, etc), part of which lets users edit various bits of a web page (Header, Footer, Main Content, Sidebar) using CKEditor.

It's set up so that each editable bit has an "Edit Content" button in the upper right that, on click, launches an instance of CKEditor inside a jQuery-UI Dialog box. After the user is done editing, they can click an 'Update Changes' button that passes the edited content back off to the main page and closes the Dialog/CKeditor.

It's all working magnificently, save for one thing. If someone inserts any JavaScript code, wrapped in 'script' tags, using either the Insert HTML Plugin for CKEditor or by going to 'Source' in CKEditor and placing the code in the source, everything seems okay until they click the 'Update Changes' button.

The JavaScript appears to be inserting properly, but when 'Update Changes' is clicked, instead of the Dialog closing and passing the script back into the div where it belongs, what I get instead is an all-white screen with just the output of the JavaScript. For example, a simple 'Hello World' script results in a white screen with the string 'Hello World' in the upper left corner; for more intricate scripts, like an API call to, say Aweber, that generates a newsletter signup form, I get an all-white screen with the resulting form from the Aweber API call perfectly rendered in the middle of the screen.

One of the most confusing parts is that, on these pages, if I click 'View Source', I get absolutely nothing. Blank emptiness.

Here's all my code that handles the launching of the CKEditor instance inside the jQuery-UI Dialog, and the passing of the edited data back into its associated div on click of the 'Update Changes' button:

$(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');
  });
});

I'm all sorts of confused. If anyone can point me in the right direction, it will be greatly appreciated.

Thanks!

Upvotes: 0

Views: 1512

Answers (1)

Dan
Dan

Reputation: 11

I am having a similar problem using ckeditor with drupal. As you say I can enter javascript in ckeditor and it seems to work first time. However when it comes to updating the content my javascript seems to be broken. One thing I notice it that it seem to adjust the output and in particular inserts a space after any periods.

My solution was to not use ckeditor when adding or updating any javascript in the content.

Upvotes: 1

Related Questions