Firefox and Safari Link Space Issue

[Roy Jin]

when creating a link, if you continue editing after creating a link the new text becomes part of the link.

For example, in the blank editor, insert your cursor, then open the link dialogue, add url, then click okey, the editor will show the url link, move your cursor at the end of link text, press space and more spaces, you will find the link is always kept there unless you press enter.

It happens on Firefox and Safari. And you can produce the issue on the current website demo.

I had tested FCKeditor previous version, seems no such issue.

[Charlie]

Is this actually an error? It almost seems like normal behavior to me. I see the problem, but if one changes this behavior, doesn't it becomes very hard to make multiple word links?

I.E. make a link, replace the text with "see" then try to make it "see my blog". That would no longer work...

[Frederico Caldeira Knabben]

The problem is that you're not able to move out of the link. If I remember well, we have some code in v2 to workaround this browser limitation.

[Roy Jin]

Many users will insert a link or upload a file from link dialogue without pre select text. From this situation, the link text will be displayed on the editor as their original file name or link. Now the behaviour is getting frustrated. User enters more spaces, and wants to add another link. Just like fredck said: you are not able to move out of the link until you enter new line to break the link.

From my experience of using other online editor application, they always move out of the link when user enters spaces at the end of the text.

If you guys know how to quick fix this issue, please let me know. Currently, we had amount users using this wonderful online editor but only stuck on this issue.

Thank you.

[Alfonso Martínez de Lizarrondo]

#5987 has been marked as dup

[Roy Jin]

I am just wondering whether has some quick temp fix for this issue? I do really appreciate that someone can help me out.

cheers,

[Roy Jin]

Replying to fredck:

The problem is that you're not able to move out of the link. If I remember well, we have some code in v2 to workaround this browser limitation.

Hi Fredck,

Could you please give me some hint to have a quick temp fix for that? Currently, we had amount users complain on this issues, as a developer, I need bit urgent for temp fix. Looking forward to your reply.

Cheers,

[Frederico Caldeira Knabben]

Milestone CKEditor 3.x deleted

[Charlie]

Well here's my sporting effort. It doesn't work, but you'll see where it should go. I just couldn't figure out how to step out of the a part but still be in the p part. The best I could do was element.getParent.appendText('blah') which came close. I'll keep trying for a bit and work on it again tomorrow maybe.

Note, I also wasn't sure if this should perhaps be a DOM walker thing. These changes would go in the link/plugin.js

//Monitor for hitting the end of a link when it's the last thing in the code
		editor.on( 'key', function( ev )
				{
					if ( ev.data.keyCode == 40 || (ev.data.keyCode == 39 && editor.lang.dir == 'ltr')  || (ev.data.keyCode == 37 && editor.lang.dir == 'rtl') )	// TAB
					{
						var element = CKEDITOR.plugins.link.getSelectedLink( editor ) || ev.data.element;

						if ( element && element.is( 'a' ) && !element.hasNext())
							{
								var text = element.getText();
								var length = text.length;
								var selection = editor.getSelection();
								var range = selection && selection.getRanges()[0];
								if(range.startOffset == range.endOffset && length == range.endOffset) {
									//Figure out how to step out of the a node but still be in the parent node
									ev.cancel();
								}
								
							}
						
					}
				});

[Charlie]

Got it in FF at least...let me know what you think. Place it in link-plugin.js.

//Monitor for hitting the end of a link when it's the last thing in the code
		editor.on( 'key', function( ev )
				{
					if ( ev.data.keyCode == 40 || (ev.data.keyCode == 39 && editor.lang.dir == 'ltr')  || (ev.data.keyCode == 37 && editor.lang.dir == 'rtl') )	// TAB
					{
						var element = CKEDITOR.plugins.link.getSelectedLink( editor ) || ev.data.element;

						if ( element && element.is( 'a' ) && !element.hasNext())
							{
								var text = element.getText();
								var length = text.length;
								var selection = editor.getSelection();
								var range = selection && selection.getRanges()[0];
								var ranges = selection.getRanges();
								if( range.collapsed && length == range.endOffset) {
									// Create the element to be inserted in the DOM.
									var collapsedElement = new CKEDITOR.dom.text( '' );
									// Insert the empty element into the DOM at the range position.
									var parent = element.getParent();
									parent.append( collapsedElement );

									// Place the selection right inside the empty element.
									range.startContainer = collapsedElement;
									range.startOffset	= 0;
									range.endContainer	= collapsedElement;
									range.endOffset		= 0;
									selection.selectRanges( ranges );
									ev.cancel();
								}
								
							}
						
					}
				});

[Alfonso Martínez de Lizarrondo]

For reference, this seems to be the ticket that adjusted the behavior in FCKeditor: #393

[Charlie]

Ahhh, now I understand the behavior you are talking about. Drat, and I was so happy with what my thing did. Unfortunately as I found out today, dealing with the caret and all that is just far too overwhelming for me. So I probably won't be able to finish up the rest, might try to find some easier bugs that aren't already taken ;).

But if you're looking for an easy way to hop out of links which are at the end the fix could help. Just push the direction arrow to get out of the link.

[Roy Jin]

Replying to comp615:

Ahhh, now I understand the behavior you are talking about. Drat, and I was so happy with what my thing did. Unfortunately as I found out today, dealing with the caret and all that is just far too overwhelming for me. So I probably won't be able to finish up the rest, might try to find some easier bugs that aren't already taken ;).

