I have a small function that allows a user to click a button under a textarea, and have the relevant text inserted (this works in conjunction with the jQuery textrange plugin).

However, because I'm using the TinyMCE editor in my plugin, this only works in 'Text' mode, not 'Visual'.

I've looked at the source, but can't figure out how to make it work for both. Does anybody know how I can insert text in to the editor when in 'Visual' mode? Thanks.


    var button_text = {} // The text to insert for each button click

    button_text['insert_event_name']            = 'event_name';
    button_text['insert_event_date']            = 'event_date';
    button_text['insert_event_start_time']      = 'event_start';
    button_text['insert_event_finish_time']     = 'event_finish';
    button_text['insert_event_location']        = 'event_location';
    button_text['insert_event_address_inline']  = 'event_address_inline';
    button_text['insert_event_address_blick']   = 'event_address_block';

    $('.inserter', '#event-desc-container').on('click', function(){

        var button = $(this).attr('name'),
            text = '['+button_text[button]+']',
            textarea = $('textarea#event_desc', '#event-desc-container');

        /** Get the location (start position) of where the cursor is in the textarea */
        var start = textarea.textrange('get', 'start');

        /** Add the relevent button text to the start position */
        textarea.textrange('replace', text).trigger('updateInfo').focus();

        /** The newly added text will be selected, so work out the end position of that selection */
        var end = textarea.textrange('get', 'end');

        /** Move the cart to the end position, so that no text is highlighted */
        textarea.textrange('set', end, 0).trigger('updateInfo').focus();


  • Link to the jQuery plugin?
    – kaiser
    Jul 10, 2013 at 12:59
  • Anyway, this question is about Javascript and jQuery and off topic on this site.
    – kaiser
    Jul 10, 2013 at 13:07
  • Fair enough - As I uses TinyMCE with Wordpress, I tend to associate it with that by default.
    – David Gard
    Jul 10, 2013 at 13:19

1 Answer 1


To test this, I've added a button to one of the other meta boxes on the post edit/new screen, with an id of addtxtbtn. On click, I grabbed the textareas inside the #wp-content-editor-container, which is the default wrapper for the default WP Editor instance. You might need to alter this, if you got different MarkUp. The rest is taken from the demo on GitHub - in case this is the plugin you were talking about.

( function($) {
    $( '#addtxtbtn' ).on( 'click', function( e ) {
        var textarea = $( '#wp-content-editor-container' ).find( 'textarea' );
        textarea.bind( 'updateInfo keyup mousedown mousemove mouseup', function() {
            var range = $( this ).textrange();
            console.log( range );
        } );
    } );
} )( jQuery );


So in short: To add text to the "Text"-textarea, do the following:

$( '#wp-content-editor-container' ).find( 'textarea' ).val( 'Some default Text' );


To add text to the "TinyMCE"/"Visual" editor, do the following:

tinyMCE.activeEditor.execCommand( 'mceInsertContent', false, 'Some default Text' );

If you need to get the content from TinyMCE, you can use the following:

// Raw
tinyMCE.activeEditor.getContent( { format : 'raw' } );
// HTML contents:

To get content from a specific TinyMCE instance (if more than one would be possible), use:

tinyMCE.get( 'some-id' ).getContent();
  • That is the plugin I was talking about, which is irrelevant to the question. I can already use that when in 'Text' mode, but the issue is in 'Visual' mode - no textarea is found, and therefore the text is not inserted. Thanks.
    – David Gard
    Jul 10, 2013 at 13:23
  • @DavidGard Then (1) go back and edit your question with a link to the plugin ... and (2) you're not talking about the textarea, but about the TinyMCE editor, right?
    – kaiser
    Jul 10, 2013 at 13:47
  • (1) Why is the plugin relevant?! I included the name of it so that people didn't look at the code and think 'That is not valid JS/jQuery'. It makes no difference. That code works for when the editor is in 'Text' mode, and I require help with 'Visual' mode. The code is so that people can see I tried! (2) Yes this is about TinyMCE, and as my comment above says (in response to your comment), it was an oversight on my part to put the question in this forum. I use Wordpress, I don't use anything else that incorporates TinyMCE, therefore my tiny brain associated them when I was asking the question!
    – David Gard
    Jul 10, 2013 at 13:53
  • ^^ And sorry if the above reads like a rant, it's not meant to be. I'm grateful for any help.
    – David Gard
    Jul 10, 2013 at 13:55
  • @DavidGard The plugin is relevant as it might have completely different ways to do things as one might expect. Also it's part of your question. Further, this is no forum, this is a Q/A site that archives questions for later readers who have the same problem. About the textarea: The problem is, that TinyMCE is no textarea, so it was slightly confusing. See the update on how to insert data into both. Problem will be that your jQuery plugin won't be able to access TinyMCE content.
    – kaiser
    Jul 10, 2013 at 13:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.