CkEditor integration to include aligning atoms and possibly wrap text around an atom

Tested this patch.

The class is added correctly to the markup.

As i see we would now then need to add the css for these classes to both the editor and to the site, as the float should also appear in the editor and not just outside. Then it can be a bit more complicated to create css for this, and maybe the module should supply some css.

Tried to add the following to the editor.css and i managed to float left right and center, but it is not perfect, and then i still need to add the same for the front end to show up correctly on node view as well:

.atom-align-right {
  float: right;
}

.atom-align-left {
  float: left;
}

.atom-align-center div {
  text-align: center;
}

.atom-align-center div div {
  display: inline;
}

.atom-align-center .meta {
  text-align: center;
}

The main problem here is that inside the double div there can be any element so centering is not easy, unless we list all the possibly elements in the css. The other problem is that simply floating seems to not be enough, as then text and other elements can float to the other side and it kind of solves wrapping, but if i dont want wrapping then it is a bit troublesome.

Not sure if wrapping should be a separate issue, but then still a good question how the text wrap could be incorporated.

I'd put ".atom-align-center {margin: 0 auto}" and don't care about what is inside.

For me that does not work, because the element that gets the margin: 0 auto has to be in a div which is full width and it has to be just as small as the items in it (because if its also full width then the margins will not do anything). The div that has .atom-align-center is full width so doing margin: 0 auto on it will not work. It only works on the last child which is either an img or an iframe or some other tag the context creates, because that is the only one that is not full width. Also display block is required otherwise the margin: 0 auto will not work even in this case.

However i did it differently, and mine works on iframe, img, and even when the div has an image and text the same time (like a file provider).

margin: 0 auto;display:table;

Tested on firefox and chrome, works fine!

I could not test on IE 9 however, as it seems that the embed is broken on IE 9.
SCRIPT65535: Unexpected call to method or property access.
dnd-library.js?v=1.x, line 269 character 9
I have a bit earlier version of the js but the line it complains about is this:
dt.setData('text/html', Drupal.theme('scaldEmbed', Drupal.dnd.Atoms[id]));
Can someone check with the latest version on IE 9? Though this line did not change.

Rerolled your patch and added the following:

- new editor-global.css , I did not want to use the editor.css as that was adding some style that was only for the editor, added the previously discussed css rules.
- currently the dnd.info file adds the css as that css has to be there everywhere where content can appear, so could not simply add it to an existing library.