Ticket #8111 (confirmed Bug)

Opened 3 years ago

Last modified 3 years ago

Text disappears when clicking outside editing box.

Reported by: tjordan Owned by:
Priority: Normal Milestone:
Component: General Version: 3.6
Keywords: IE Cc:

Description

If I click outside of the editing box, the thrid line of text disappears. When I click back into the box, the text reappears.

This is what I have within the editing box: Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do. Do re me fa so la ti do.<br /> All Finished.

Here is the code from my page:

<table>
<tr>
<td colspan="2"><textarea cols="74" rows="9" name="tx_Body" id="tx_Body"></textarea></td>
</tr>
</table>


<script type="text/javascript">
var TheEditor = CKEDITOR.replace('tx_Body', 
	{ 	customConfig : '',
		on : { 'instanceReady' : configureHtmlOutput },
		skin : 'office2003',
		width: 600,
		height: 300,
		startupFocus: true,
		docType: '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">',
		fillEmptyBlocks: false,
		enterMode: CKEDITOR.ENTER_BR,
		font_defaultLabel: 'Verdana',
		fontSize_defaultLabel: '12',
	contentsCss: 'https://www.med.dal.ca/ckeditor/HTMLEmail.css',
		toolbar: 
[
{ name: 'document', items : [ 'Source','-',/*'Save','NewPage','DocProps','Preview',*/'Print'/*,'-','Templates'*/ ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image',/*'Flash',*/'Table','HorizontalRule','Smiley','SpecialChar','PageBreak'/*,'Iframe'*/ ] },
'/',
{ name: 'styles', items : [ /*'Styles','Format',*/'Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ /*'Maximize', */'ShowBlocks','-','About' ] }
]
	} );

CKFinder.setupCKEditor( TheEditor, '#APPLICATION.ROOTDIR#common/htmlemail/ckfinder/' ) ;

/*
 * Adjust the behavior of the dataProcessor to avoid styles
 * and make it look like FCKeditor HTML output.
 */
function configureHtmlOutput( ev )
{
	var editor = ev.editor,
	dataProcessor = editor.dataProcessor,
	htmlFilter = dataProcessor && dataProcessor.htmlFilter;
	// Make output formatting behave similar to FCKeditor
	var dtd = CKEDITOR.dtd;
	for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) )
	{
		dataProcessor.writer.setRules( e,
			{
				indent : true,
				breakBeforeOpen : true,
				breakAfterOpen : false,
				breakBeforeClose : !dtd[ e ][ '##' ],
				breakAfterClose : true
			});
	}

	// Output properties as attributes, not styles.
	htmlFilter.addRules(
	{
		elements :
		{
		$ : function( element ){
			// Output dimensions of images as width and height
			if ( element.name == 'img' )
			{
				var style = element.attributes.style;
				if ( style ){
					// Get the width from the style.
					var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style ),
						width = match && match[1];
					
					// Get the height from the style.
					match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style );
					var height = match && match[1];
					
					if ( width ){
						element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );
						element.attributes.width = width;
					}
					if ( height ){
						element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );
						element.attributes.height = height;
					}
				}
			}

			// Output alignment of paragraphs using align
			if ( element.name == 'p' )
			{
				style = element.attributes.style;
				
				if ( style ){
					// Get the align from the style.
					match = /(?:^|\s)text-align\s*:\s*(\w*);/i.exec( style );
					var align = match && match[1];
					
					if ( align ){
						element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );
						element.attributes.align = align;
					}
				}
			}
			
			if ( !element.attributes.style )
				delete element.attributes.style;
			
			return element;
			}
		},
		
		attributes :
		{
			style : function( value, element ){
				// Return ##RGB for background and border colors
				return convertRGBToHex( value );
			}
		}
	} );
}

/**
* Convert a CSS rgb(R, G, B) color back to ##RRGGBB format.
* @param Css style string (can include more than one color
* @return Converted css style.
*/
function convertRGBToHex( cssStyle ){
	return cssStyle.replace( /(?:rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\))/gi, function( match, red, green, blue ){
		red = parseInt( red, 10 ).toString( 16 );
		green = parseInt( green, 10 ).toString( 16 );
		blue = parseInt( blue, 10 ).toString( 16 );
		var color = [red, green, blue] ;

		// Add padding zeros if the hex value is less than 0x10.
		for ( var i = 0 ; i < color.length ; i++ ){
			color[i] = String( '0' + color[i] ).slice( -2 ) ;
		}

		return '##' + color.join( '' ) ;
	 });
}
</script>}}}

Attachments

mytest.html (7.6 KB) - added by j.swiderski 3 years ago.

Change History

Changed 3 years ago by j.swiderski

comment:1 Changed 3 years ago by j.swiderski

  • Status changed from new to pending
  • Keywords disappear disappearing text line vanishing focus blur onblur onfocus removed

I see that you are using CKFinder integration with CKEditor. I have tried to reproduce the issue but failed. Here are the steps I have taken:

  1. I have downloaded CKFinder (I have chosen CKFinder for Java)
  2. I have prepared test page (see mytest.html)
  3. I have pasted the text you provided
  4. I was clicking inside editor and outside it
  5. Nothing unusual happened.

Could you tell me:

  1. What Operating System and browser are you using?
  2. Which CKFinder have you used (PHP, Java..)
  3. Which version of CKEditor have you used?
  4. 'https://www.med.dal.ca/ckeditor/HTMLEmail.css' - this file is no longer available. I haven’t seen this file but have you tried to run your example without it? Could it be that this file is causing the problem?
  5. Have I missed something or done something wrong in my Test Case?

Waiting for your comments.

comment:2 Changed 3 years ago by j.swiderski

@tjordan any updates regarding this issue?

comment:3 Changed 3 years ago by tjordan

I solved the problem by removing

docType: '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">',

Running latest build of ckeditor and ckfinder (ColdFusion) on Windows XP (all updates) and IE 8 (all updates)

  • Tim

comment:4 Changed 3 years ago by j.swiderski

  • Keywords IE added
  • Status changed from pending to confirmed
  • Version changed from 3.6.1 to 3.6

When I changed page doctype to the one provided by @tjordan:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

I was able to reproduce the issue.

Browser entered quirks mode on page load and when I pasted sample text and clicked outside editor contents one line of text disappeared.

This issue is reproducible in all versions of IE from CKEditor 3.6.

I have set 3.6 version because prior to this one I could not get buttons in toolbar displayed.

Note: See TracTickets for help on using tickets.
© 2003 – 2012 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy