I have a tinyMCE textarea #frmbody and am using the jquery instance of it.

<textarea class="tinymce" name="frmbody" id="frmbody" cols="30" rows="20"></textarea>

I'm trying to get the contents of the textarea as the user types.

$("#frmbody").live('keyup', function(e) {
    alert("keyup");
});

The code above is not working and I'm not sure why. If I remove the tinyMCE instance, the code above works fine. Any ideas?

I have a tinyMCE textarea #frmbody and am using the jquery instance of it.

<textarea class="tinymce" name="frmbody" id="frmbody" cols="30" rows="20"></textarea>

I'm trying to get the contents of the textarea as the user types.

$("#frmbody").live('keyup', function(e) {
    alert("keyup");
});

The code above is not working and I'm not sure why. If I remove the tinyMCE instance, the code above works fine. Any ideas?

• javascript
• jquery
• tinymce
• wysiwyg

Share Improve this question Follow asked Mar 27, 2012 at 18:31 MikeMike 98033 gold badges1515 silver badges3030 bronze badges 4

• Don't know, but chances are tinyMCE creates (or re-creates) a different textarea in which you actually type, so #frmbody never has any key activity. – Mikhail Commented Mar 27, 2012 at 18:33
• I was thinking that, too. I'll keep digging and searching. Thanks – Mike Commented Mar 27, 2012 at 18:34
• The only other thing though is when i check the $_POST values, frmbody is there. – Mike Commented Mar 27, 2012 at 18:36
• tinyMCE hides your textarea and handles all the typing itself. When the form posts, it copies the created HTML back into your textarea. However, it has a large variety of its own events you can hook into. – Dave Commented Mar 27, 2012 at 18:38

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

That's because an instance of TinyMCE isn't a true textarea, so keyup events aren't detected. Try the onchange callback instead.

You can make tinyMCE own listener by: http://www.tinymce./wiki.php/API3:event.tinymce.Editor.onKeyUp

or write your own and use built-in function getContent: http://www.tinymce./wiki.php/API3:method.tinymce.Editor.getContent

One could just grab the contents of the editor using :

tinymce.activeEditor.getContent();

If you want to attach an onchange event, according to this page, http://www.tinymce./wiki.php/api4:class.tinymce.Editor, create the editor using the following code :

var ed = new tinymce.Editor('textarea_id', { 
    init_setting_item: 1,
    ...
}, tinymce.EditorManager);

ed.on('change', function(e) {
    var content = ed.getContent();
    $("#textarea_id").val(content); // update the original textarea with the content
    console.log(content);
});

ed.render();

Please note that onchange is fire when the user unfocuses, press enter, or press a toolbar button instead of every keystroke.

It is very easy to write an own handler and assign it to the editor iframe document. There are tinymce handlers for various events already defined like keyUp

Here is the standard way to assign an own handler to the editor iframe document

var my_handler = function(event) {
    alert('my handler fired!');
};

var ed = tinymce.get('my_editor_id');
$(ed.getDoc()).bind('keyup', my_handler);

TinyMCE hides the Text Area and creates a html container. If you write content in the box its a iFrame with the name "TEXTAREANAME_ifr".

So try this:

$("#frmbody_ifr").live('keyup', function(e) {
    alert("keyup");
});

I think as Thariama already said the EventHandler from TinyMCE would be the best way.