I've found that the holy grail for an easy-to-use, non-techie drupal website is the ability to add inline images, wherever and whenever a properly-permissioned user wants. This is the request I get most often from my clients, and until today I never had a good answer. I've finally found, what seems to be, the best, most compliant, and easy to use way to add images for the average joe. Here's the method I'll be using from now on:

The Problem

For a very long time, the problem has been the fact that there were LOTS of ways to do this...but none of them worked very well. Modules would solve part of the problem but not all of it. Or they might offer confusing methods, or most often, they don't actually resize the images (creating a copy) so the image quality was poor. I've come up with a simple 2 module solution that has me really excited.

The Modules:

The two modules I'm using are: BUEditor and IMCE. I've found that they work very well together, which hasn't been the case in the past when I've tried to use them. I've used IMCE with other methods (CCK fields, etc) and have been very unhappy with the usability.

It seems that since I've last tried IMCE, it's improved greatly. It is much more intuitive for the user now and, most importantly, truly resizes images properly. It resizes them on import (like the image module) and also can create thumbnails on import. But, not only this, it also allows resizing of the images after they've been uploaded, giving the user an option to create a new version of the image at a particular size. This is a fantastic addition!!

BUEditor has become my new favorite non-WYSIWYG solution. It adds only the cleanest code and encourages my users to actually learn what they're doing, which can do nothing but improve accountability for content.

What I did

Ok so, here's my process:

1. Install IMCE and BUEditor and configure each of them to your purposes
2. When configuring my BUEditor image field, I added one important element. What good is an inline image if you can't float text around it? The original image button code looks like this:
   
php:
$imce_url = function_exists('imce_menu') && user_access('access imce') ? url('imce/browse') : '';
return "js:
var B = eDefBrowseButton('$imce_url', 'attr_src', 'Browse', 'image');
var form = [
{name: 'src', title: 'Image URL', suffix: B},
{name: 'width', title: 'Width x Height', suffix: ' x ', getnext: true, attributes: {size: 3}},
{name: 'height', attributes: {size: 3}},
{name: 'alt', title: 'Alternative text'}
];
eDefTagDialog('img', form, 'Insert/edit image', 'OK');
";


   So, I want to add a new field to the BUEditor image form that allows people to add a class name, which will create the float. So, I did this:
   
php:
$imce_url = function_exists('imce_menu') && user_access('access imce') ? url('imce/browse') : '';
return "js:
var B = eDefBrowseButton('$imce_url', 'attr_src', 'Browse', 'image');
var form = [
{name: 'src', title: 'Image URL', suffix: B},
{name: 'width', title: 'Width x Height', suffix: ' x ', getnext: true, attributes: {size: 3}},
{name: 'height', attributes: {size: 3}},
{name: 'alt', title: 'Alternative text'},
{name: 'class', title: 'Position: floatleft, floatright, or leave blank'}
];
eDefTagDialog('img', form, 'Insert/edit image', 'OK');
";

   Note, I just added a new field to the var form which is for positioning. It will just be a text field where they can type in "floatleft" or "floatright", which are css classes I've setup that look like:
.floatleft {float: left;
padding: 0px 10px 10px 0px;
}
.floatright {float: right;
padding: 0px 0px 10px 10px;
}
   Once that's done, and you've added/removed any other BUEditor fields you want, you can save your editor.

3. When configuring IMCE, make sure to set your main file size and your thumnail sizes...these defaults are important in case someone inserts an image without doing any resizing
4. In IMCE settings, make sure to check "enable custom resizing" and "enable scaling of newly uploaded images". I also highly suggest setting up a previx for user folder names that makes sense (I made mine blogimages_ since it's just used on a blog. This yeilds folders that look like "blogimages_3, which is user3's folder)
5. Also, make sure you've setup permissions in access control to allow those users to use IMCE (otherwise they won't get that selector in BUEditor)
6. Now, you're most likely using the filtered input format...which doesn't let images through by default. So, if you're feeling risky, you can just add the img tag to your list of allowed tags, or, add a new input format which allows img tags

That's it! To me, this is the best solutions, by far, I've seen yet. Hopefully this helps some other folks navigate the land of CMS images for non-techie users...