Some SPAN configurations create undesired hidden SPAN blocks

[Ivan Gadea]

Using the latest nightly build and this config.js file:

/**
 * @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here.
	// For the complete reference:
	// http://docs.ckeditor.com/#!/api/CKEDITOR.config

	// The toolbar groups arrangement, optimized for a single toolbar row.
	config.toolbarGroups = [
		{ name: 'document',	   groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
		{ name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
		{ name: 'forms' },
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
		{ name: 'links' },
		{ name: 'insert' },
		{ name: 'styles' },
		{ name: 'colors' },
		{ name: 'tools' },
		{ name: 'others' },
		{ name: 'about' }
	];

	// The default plugins included in the basic setup define some buttons that
	// we don't want too have in a basic editor. We remove them here.
//	config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript';

	// Let's have it basic on dialogs as well.
	config.removeDialogTabs = 'link:advanced';



	// new config added by hand (not default)
	config.allowedContent = true;
	config.tabSpaces = 4;
	config.templates_replaceContent = false;
	config.enterMode = CKEDITOR.ENTER_BR;
	config.autoParagraph = false;
	config.fillEmptyBlocks = false;

	config.extraPlugins = 'maximize,showblocks';
	config.removePlugins = 'devtools';

	config.toolbar = 'MyToolbar';
	config.toolbar_MyToolbar =
	[
		[ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ],
		[ 'Image','Table','HorizontalRule','Smiley','SpecialChar' ],
		[ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ],
		[ 'Styles','Format' ],
		[ 'Abbr','-', 'Bold','Italic','Strike','-','RemoveFormat' ],
		[ 'TextColor','BGColor' ],
		[ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ],
		[ 'Link','Unlink' ],
		[ 'input', 'free', 'checkbox', 'radio', 'multiple', 'select', 'upload', 'array', 'imagemap', 'tabs', 'fieldset' ],
		[ 'Templates', 'Maximize', 'ShowBlocks', '-', 'Source' ]
	];

	config.toolbar_Advanced =
	[
		[ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ],
		[ 'Image','Table','HorizontalRule','Smiley','SpecialChar' ],
		[ 'Styles','Format' ],
		[ 'Abbr','-', 'Bold','Italic','Strike','-','RemoveFormat' ],
		[ 'TextColor','BGColor' ],
		[ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ],
		[ 'Link','Unlink' ],
		[ 'Maximize', 'ShowBlocks' ]
	];

	config.toolbar_Basic =
	[
		[ 'Abbr','-', 'Bold','Italic','Strike','-','RemoveFormat' ],
		[ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ],
		[ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ],
		[ 'Link','Unlink' ],
		[ 'Maximize' ]
	];

	CKEDITOR.on( 'instanceReady', function( ev ) {
		var nonBlockTags = ['input','label'];
		var blockTags = ['div','h1','h2','h3','h4','h5','h6','p','pre','ul','li'];
		var rulesBlock = {
			indent : true,
			breakBeforeOpen : true,
			breakAfterOpen : true,
			breakBeforeClose : true,
			breakAfterClose : true
		};
		var rulesNonBlock = {
			indent : true,
			breakBeforeOpen : true,
			breakAfterOpen : true,
			breakBeforeClose : true,
			breakAfterClose : true
		};

		for (var i=0; i<blockTags.length; i++) {
			ev.editor.dataProcessor.writer.setRules( blockTags[i], rulesBlock );
		}
		for (var i=0; i<nonBlockTags.length; i++) {
			ev.editor.dataProcessor.writer.setRules( nonBlockTags[i], rulesNonBlock );
		}
		ev.editor.dataProcessor.writer.setRules( 'span', {
			indent : true,
			breakBeforeOpen : true,
			breakAfterOpen : true,
			breakBeforeClose : true,
			breakAfterClose : true
			}
		);
	});
};

Steps to reproduce:

1. Go to HTML Source view and Copy & Paste this code:

<div class="former input" title="INFORMACION">
	<span class="big horizontal advanced">
		<label class="required" for="NOMBRE">
			DESCRIPCION 
		</label>
		<input charset="-_." class="medium username required" id="NOMBRE" maxlength="20" minlength="3" name="NOMBRE" type="text" value="INICIAL" />
		</span>
</div>

2. Click on Source button to go to WYSIWYG view.
3. Click on Source button to return to HTML source view again.

You'll see that there is a new hidden SPAN block. If you repeat steps 2 and 3 more hidden SPAN blocks will be generated.

I've found that the problem appears when I make 'true' any of the 'break' settings for the SPAN element. The behaivour is the expected only when all settings are set to false, like here:

		ev.editor.dataProcessor.writer.setRules( 'span', {
			indent : true,
			breakBeforeOpen : false,
			breakAfterOpen : false,
			breakBeforeClose : false,
			breakAfterClose : false
			}
		);

[Piotrek Koszuliński]

I cannot reproduce this on latest master. I copied your config and pasted given HTML in the source mode and after switching between modes the data is:

<div class="former input" title="INFORMACION">
	<span class="big horizontal advanced">
		<label class="required" for="NOMBRE">
			DESCRIPCION 
		</label>
		
		<input charset="-_." class="medium username required" id="NOMBRE" maxlength="20" minlength="3" name="NOMBRE" type="text" value="INICIAL" />
		
	</span>
</div>

Could you check what additional steps do I need to reproduce it? Or is it still reproducible on latest master?

[Ivan Gadea]

I've test with the latest build and it's solved. Thanks