Spell Checking Disrupting Use of Custom CSS

[Jack Herr]

Background: Use two custom CSS files against three classes set respectively in contentsCss and bodyClass configurations. Configure spell checking by specifying the presence of the Scayt toolbar item and by configuring scayt as not enabled when editor launched, and using customer id's for hosted scayt and hosted wsc. Problem I am about to describe occurs using either hosted spell checking or the free spell checking. I have included relevant configuration and CSS code below. Please note that I dummied out our customer id's in the configuration code. I will provide more information if needed.

CKEditor Version: 4.1RC, using the iframe editor

Issue: When I click on Check Spelling, and then in the dialog click on Finish Checking, regardless of whether or not I have authorized any changes through the dialog, the editor text and other items (like images) are bigger than specified in the custom CSS. If I click on Source twice (to go to source and back to wysiwyg), the text returns to sizes indicated by the custom css. While I cannot be sure of this, the styling of the text after exiting the dialog looks exactly like the text as it appears in the dialog display window. So it's as if wsc is putting the text back into the editor without the external CSS applied. The toggling of the mode seems to reset the editor's use of configuration settings.

Steps to Repeat Issue: Launch editor. Enter text and image. Check spelling. Click Finish Checking (not Cancel) in spell check dialog. Problem appears. Click Source to source. Click Source to wysiwyg. Problem disappears.

Browsers and OS: I am developing using Expression Web 4 and launching in its Microsoft Expression Development Server, all under Windows 7 Ultimate 64 bit. The problem occurs in the following browsers: FF, IE9, Chrome, Opera, Safari for PC.

