Forced Line Breaks

[Dannyk]

Hey!

Loving the editor. Is there any way you can have a feature to auto-create line breaks in the text?

Like this feature I'm suggesting, as I type, I put my own returns in here.

Often, when creating emails you only want the text to go a small width.

It would be great to make this force the line breaks into the email.

Thanks!!

Danyk

[Jakub Ś]

The below code is only to show how hard this can be and that you shouldn't go that way. The idea may seem simple calculate body width, then calculate element width and if one is larger than other insert new line. The main problem is with calculating current element width. If this is block element its width will be the same as body so width checks don't make any sense.
Actually the only time they return correct result is when they have float style set. Another problem is when you insert one float div after another - no new line is visible - you have to insert clearing div first then floating div. Then you get all sort of range problems when you e.g. switch to source and back ...

Taking the above into account and that it can work with float elements only this is a won't fix issue.

This is just for tests. Please don't use that code :).
Insert below on page:

			var editor = CKEDITOR.replace( 'editor1', {
				
			} );	

			editor.on( 'pluginsLoaded', function( evt )
			{				
				var bodyWidth; 
				
				editor.on( 'contentDom', function( e )
				{		
					var editable = editor.editable();		
					var doc = editor.document;
					bodyWidth = parseInt(editor.document.getBody().getComputedStyle('width'));					
					
					editable.attachListener( doc, 'keypress', function( event )
					{	
						var keyCode = event.data.getKey();						
						if ( keyCode == 8 || keyCode == 13 || keyCode == 32 || ( keyCode >= 46 && keyCode <= 90 ) || ( keyCode >= 96 && keyCode <= 111 ) || ( keyCode >= 186 && keyCode <= 222 ) ){						
							var elem = editor.getSelection().getRanges()[0].startPath().block;						
							var elWidth = parseInt(elem.getComputedStyle('width'));
							console.log(elWidth+' '+bodyWidth);
							if(elWidth >=bodyWidth-100){
								console.log('here');
										
								editor.execCommand('enter');
								var clearDiv = new CKEDITOR.dom.element( 'div' );
								clearDiv.setStyles({
									clear: 'left',
									height : 0,
									'line-height' : 0									
								});
								 var currentEl = editor.getSelection().getRanges()[0].startPath().block;
								 currentEl.insertBeforeMe(clearDiv);	
								 currentEl.focus();
							}
						}	
					},null,null,1 );
				} );
				
				editor.on( 'resize', function( evt )
				{	
					bodyWidth = parseInt(editor.document.getBody().getComputedStyle('width'));
				});				
			});

Insert below into editor:

<div style="float:left;">wwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div>

Put caret somewhere and press key.