CODEWITHSUNDEEP
javascriptjqueryckeditor
Jasper
Jasper

Reputation: 8705

CKEditor - Image Properties dialog is blank

I am using the default Image plugin with the usual values:

  CKEDITOR.replace( 'editor', 

                      {
                        filebrowserBrowseUrl: '/app/myimages.html',
                        filebrowserUploadUrl: '/app/myfiles.html',
                        filebrowserImageBrowseUrl: '/app/myimages.html'
}

The image shows up correctly in the editor after selection via image select dialog box.

But when i right-click on the image and select Image Properties menu.
The dialog that opens does not contain the image URL or width or height etc. It essentially has no values.

Upvotes: 0

Views: 937

Answers (1)

Chuck
Chuck

Reputation: 11

See my comments. But for me it was overridding onShow().

CKEDITOR.on('dialogDefinition', function( ev ) {
			// Take the dialog window name and its definition from the event data.
			var dialogName = ev.data.name;
			var dialogDefinition = ev.data.definition;
			
			if ( dialogName == 'image' ) {
				/*dialogDefinition.onShow = function() {
					this.selectPage( 'info' );
				};*/ // do not override this function, it will cause a JS on save (setCustomData can not be found on null object), and the edit image will not fill in its fields.
				
				dialogDefinition.removeContents( 'Link' ); // remove these tabs
				dialogDefinition.removeContents( 'advanced' );
				dialogDefinition.removeContents( 'Upload' );
				
				var contents = dialogDefinition.getContents( 'info' );
				//contents.remove( 'htmlPreview' ); // will cause a JS error if disabled.
				contents.remove( 'ratioLock' );
				contents.remove( 'txtHSpace' );
				contents.remove( 'txtVSpace' );
				contents.remove( 'txtAlt' );
				contents.remove( 'txtBorder' );
				
				contents.get('txtWidth').width = 'auto';
				contents.get('txtHeight').width = 'auto';
				contents.get('txtUrl').disabled = 'disabled';
			}
		});

Upvotes: 1

Related Questions