Open Image dialog on Upload tab

[Sylvain Fabre]

If no image is selected, the dialog should open on the Upload tab instead of Info tab.

[Jakub Ś]

Current behaviour is correct and we don't plan to change it.

You can use below code as jump start for changing behaviour to your desired result.

CKEDITOR.on('dialogDefinition', function(ev) {				
				var dialogName = ev.data.name;
				var dialogDefinition = ev.data.definition;
			 
				if (dialogName == 'image') {
					var oldOnShow = dialogDefinition.onShow;
					dialogDefinition.onShow = function() {
						this.selectPage('advanced');
						if( oldOnShow )
							oldOnShow.apply( this );
					};					
				}
			});

[Sylvain Fabre]

@j.swiderski It may be correct but not user friendly

[Jakub Ś]

Please consider that user might be opening dialog to create the image. In that case which is more user friendly 'info' tab or the 'upload' tab?

The dialog is used for inserting or editing images. Taking that into account, I think that 'info' tab the best choice in general.

[Sylvain Fabre]

I was only asking about the insertion, not the edition part where 'info' tab is the most relevant.

On Facebook, if I click on "Add Photos/Videos" (next to "Update Status") then the file browser is opened. I'm not asked to fill in a URL. This is the same on Twitter if I click the "media" button.

On Wordpress, if I click on "Add a media" while editing a page or post, it opens the gallery dialog where I can pick a picture from some pictures which is very similar (for the user point of view) to pick a picture somewhere on the computer through the file browser. I can also use a URL but it's not the first option.

I'm just saying that from my experience, most of the time, if you are going to insert a new picture in the text, you just want to pick a file from your computer which makes the "upload tab" the most relevant. And next if you want to edit this already-inserted picture, then the "info" tab is the most relevant.

Thank you for your piece of code. What is the best way to know if I'm editing an existing picture or inserting a new one in this onShow event?

Best,

[Jakub Ś]

On Facebook, if I click on "Add Photos/Videos" (next to "Update Status") then the file browser is opened. I'm not asked to fill in a URL. This is the same on Twitter if I click the "media" button.

This works a little bit different in CKEditor. First of all you may not have upload tab because CKFinder or custom file browser may not be added. Second is that (when CKFinder is added) the Info tab has "Browse Server" button which allows accessing images and also upload them from CKFinder level. Taking that into account the info tab seems the best choice.

---

What is the best way to know if I'm editing an existing picture or inserting a new one in this onShow event?

Please see ​https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/image/dialogs/image.js#L289-L291 and ​https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/image/dialogs/image.js#L289-L291.

You can use that exact code to open specific tab provided that image is edited.