Get content with tinyMCE?

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

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


I am trying to get the content of a textbox as a custom type.

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


The code above doesn't work and I'm not sure why. If I delete the tinyMCE instance the code above works fine. Any ideas?


source to share

5 answers

This is because the TinyMCE instance is not a true text field, so no keyup events are detected. Try onchange callback instead .



You can make your own tinyMCE listener:

or write your own and use the built-in getContent function:



One can simply grab the content of the editor using:



If you want to add an onchange event, according to this page , create an 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



Note that onchange is fire, when the user is not focused, press enter or press a button on the toolbar instead of every key press.



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

Here is the standard way to assign custom handler for iframe document editor

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 an html container. If you write content in a box, its an iFrame named "TEXTAREANAME_ifr"


So try this:

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


I think, as Tariama already said, TinyMCE's EventHandler would be the best way.



All Articles