id	summary	reporter	owner	description	type	status	priority	milestone	component	version	resolution	keywords	cc
10235	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;
}

}}}




"	Bug	closed	Normal		UI : Spell Checker	4.1 RC	expired