CODEWITHSUNDEEP
javascriptwordpresstinymcewysiwyg
Eray
Eray

Reputation: 7128

Getting WP Tinymce's Content

I'm trying to write a Wordpress plugin. I will get counts words which in WP's Tinymce editor. Basically, it's a word counter which counting long of your post and giving you this message in a meta box

Your post has 450 words

My just problem is getting words from Tinymce via javascript. This isn't working :

document.getElementById('content')

Tinymce's content's id is content . But this code returning NULL. I couldn't find valid id name for Tinymce.

In shortly, other all codes are ready, just i can't get words from Wordpress' WYSIWYG editor.

Thanks.

Upvotes: 20

Views: 17059

Answers (6)

Nikolay
Nikolay

Reputation: 409

This is the one that seems to work for me in every situation I tested. Regardless if we start off from text mode or in visual mode and regardless of changing the modes and adding more content after that.

if ( tinyMCE.editors['id-of-your-editor'] ) {
    tinyMCE.editors['id-of-your-editor'].save();
    tinyMCE.editors['id-of-your-editor'].load();
    var your_content = tinyMCE.editors['id-of-your-editor'].getContent();
} else if ( document.getElementById( 'id-of-your-editor' ) ) {
    var your_content = document.getElementById( 'id-of-your-editor' ).value;
} else {
    alert ( 'Error' );
}

Upvotes: 0

Alfredo Cebrián
Alfredo Cebrián

Reputation: 111

This worked for me:

if (jQuery("#wp-text-wrap").hasClass("tmce-active")){
    text1 = tinyMCE.activeEditor.getContent( { format : 'html' } );
}else{
    text1 = jQuery('[name="text"]').val();

Where text is the ID of the tinymce editor

Upvotes: 1

NaMarPi
NaMarPi

Reputation: 164

Here is an example. The text below the editor will be updated whether the keyup occured in Visual or HTML mode.

WP tinyMCE onKeyUp

Visual mode event in the php file:

function my_tiny_mce_before_init( $init ) {
    $init['setup'] = "function( ed ) { ed.onKeyUp.add( function( ed, e ) { repeater( e ); }); }";
    return $init;
}
add_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );


HTML mode event in the javascript file:

jQuery( document ).ready( function( $ ) {

    $('<div id=look-at-it></div>').insertAfter('#postbox-container-1');

    $('#content').on('keyup', function( e ) {   
        repeater( e );
    });
});


var repeater = function ( e ) {
    var targetId = e.target.id;
    var text = '';

    switch ( targetId ) {

         case 'content':
             text = jQuery('#content').val(); 
             break;

         case 'tinymce':
             if ( tinymce.activeEditor )
                 text = tinymce.activeEditor.getContent();
             break;
    }

    jQuery('#look-at-it').html( text );
}


Tested on:

  • WordPress 3.4.2

Upvotes: 2

savitas
savitas

Reputation: 51

Accepted answer did work for me but for multiple editors on one page I have to access it via editor id, so below

tinymce.editors['content_id'].getContent();

Worked for me.

Upvotes: 5

Mauvis Ledford
Mauvis Ledford

Reputation: 42334

Try:

tinymce.activeEditor.getContent();

or 

tinymce.editors.content.getContent();

Where "content" is the id of your textarea.

Similarly, if you wanted to get just the selected (highlighted) text in the TinyMCE text area you would do:

tinymce.activeEditor.selection.getContent();

The full API is here: http://tinymce.moxiecode.com/wiki.php/API3:class.tinymce.Editor

TinyMCE also offers a lot of events you can bind to, particularly in your case the keyup, keydown, and keypressed events.

Be sure to call this stuff only after TinyMCE has loaded on the page.

Upvotes: 34

Manuel Bitto
Manuel Bitto

Reputation: 5253

I remember that tiny MCE loads content dynamically from ajax, so maybe your document.getElementById('content') try to get that element too early.

I think you have 2 ways to solve this problem:

1) wait for the ajax event completition, with an event listener, and after that get the element and its text.

2) use tinyMce function to get the content of a text area. Here you may find some useful tips: http://tinymce.moxiecode.com/wiki.php/How-to_load/save_with_Ajax_in_TinyMCE

Upvotes: 4

Related Questions