wp_editor Tiny MCE getContent doesn’t return content of HTML view

4 Views

I am using wp_editor in a plugin I am developing and have noticed that .getContent() does not get the contents of the editor if it is in HTML view (as opposed to the visual editor).

If the editor is loaded in HTML view it will return

Read More
    tinyMCE.get(inputid) is undefined

But even if I try to get the content via: 

    jQuery("#"+inputid).html() or jQuery("#"+inputid).val()

It returns null. Whats convfusing me even more is if the editor is loaded in visual mode, switch to HTML view, make some changes and then use .getContent() it will return the value of the visual editor before any changes were made.

I am pulling out my limited supply of hair with this one so help would be appreciated!

Post Views: 4

Related posts

Leave a Reply

5 comments

  1. I was struggling with the same problem. The reason is that the editor in the visual tab is tinyMCE and the editor in the html tab is just a plain textarea. Somehow the tinyMCE editor is not activated when the html tab is active so you need to query the textarea instead. The textarea has the id passed to the wp_editor() function. You can query it using traditional jquery methods.

    For example, this code sets a variable named content with the content of the tinyMCE editor if it is activated or with the content of the textarea if the tinyMCE returned nothing (because the HTML tab is selected):

    var content;
var editor = tinyMCE.get(inputid);
if (editor) {
    // Ok, the active tab is Visual
    content = editor.getContent();
} else {
    // The active tab is HTML, so just query the textarea
    content = $('#'+inputid).val();
}

  2. To make it work 100% i had to do like this:

    function get_tinymce_content(id) {
    var content;
    var inputid = id;
    var editor = tinyMCE.get(inputid);
    var textArea = jQuery('textarea#' + inputid);    
    if (textArea.length>0 && textArea.is(':visible')) {
        content = textArea.val();        
    } else {
        content = editor.getContent();
    }    
    return content;
}

  3. This is function I’m using and has never let me down.

    It’s really simple and works even, if TinyMCE did not load yet.
    It just checks wrapper’s class which is something extremally safe to use.

    function get_tinymce_content(id) {

    if (jQuery("#wp-"+id+"-wrap").hasClass("tmce-active")){
        return tinyMCE.get(id).getContent();
    }else{
        return jQuery("#"+id).val();
    }

}

  4. You need to call tinyMCE.triggerSave();
    before jQuery("#"+inputid).html() will yield the actual editor content.

    (btw. what do you mean by ‘html view’?)

  5. You can check the active tab like this:

    let content;
const editor = tinyMCE.get(inputid);
if (null !== editor && false === editor.hidden) {
    // Ok, the active tab is Visual
    content = editor.getContent();
} else {
    // The active tab is HTML, so just query the textarea
    content = $('#'+inputid).val();
}