Question

i have (2) textareas. one is a regular textarea the other is and the reference for an (F)CKEditor. when a user types in the (F)CKEditor i want each keypress to be triggered and shown in the regular textarea. how do i do this?

this is my non-working code:

        CKEDITOR.instances.ckeditor1.on('key', function (e)
        {
            var je = $.Event("keyup");
            je.which = e.data.keyCode;
            textArea.bind(je, private.bindKeyup);
            textArea.trigger(je);
        });

Answer 1

I can see a couple of reasons why your example isn’t working.

• I’m pretty sure the key is added into a textarea during the keypress event. It might be the keydown. But it’s definitely not the keyup event.
• the keyCode that comes with the ckeditor’s event can’t be passed straight down to the textarea. it has info in it about whether the alt,ctrl and shift keys are pressed as well. You’ll need to strip these out first. (see my sample below where I create the rawKey variable)

You’ll also probably want to remove the textarea.bind() call from the event handler. Putting it in there means that you will bind another copy of the event handler to the textarea every time a key is pressed in the ckeditor. probably not what you want.

Anyway, here is my sample

function onEditorKeyEvent(event) {
  var rawKey = event.data.keyCode & ~(CKEDITOR.SHIFT | CKEDITOR.CTRL | CKEDITOR.ALT);

  var eventData =
  {
    altKey: !!(event.data.keyCode & CKEDITOR.ALT),
    ctrlKey: !!(event.data.keyCode & CKEDITOR.CTRL),
    shiftKey: !!(event.data.keyCode & CKEDITOR.SHIFT),
    keyCode: rawKey,
    which: rawKey
  };

  var myTextbox = $('#myTextBox');
  triggerKeyEvents(eventData, myTextbox);
}

function triggerKeyEvents(eventData, elementToTriggerOn)
{
  // these key events can generate an extra keyUp event for some reason if they are done in the same thread.
  //so we just do them on a different thread :-)
  setTimeout(this.callback(function () {
    var keydownEvent = jQuery.Event('keydown', eventData);
    elementToTriggerOn.trigger(keydownEvent);

    if (!keydownEvent.isDefaultPrevented()) {
      elementToTriggerOn.trigger(jQuery.Event('keypress', eventData));
    }

    elementToTriggerOn.trigger(jQuery.Event('keyup', eventData));
  }), 1);
}