Update div on keyup SOLVED

Hi,

I would like to update a div on keyup, but I'm struggling to get the following to work(update) on every char which is entered:

Until now I have modified the api.html example as follows:

<div "testcontent">

<input onclick="GetContents();" type="button" value="Get Editor Contents (XHTML)" />

I have these functions in the script area in my php file:

CKEDITOR.on( 'instanceReady', function( ev )
{
   // Show the editor name and description in the browser status bar.
   document.getElementById( 'eMessage' ).innerHTML = '<p>Instance "' + ev.editor.name + '" loaded.<\/p>';

   // Show this sample buttons.
   document.getElementById( 'eButtons' ).style.visibility = '';
});

function GetContents()
{
   // Get the editor instance that we want to interact with.
   var oEditor = CKEDITOR.instances.editor1;
   var content = oEditor.getData();
   document.getElementById( 'contentdiv' ).innerHTML = '<div style="border: 1px solid black">The Content: <br><br>' + content + '</div>';
}

Could someone give me a hint on how to do this in a reasonable way?
Thank you for your help.

Fri, 09/24/2010 - 11:20

beren

Joined: 25/11/2009

Posts: 9

Re: Update div on keyup

I think you need to use the "key" handler:

$('#editor').ckeditor(init_ckeditor, ckconfig);

var editor = $('#editor').ckeditorGet();

editor.on('key', function(ev){ GetContents(); });

P.S. Why does this piece of crap forum log me out every 5 seconds!

Fri, 09/24/2010 - 15:59

shiva

Joined: 23/09/2010

Posts: 4

Thank you for your help, but as I'm a total newbie to the ckeditor I'm not sure, where to put this code and how it should work. I tried several things but without success.

As it seems, this replaces the editor

   <script type="text/javascript">
      //<![CDATA[
      // Replace the <textarea id="editor"> with an CKEditor instance.
var editor = CKEDITOR.replace( 'editor' );

      //]]>
      </script>

but where to add this?:

$('#editor').ckeditor(init_ckeditor, ckconfig);
var editor = $('#editor').ckeditorGet();
editor.on('key', function(ev){ GetContents(); });

Can someone explain how this piece of code should be used?

Tue, 09/28/2010 - 11:42

shiva

Joined: 23/09/2010

Posts: 4

Re: Update div on keyup SOLVED

Yeah - as usual I can close my post by myself.... 8-) :idea:

The part mentioned in earlier posts of this topic has to be like this:

   <script type="text/javascript">
      //<![CDATA[
         var editor = CKEDITOR.replace( 'editor' );
         editor.on('key', function(ev){ GetContents(); });   
      //]]>
      </script>

For those who are wondering on how I got the solution:
I activated the Firebug Javascript Console which lists everything - and then I recognized an error message:

CKEDITOR.ckeditorGet is not a function
[Break on this error] -->\r\n

I removed this line et voilà. The div gets updated while typing.

And thanks to everyone who supported my in this topic.