Search code examples
wordpresstinymce

tinymce getContent() returns "visual tab" string when "html" tab was opened

My tinymce editor was initialized on the fly:

wp.editor.initialize(jQuery(this).attr('id'), {
    mode : "exact",
        tinymce: {
            wpautop: true,
            plugins : 'charmap colorpicker hr lists paste tabfocus textcolor fullscreen wordpress wpautoresize wpeditimage wpemoji wpgallery wplink wptextpattern',
            toolbar1: 'formatselect,bold,italic,bullist,numlist,blockquote,alignleft,aligncenter,alignright,link,wp_more,spellchecker,fullscreen,wp_adv,listbuttons',
            toolbar2: 'styleselect,strikethrough,hr,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help',
            textarea_rows : 20
        },
        quicktags: {buttons: 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close'},
        mediaButtons: true,
    });

all is well, except when I try to reach for the content:

tinymce.editors[ xxxx ].getContent();

so tinymce has two tabs, "visual" and "html" tabs. That line above returns the text typed into VISUAL tab, but if I change to HTML tab and modified the text, it still shows the VISUAL tab! How to work it out?

Solution

  • If you are using WordPress, the "HTML" tab is not actually using TinyMCE at all which is why trying to use a TinyMCE API to get the data is failing.

    Toggling between the Visual and HTML tabs is loading/removing TinyMCE which is why your API call works in Visual mode (TinyMCE is loaded) but not in HTML (TinyMCE is not loaded).