My favorite "code assistant" editor for Drupal is BUEditor. It's a simple no-nonsense editor which isn't a WYSIWYG editor like TinyMCE or FCKeditor, but rather a helper tool that provides buttons to quickly insert HTML tags. It comes with sensible basic formatting tags (which for most sites is all that you need) and gives you the ability to create additional buttons quite easily for other tags you want to use (you can create button graphics for your custom buttons, or simply use plain text which it makes look like a button). While editing content with BUEditor, you can highlight your text, click the desired button, and the correct HTML will be wrapped around that text. As an added bonus, it also includes a quick Preview button, which when clicked, instantly overlays a rendered preview of the HTML. Another click returns to the standard code view.

BUEditor replacement icons

BUEditor's "default look" is a bit rough around the edges, so I've adjusted a few things as seen in the image above (both better icons, as well as some CSS tweaks). I extracted nicer-looking icons from TinyMCE (and made one or two myself) and saved them with the same names as the original BUEditor icons (which makes them an easy drop-in replacement). The buttons are available for download in a file called editor-icons.zip at the bottom of this page.

To get the icons to work, the best way is to upload the editor-icons folder to a location on your server, usually either as a sub-directory in your files directory, or a sub-directory inside of your theme. In my case I uploaded them to /sites/all/themes/mytheme/images/editor-icons.

Though it will technically work, you should "not" overwrite the default icons inside of BUEditor's module folder. If you do this, then you will have to remember to re-copy them every time you upgrade the BUEditor module in the future. Instead, BUEditor gives you a setting to allow you to use alternate icons instead of the default ones. Go to BUEditor's settings page at Administer > Site configuration > BUEditor (admin/settings/bueditor), click "Edit" next to the default profile (or a custom one if you've created one). Expand the "Editor paths" fieldset and set the Directory of editor icons option to the path for your custom icons. It offers some placeholders instead of directly typing the full path, but in my case only the %FILES one works. To put the icons in your theme folder, enter the full path and ignore the placeholders.

Import custom buttons and settings into BUEditor

At the BUEditor settings page, you can import a full set of buttons from a .csv file. You can import my .csv file attached to the bottom of this page, or add in the following buttons/code manually.

Image alignment / floats

This code replaces the code for Insert/edit image, and adds a select box where you can choose a CSS class to align the image either Left or Right (using a float). The related CSS you need to save in your style.css file is below in the next section of the page about CSS:

New list items

This should be added as a new button. It wraps any selected text in a <li> to make it easier to add additional list items. Add LI as the Caption that will appear on the button:

Code filter tags

If you use the code filter on your site, add this new button (due to the code tags "in" the button, I am displaying it in plain text here):

<code>%TEXT%</code>

Lightbox

If you'd like to add the ability to link to a Lightbox version of the image, add the following code in place of the Insert/edit link button's code. It's not as automated as could be desired, but for now this is the only way I'm aware of to do this with BUEditor & IMCE. This will create an option to choose "lightbox" when making a link, which adds rel="lightbox" to the link (which is picked up automatically by Lightbox 2 module). Click the Browse button to select the large version of the image you want to link to in the Lightbox:

BUEditor style sheet tweaks

Add this CSS into your theme's style.css file to smooth out a few things with BUEditor's textarea, icon group spacing, presentation of the Headings menu, and to add float left/right support for images inserted with IMCE:

Don't forget: add HTML tags to the "Filtered HTML" input format

By default, Drupal is very restrictive about which HTML tags to allow, and any tags that are not allowed will not display on the page (though Drupal won't delete them - they still exist when you Edit the page). Any HTML tags you want to permit, need to be manually added to the list. I've written a short article about this: Understanding Input Formats.