I am working on a project that needs to replace the default TinyMCE editor with CKEditor.

I have the following code to open up the media manager:

`frame = new wp.media.view.MediaFrame.Post({
title: “Media Manager”,
library: {
…
type: ‘image’,
…
},
button: {
text: “Insert Images”
},
multiple: true,
state: ‘insert’
});`

And to insert images, the following:

    frame.on('insert', function (){
		var html = [];
		var attachments = frame.state().get('selection');
		var selected = attachments.models;

		selected.forEach(function (selection){
			var attachment = selection.toJSON();

			html.push(
				"<figure class='image'>" +
				"<img src='" + attachment.url + "' alt='" + attachment.alt + "'/>" +
				(attachment.caption !== '' ? "<figcaption>" + attachment.caption + "</figcaption>" : "") +
				"</figure>"
			);
		});

		editor.insertHtml(html.toString());
	});

Which works great to insert any number of images into the CKEditor.

However, rather than using the full sized image, I would like to use the image URL for whatever sized image was selected in the “Size” field under “Attachment Display Settings”. I’m sure there is a way to access the data in those “Attachment Display Settings” fields, however I cannot seem to find any information about this anywhere.

Any help would be greatly appreciated.

Thanks!