Problem inserting JavaScript into a CKEditor Instance running inside a jQuery-UI Dialog Box
- by PlasmaFlux
Hello Overflowers!
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!
