Opened 8 years ago

Closed 6 years ago

#5978 closed Bug (fixed)

Firefox and Safari Link Space Issue

Reported by: Roy Jin Owned by:
Priority: Normal Milestone:
Component: General Version: 3.2.1
Keywords: Cc: Jude, Allred, jkavanag@…, lynne_kues@…, satya_minnekanti@…

Description

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.

Change History (30)

comment:1 Changed 8 years ago by Frederico Caldeira Knabben

Component: Core : Output DataGeneral
Keywords: Confirmed added; Part Link Space Firefox Safari removed
Priority: HighNormal

comment:2 Changed 8 years ago by 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...

comment:3 Changed 8 years ago by 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.

comment:4 Changed 8 years ago by 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.

comment:5 Changed 8 years ago by Alfonso Martínez de Lizarrondo

Cc: Jude Allred added

#5987 has been marked as dup

comment:6 Changed 8 years ago by 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,

comment:7 in reply to:  3 Changed 8 years ago by 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,

comment:8 Changed 8 years ago by Frederico Caldeira Knabben

Milestone: CKEditor 3.x

Milestone CKEditor 3.x deleted

comment:9 Changed 8 years ago by 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();
								}
								
							}
						
					}
				});

comment:10 Changed 8 years ago by 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();
								}
								
							}
						
					}
				});

comment:11 Changed 8 years ago by Alfonso Martínez de Lizarrondo

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

comment:12 Changed 8 years ago by 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.

comment:13 in reply to:  12 Changed 8 years ago by 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?

comment:14 in reply to:  10 Changed 8 years ago by 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,

comment:15 Changed 8 years ago by 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)

comment:16 in reply to:  15 Changed 8 years ago by 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.

comment:17 Changed 8 years ago by Roy Jin

Hi there,

I am just wondering whether this bug has been fixed?

Cheers,

comment:18 Changed 8 years ago by Joe Kavanagh

Cc: jkavanag@… added
Keywords: IBM added

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

comment:19 Changed 8 years ago by 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.

comment:20 Changed 8 years ago by Lynne Kues

Cc: lynne_kues@… added

comment:21 Changed 8 years ago by Lynne Kues

This appears to be fixed in FF 3.6.13.

comment:22 Changed 8 years ago by 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.

comment:23 Changed 8 years ago by Roy Jin

Yep, still can reproduce in the online demo.

comment:24 Changed 8 years ago by Wiktor Walc

#5000 was marked as duplicate.

comment:25 Changed 8 years ago by Wiktor Walc

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

comment:26 Changed 8 years ago by Satya Minnekanti

Cc: satya_minnekanti@… added
Keywords: IBM removed

comment:27 Changed 7 years ago by 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).

comment:28 Changed 7 years ago by Roy Jin

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

comment:29 Changed 7 years ago by Wiktor Walc

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

comment:30 Changed 6 years ago by Jakub Ś

Resolution: fixed
Status: confirmedclosed

I was unable to reproduce this in any browser.

Last edited 6 years ago by Jakub Ś (previous) (diff)
Note: See TracTickets for help on using tickets.
© 2003 – 2017 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy