Format the Layout of Images In The Edit Post Textarea?

Question

The textarea in which posts are written and edited doesn't handle image layout very well.

Inserted images seem to be aligned with the left edge of the textarea, or the right edge of the previous image. This is often hard to work with, and users have to understand that this isn't the way they will show up once published.

I'm after a better-looking, and more usable layout.

I'd like to be able to ALWAYS have non-floated images appear left justified and stacked one on top of the other.

Is this solved by modifying the admin css, or is the formatting of images in the textarea accomplished another way?

Answer 1

Add this to your theme's functions.php file:

add_editor_style();

By default that function will load a file called editor-style.css which is located in the root directory of your theme. The functions accepts a filename or an array of filenames as parameter. Reference in the Codex: http://codex.wordpress.org/Function_Reference/add_editor_style

If you want (or need to have) more control over the custom CSS file name and location you can use this function instead:

function custom_editor_style($url) {

  if ( !empty($url) )
    $url .= ',';

  // Change the path here if using sub-directory
  $url .= trailingslashit( get_stylesheet_directory_uri() ) . 'editor-style.css';

  return $url;
}
add_filter('mce_css', 'custom_editor_style');