Question

I’m building a little fake html/css mobile phone which automatically inserts data from a several input boxes on a page like so: (the phone is inserted using an iframe..(don’t ask)..)

$('#mgSiteDescription').bind('keyup', function() { 
   var iframedoc = $('.liveDemoFrame').get(0).contentDocument; 
   $(iframedoc).find('#header h2').html($(this).val()); 
});

This works absolutely fine for my input fields.

Now, I’m using CKEditor for my textareas which brings me to my problem. As the textarea isn’t being updated live on the page, my keyup event isn’t working and therefore, not updating my fake phone. How can I adjust CKEditor so that it updates the hidden textarea? Or maybe even access CKEditor’s iframe and pull that data out?

Thanks.

Answer 1

Update:

I’ve managed to get a keyup function working through CKEditor and it even removes the content from my fake mobile phone iFrame. I just don’t know how to then insert the value/data of CKeditor into my iframe..if that makes sense?

    CKEDITOR.instances.mgAddHomePage.on('contentDom', function() {
        CKEDITOR.instances.mgAddHomePage.document.on('keyup', function(event) {

            var iframedoc = $('.liveDemoFrame').get(0).contentDocument; 
            $(iframedoc).find('#content').html($(this).val());      

        });
    });

It’s this bit I need to update I’m guessing?

html($(this).val())

Any ideas with what?

Edit:

So I got it working near enough to how I intended. Here’s the final code for anyone in a similar position to me:

    CKEDITOR.instances.mgAddHomePage.on('contentDom', function() {
        CKEDITOR.instances.mgAddHomePage.document.on('keyup', function(event) {
            var iframedoc = $('.liveDemoFrame').get(0).contentDocument; 
            $(iframedoc).find('#content').html(CKEDITOR.instances.mgAddHomePage.getData());         
        });
    });

Even if you’re not using iFrames, that’ll still work. Just hack out the jquery iframe stuff.