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.
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:
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. Once config is defined, please do the following:
// 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);
}
}
}
});
});
