How can I determine what mode the editor is in and when it changes?

  1. To determine what mode the editor is currently in, you can use the getUserSetting('editor') in JavaScript, which returns either “html” or “tinymce”.

  2. To determine when the editor mode is switched, you can use the jQuery click event handler on the #content-tmce and #content-html elements, which are the editor type switching buttons:

    jQuery( ‘#content-tmce’ ).click( function() {
    // Visual editor selected
    } );

    jQuery( ‘#content-html’ ).click( function() {
    // Text editor selected
    } );

Bear in mind that these click events will always be triggered when you click on the buttons; when you click on the “Visual” button for example, the event will be triggered regardless whether the current mode is “Visual” or “Text”. If you need to, you could easily tackle that by storing the previous state yourself.