Getting WP Tinymce's Content

Question

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.

Mauvis Ledford · Accepted Answer · 2011-05-07T05:56:24.663

33

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.

edited May 07 '11 at 05:56

answered Apr 30 '11 at 18:54

Mauvis Ledford

40,827
17
81
86

Worked perfectly! I can't believe it was so simple. – Adam Grant Jan 21 '12 at 04:09
As savitas mentioned in his answer below, these solutions won't work for all custom editors - especially if you have hyphens in the ID. Although it's not a tinymce issue, just the way javascript works, it might give you some trouble. Savitas' answer is to use "editors" as an array instead: `tinymce.editors['content_id'].getContent();` – Radley Sustaire Sep 06 '13 at 18:50
1

I've noticed that sometimes wordpress hasn't yet registered a given tinymce editor. Also, wordpress has js functions removep() and autop() which remove and add various entities, like
that tinymce.getContent() likes to add. Instead try using `wp.editor.getContent('content')`. There's not much documentation on it, but I've found it returns exactly what will get stored in the database.
– milesvp Dec 13 '18 at 20:38

score 5 · Answer 2 · answered Aug 21 '12 at 07:34

5

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.

answered Aug 21 '12 at 07:34

savitas

51
1
2

score 4 · Answer 3 · answered Apr 22 '11 at 23:08

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

Thank you Manuel,now i'll try it :) – Eray Apr 30 '11 at 16:24 — Eray, Apr 30 '11 at 16:24

NaMarPi · Answer 4 · 2012-12-01T18:40:24.243

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

score 1 · Answer 5 · answered Mar 23 '17 at 06:26

1

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

answered Mar 23 '17 at 06:26

Alfredo Cebrián

11
2

Passing the param format:html, meant I got the actual html - rather than escaped <p> – zak Jan 18 '18 at 07:08

score 0 · Answer 6 · answered Apr 08 '17 at 07:00

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' );
}

Getting WP Tinymce's Content

6 Answers6