Insert text a cursor position in to TinyMCE text editor

by

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.

$(document).ready(function(){

    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();

    });

});

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 ) {
        e.preventDefault();
        var textarea = $( '#wp-content-editor-container' ).find( 'textarea' );
        textarea.bind( 'updateInfo keyup mousedown mousemove mouseup', function() {
            var range = $( this ).textrange();
            console.log( range );
        } );
    } );
} )( jQuery );

Text

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

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

Visual

To add text to the “TinyMCE”https://wordpress.stackexchange.com/”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:
tinyMCE.activeEditor.getContent();

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

tinyMCE.get( 'some-id' ).getContent();

Leave a Comment