Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

    });

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

1 Answer 1

up vote 1 down vote accepted

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"/"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();
share|improve this answer
    
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 '13 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 '13 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 '13 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 '13 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 '13 at 13:57

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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