Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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 Mode 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 here.

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.

Code Block
languagejs
themeEmacs
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.

Code Block
languagejs
themeEmacs
// 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 request.