But if you're looking for an easy way to hop out of links which are at the end the fix could help. Just push the direction arrow to get out of the link.

Thank you for your help. The code seems only work for existing link but not for new link inserted from link dialogue. I try to modified the code you provided, but the cursor is always in the <a> tag when create a new link. Have you had any ideas?

[Roy Jin]

Replying to comp615:

Got it in FF at least...let me know what you think. Place it in link-plugin.js.

//Monitor for hitting the end of a link when it's the last thing in the code
		editor.on( 'key', function( ev )
				{
					if ( ev.data.keyCode == 40 || (ev.data.keyCode == 39 && editor.lang.dir == 'ltr')  || (ev.data.keyCode == 37 && editor.lang.dir == 'rtl') )	// TAB
					{
						var element = CKEDITOR.plugins.link.getSelectedLink( editor ) || ev.data.element;

						if ( element && element.is( 'a' ) && !element.hasNext())
							{
								var text = element.getText();
								var length = text.length;
								var selection = editor.getSelection();
								var range = selection && selection.getRanges()[0];
								var ranges = selection.getRanges();
								if( range.collapsed && length == range.endOffset) {
									// Create the element to be inserted in the DOM.
									var collapsedElement = new CKEDITOR.dom.text( '' );
									// Insert the empty element into the DOM at the range position.
									var parent = element.getParent();
									parent.append( collapsedElement );

									// Place the selection right inside the empty element.
									range.startContainer = collapsedElement;
									range.startOffset	= 0;
									range.endContainer	= collapsedElement;
									range.endOffset		= 0;
									selection.selectRanges( ranges );
									ev.cancel();
								}
								
							}
						
					}
				});

When create a new link from the link dialogue directly, the range collapsed is always false and range.startNode = 0; range.endNode = 1. Then I tried to make remove if( range.collapsed && length == range.endOffset) this condition in order to set new range for new created link, seems does not work. Anyone can give me some hints?

cheers,

[Charlie]

Problem, it appears, is that when the link dialog makes a new link it does a similar trick and inserts a blank element at the end of the link. The problem your going to have is that the selection actually runs through the link AND this blank element. For whatever reason, the blank element isn't working. I've tried selecting the element, tried deleting it and proceeding, but nothing.

I guess a workaround for now is to left-arrow then right arrow when at the end of the link (As this causes the element to go away)

[Roy Jin]

Replying to comp615:

Problem, it appears, is that when the link dialog makes a new link it does a similar trick and inserts a blank element at the end of the link. The problem your going to have is that the selection actually runs through the link AND this blank element. For whatever reason, the blank element isn't working. I've tried selecting the element, tried deleting it and proceeding, but nothing.

I guess a workaround for now is to left-arrow then right arrow when at the end of the link (As this causes the element to go away)

For my tricky hack on the new inserted link from link dialogue, I did such below, please verify, at least it is working:

                                       if(!range.collapsed){
						var htmlVal = element.getHtml();
						htmlVal = htmlVal.replace('<br>', '');
						element.setHtml(htmlVal);
						
						// Insert the empty element into the DOM at the range position.
						var collapsedElement = new CKEDITOR.dom.element( 'span' );
						collapsedElement.setHtml('&nbsp;');
						var parent = element.getParent();
						parent.append( collapsedElement );
						
						
						range.startContainer = collapsedElement;
						range.endContainer = collapsedElement;
						range.startOffset	= 0;
						range.endOffset		= 0;
						selection.selectRanges( ranges );
						ev.cancel();
					}

The reason to remove Bogus <br> is when you inserted additional empty space, the extra space will be moved to next new line.

var collapsedElement = new CKEDITOR.dom.text( ); the text collapsedElement seems does not work for new inserted link from link dialogue, this is the reason i changed to the extra span and put the extra space at the end of new link.

This condition is only for the new link created from link dialogue, other scenarios remains as previous code.

It is only for the quick temp fix. It will require more work on the framework.

[Roy Jin]

Hi there,

I am just wondering whether this bug has been fixed?

Cheers,

[Joe Kavanagh]

Has there been any discussions on this issue? Is a fix feasible or is this regarded as a browser issue?

[Frederico Caldeira Knabben]

It's a browser issue that can be somehow managed. This may involve some important changes to the style system though, so I see CKEditor 4 as the right target for it.

[Lynne Kues]

This appears to be fixed in FF 3.6.13.

[Lynne Kues]

Well, the manifestation of the problem in our application appears to be resolved in FF 3.6.13. I still see the behavior in the CKEditor demo.

[Roy Jin]

Yep, still can reproduce in the online demo.

[Wiktor Walc]

#5000 was marked as duplicate.

[Wiktor Walc]

#3375 was marked as duplicate (contained a patch and some additional comments)

[Garry Yao]

Can you confirm this issue is fixed in trunk by #7041)? Now it's always possible to exit from link with Arrow keys or the End key (in all browsers).

[Roy Jin]

I did test the site demo on FF 4 and Chrome 12. It seems working now.

[Wiktor Walc]

The issue seems to be gone also in Safari 5.0.5/Win starting from 3.5.1.

[Jakub Ś]

I was unable to reproduce this in any browser.