Configuration Code:

	// Create a CKEditor instance for the specified jQuery-wrapped textarea using the specified encoding setting
	
	function CreateCKEditorInstance(TextAreaElement, HTMLEncodeOutputSetting)
	{
		// Set the string used to authorize elements and their properties (attributes, styles, and classes)
		
		var AllowedContentString = "";
		
		AllowedContentString = AllowedContentString + "p ol ul {margin-left};";
		AllowedContentString = AllowedContentString + "li blockquote;";
		AllowedContentString = AllowedContentString + "b i u s sub sup;";
		AllowedContentString = AllowedContentString + "a [!href, !target];";
		AllowedContentString = AllowedContentString + "img [!src, alt] {float};";
		
		// Set the array used to configure the toolbar
		
		var ToolbarArray =
		[
				{ name: 'document', items : [ 'Source','-','Preview','Print' ] },
				{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
				{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
				'/',
				{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
				{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
				{ name: 'links', items : [ 'Link','Unlink' ] },
				{ name: 'insert', items : [ 'Image','SpecialChar' ] },
				{ name: 'tools', items : [ 'Maximize','ShowBlocks','-','About' ] }
		];
		
		// Set the string used to configure the classes applied for external styling of the editor content
		// Note that the classes represent a space-separated list of class name values
		
		var BodyClassString = "";
		
		BodyClassString = BodyClassString + "CKEditorInputArea";
		BodyClassString = BodyClassString + "  ";
		BodyClassString = BodyClassString + "CKEditorGeneratedContent";
		BodyClassString = BodyClassString + " ";
		BodyClassString = BodyClassString + "RTEGeneratedContent" + " ";
		
		// Set the array of css files used to configure external styling of the editor content
		
		var ContentsCssArray =
		[
			'ResetsAndUniversallyAppliedSettings.css',
			'CKEditorCustomStyling.css'
		];
		
		// Set replacement text for the preview element of the CKEditor image ui dialog
		// Includes HTML break to make sure the text sits below an image that consumes the width of the element
		
		var CustomImagePreviewText = "";
		
		CustomImagePreviewText = CustomImagePreviewText + "<br />Your image, previewed here relative to this text, will be scaled to a standard size, ";
		CustomImagePreviewText = CustomImagePreviewText + "inserted into the text editor relative to the current cursor position, aligned as directed, ";
		CustomImagePreviewText = CustomImagePreviewText + "and surrounded by some whitespace to offset the image from any surrounding text.";
		
		// Set the instance configuration
		// Note that the HTML output encoding specification is set by the calling program via passed parameter
		
		var config =
		{
			allowedContent : AllowedContentString,
			bodyClass : BodyClassString,
			contentsCss : ContentsCssArray,
			docType : '<!DOCTYPE html>',
			height : 200,
			htmlEncodeOutput : HTMLEncodeOutputSetting,
			image_previewText : CustomImagePreviewText,
			indentOffset : 20,
			indentUnit : 'px',
			resize_enabled : false,
			scayt_autoStartup : false,
			scayt_customerid : "<scayt customer id here>",
			toolbar : ToolbarArray,
			wsc_customerId : "<wsc customer id here>"
		};
		
		// Create the instance for the specified textarea identifying the instance by the element's id
		
		CKEDITOR.replace(TextAreaElement.attr("id"), config);

//other code follows

Here is the CSS that applies to the editor. Note that I am not including the resets file. It is fairly long and most of it doesn't apply or is overridden by this file:

/****************************************************************************************************************
*	CKEditor content styling settings -- override of the relevant overall page settings in base CSS
****************************************************************************************************************/
.CKEditorInputArea {
	padding: 10px;
}

.CKEditorGeneratedContent {
	line-height: 1.25;
	font-family: Calibri, Helvetica, Arial, sans-serif;
	font-size: 12px;
	text-align: left;
}

.RTEGeneratedContent ol {
	margin-left: 20px;
	list-style: decimal outside none;
}

.RTEGeneratedContent ol li {
	margin-left: 20px;
}

.RTEGeneratedContent ul {
	margin-left: 20px;
	list-style: disc outside none;
}

.RTEGeneratedContent ul li {
	margin-left: 20px;
}

.RTEGeneratedContent blockquote {
	margin-left: 20px;
}

.RTEGeneratedContent img {
	height: auto;
	width: 88px;
	margin: 4px 8px 4px 8px;
}

[Jack Herr]

I just noticed a superfluous space in the following line of configuration code above.

BodyClassString = BodyClassString + "RTEGeneratedContent" + " ";

I eliminated that space and retested. Problem continues as documented.

[Piotrek Koszuliński]

I could only reproduce the issue with disappearing image on Firefox. Everything else seemed to work fine.

I reported the issue on WSC plugin page ​https://github.com/WebSpellChecker/ckeditor-plugin-wsc/issues/2

@JackHerr: could you give us more information about how to reproduce the issue with broken styling? E.g. HTML sample + stylesheet file. Otherwise, if others won't be able to reproduce it too, we won't be able to fix it.

[Jack Herr]

Will do sometime tomorrow. In the meantime, I reran the code using FF Firebug and, when I clicked on "Finish Checking" in the webspellchecker dialog box, I got these errors:

NetworkError: 404 Not Found - ​http://localhost:37883/ckeditor/plugins/wsc/dialogs/CKEditorCustomStyling.css

and

NetworkError: 404 Not Found - ​http://localhost:37883/ckeditor/plugins/wsc/dialogs/ResetsAndUniversallyAppliedSettings.css

So it is as if webspellchecker, or CKEditor at this time only, is looking for my external style sheets in the ckeditor plugins, not in external file structure. This does not happen at any other time. Perhaps this is a clue to the problem. My HTML is basic, and the important style sheet (CKEditorCustomStyling.css) I included in the original report in its entirety. I will reduce my programs to the relevant code and post. Need to learn how to post files, and I don't have time in the next day or so.

[Jack Herr]

I will also download 4.1 (not RC) in the next few days and see if the symptoms persist.

[Jack Herr]

Narrowed the problem:

When I copy and paste the two css files referred to above into the ckeditor/plugins/wsc/dialogs/ folder, the problem goes away.

So wsc must be looking for styling, or ckeditor is looking for styling, in an unexpected location only at this time -- when returning from the wsc dialog after clicking "Finish Checking" (regardless of whether or not I actually make any spelling changes).

Note this does not occur on "Cancel" of the dialog.

[Jack Herr]

I just did a real time profile of the html using FF Firebug:

CKEditor is correctly adding the three classes to the html at all times (before and immediately after the dialog). Here is the opening body tag in the html within the content within the iframe captured while the text is not being styled using the external css files:

<body class="CKEditorInputArea CKEditorGeneratedContent RTEGeneratedContent cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" contenteditable="true" spellcheck="false">

This html is the same before the dialog is launched. So there seems to be no problem assigning classes to the content as configured. There only seems to be a problem matching these classes to the specified external css files, and again, this occurs only after an immediate return from the dialog by clicking "Finished Checking". Also, again, toggling to source and back to wysiwyg eliminates the symptom.

[Jack Herr]

A final clarifying note:

The file paths for the two external css style files which are used to style the content are specified as links in the head section of my webpage html. The files are in the external file structure, just like the JavaScript and other css files, that are passed to the page by the server (in this development case, the localhost).

[WebSpellChecker.net]

We have reproduced the issue on our environment. We're invesigating if the reason of the issue is related with WSC.

[Piotrek Koszuliński]

Ok, thanks both of you :). Let's see where's the reason.