WProofreader badge and mirror elements are injected in the "full page mode" of CKEditor 4

[jshaptala]

If to enable WProofreader using auto-search feature in CKEditor 4 with enabled full page mode, on switching to Source mode, you will see extra elements injected into HTML.

[jalners]

It is impossible to fix it for auto-search functionality. But workaround is next:

1. Add next code for the WebSpellChecker config:

window.WEBSPELLCHECKER_CONFIG = {
    autoSearch: true,
    ....
    onLoad: function(instance) {
        var container = instance.getContainerNode(), // Link to the editable container.
            isCkeditor4 = container.classList.contains('cke_editable'); // Dirty check if container is CKEditor 4.

            if (isCkeditor4) {
                container.savedWscInstance = instance; // Save link on the WebSpellChecker instance to the editable DOM element.
            }
        }
};

2. Add some listeners to the CKEditor 4:

// Subscribe to the CKEditor 4 'instanceReady' event.
CKEDITOR.on('instanceReady', function(event) {
    var editor = event.editor;

    // Subscribe to the CKEditor 4 'beforeSetMode' event.
    editor.on('beforeSetMode', function(e) {
        // If user switch CKEditor 4 to the 'source' mode.
        if (e.data === 'source') {
            var container = editor.editable().$;

            if (!container.savedWscInstance) {
                return;
            }

            // Destroy instance and remove link on it.
            container.savedWscInstance.destroy();
            container.savedWscInstance = null;
        }
    });
});

Now the WProofreader instance will be destroyed for each switching to the CKEditor 4 source mode. After returning back from this mode auto-search functionality will re-initialize the WProofreader instance for the current CKEditor 4.

[jshaptala]

Update. Extended the workaround with the additional steps. Check the full version in the doc here.