TinyMCE validation gives error: Cannot call method 'getContent' of undefined

Question

I have a text area with tiny mce, I load it like this:

$(document).ready(function () {

    tinyMCE.init({
        mode: "textareas",
        ...

This text area is in a form. I bind forms submit button to:

$('#btnSubmit').click(function() {

    tinymce.triggerSave();

    var editorContent = tinyMCE.get('Description').getContent();
    if (editorContent == '' || editorContent == null)
    {
        $(tinymce.activeEditor.getBody()).css("background-color", '#ffeeee');
        $(tinymce.activeEditor.getBody().parentNode).css("background-color", '#ffeeee');
        $(tinymce.activeEditor.getBody().parentNode).css("border", '1px solid #ff0000');
    }
});

In my entity class I have Required attribute.
My goal is to make tinyMCE background red when model is not valid. But I get error from ti question title.
Any help?
So, validation works. If I remove textarea empty check and leave color changing it changes. But the problem is when there is something in text area and I click submit area first become red and then submit.
Is there maybe some fubction where I can do something if validation fail?

Answer 1

It sounds to me just like an undefined object error - where the code can't resolve this line tinyMCE.get('Description').getContent(); .

You seem to be mixing between using activeEditor sometimes and other times not, so instead I've standardised the code so you are always relying on activeEditor - this means I've removed the line that was triggering the error. You also seem to switch between using tinymce and tinyMCE which might not be causing problems but is best to be avoided... so I've standardised that as well.

Without seeing more of the way the rest of the code and markup is set-up however it's a bit difficult to tell exactly what is going on. Does my change repair the problem?

$('#btnSubmit').click(function() {

  tinyMCE.triggerSave();

  var editorContent = tinyMCE.activeEditor.getContent();
  if (editorContent == '' || editorContent == null)
  {
    $(tinyMCE.activeEditor.getBody())
      .css("background-color", '#ffeeee')
      .parent()
      .css({
        "background-color": '#ffeeee',
        "border": '1px solid #ff0000'
      });
  }
});

Answer 2

If you do not have control over init method of TinyMCE then, you can follow this solution.

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

    function myCustomSetContent( id, content ) {
        // Check if TinyMCE is defined or not.
        if( typeof tinymce != "undefined" ) {
            var editor = tinymce.get( id );
            // Check if TinyMCE is initialized properly or not.
            if( editor && editor instanceof tinymce.Editor ) {
                editor.setContent( text );
                editor.save( { no_events: true } );
            } else {
                // Fallback
                // If TinyMCE is not initialized then directly set the value in textarea.
                //TinyMCE will take up this value when it gets initialized.
                jQuery( '#'+id ).val( text );
            }
            return true;
        }
        return false;
    }

    function myCustomGetContent( id ) {
        // Check if TinyMCE is defined or not.
        if( typeof tinymce != "undefined" ) {
            var editor = tinymce.get( id );
            // Check if TinyMCE is initialized properly or not.
            if( editor && editor instanceof tinymce.Editor ) {
                return editor.getContent();
            } else {
                // Fallback
                // If TinyMCE is not initialized then directly set the value in textarea.
                // TinyMCE will take up this value when it gets initialized.
                return jQuery( '#'+id ).val();
            }
        }
        return '';
    }

    $(".class-to-update-content").on("click", function(e) {
        myCustomSetContent( "tinymce-editor-id", "New Content in Editor" );
    });

    $(".class-to-get-content").on("click", function(e) {
        $("div.class-to-display-content").html( myCustomGetContent( "tinymce-editor-id" ) );
    });
});

Ref : http://blog.incognitech.in/tinymce-undefined-issue/