search
DemosChangelog

How to destroy WProofreader and clean all its resources in full page view of source mode in CKEditor

CKEditor 4 is a WYSIWYG editor, so it makes it easy for end users to work on HTML content without any knowledge of HTML whatsoever. More advanced users, however, sometimes want to access raw HTML source code for their content and CKEditor 4 makes it possible by providing two dedicated plugins: Source Editing Area and Source Dialog.

CKEditor 4 offers a separate plugin called Full Page Modearrow-up-right that allows with its help to edit entire HTML pages (from <html> to </html>), including the page metadata like DOCTYPE, character set encoding, meta tags, text and background color, or margins. Check demo herearrow-up-right.

If WProofreader is added on the page, it will be enabled in this full page mode as well. As a result you might notice various scrips/files (e.g. wsc.css) of WProofreader that are visible in the source mode. In certain cases, such injections might be a problem and the right solution will be to disable WProofreader when switching to the source mode from the WYSIWYG mode and strip our all the entries of the WProofreader resources. There is cross-browser workaround proposed to overcome the above described issue (see below).

1. Define the config script as on the example below. On this step we will save the link to WProofreader instance for further use.

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

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

2. After that, you need to destroy the previously saved instance of the WProofreader before a user switches to the source mode of CKEditor and remove the link on the CSS styles from the editable iframe element.

// 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 a user switches from the WYSIWYG mode to the source mode of CKEditor 4
        if (e.data === 'source') {
            var container = editor.editable().$,
                parent = container.parentNode,
                links = parent.getElementsByTagName('link'),
                styleName = 'wsc.css',
                link;

            if (!container.savedWscInstance) {
                return;
            }

            // Destroy the WProofreader instance and remove the link to it
            container.savedWscInstance.destroy();
            container.savedWscInstance = null;

            // Go through all links and remove link to the wsc.css style file
            for (var i = 0; i < links.length; i++) {
                link = links[i];

                if (link.href.indexOf(styleName) !== -1 && link.parentNode) {
                    link.parentNode.removeChild(link);
                }
            }
        }
    });
});

If you have any troubles implementing this workaround, please feel free to submit your support requestarrow-up-right.

PreviousHow to customize the look and feel of WProofreader?NextHow to disable the 'Proofread in dialog' mode

Last updated

Was this helpful?