Sitecore Detect Page Editor JavaScript

page-modes.js

 // noConflict mode
jQuery.noConflict();

var app = app || {};

var pageEditorMode = function() {
    // Sitecore global name space in page editor or preview mode
    return !!(Sitecore && Sitecore.PageModes && Sitecore.PageModes.PageEditor);
};


app = (function($, undefined) {
    // do all the things
    var init = function() {
        if (pageEditorMode()) {
            // add class to body to help override styles for experience editor mode
            document.body.classList.add('page-editor');
            
            console.log('Experience editor (or page editor if your old school)');
        } else {
          // js will run here when in page preview mode or normal viewing
            console.log('no page editor');
        }
    };

    return {
        init: init
    };

})(jQuery);

jQuery(document).ready(function() {
    app.init();
});