For those using the Textile input filter with BUEditor, this is a neat and flexible method for supporting inline images. It makes use of IMCE.

Aims

• Provide a method for embedding inline images into plain text, written in the Textile syntax.
• Allow editing of the image's alt attribute.
• Allow styling of the images using the class attribute.

Adding an 'Insert Image' button to BUEditor:

1. Install and configure the Textile and IMCE modules.
2. Add two or three image styles to your theme's CSS (or using CSS Injector, to avoid the need to alter any themes). In this example, I'm adding styles for left-, right- and center-aligned images:
   

   img.left {
     float: left;
     margin: 0 1em 1em 0;
   }
   img.right {
     float: left;
     margin: 0 1em 1em 0;
   }
   img.center {
    display: block;
    padding: 0 auto;
   }
     

3. Add the following button to your BUEditor configuration:
   • Title: Insert/edit image
   • Content: as follows...
     

     js:var S = E.getSelection();
     var M = S.match(new RegExp('^!(\\(([^)]+)\\))?([^(!]+)(\\(([^)!]*)\\))?!$')) || ['', '', '', '', '', S];
     var form = [
      {name: 'src', title: 'URL', value: M[3], suffix: E.imce.button('attr_src')},
      {name: 'description', title: 'Description', value: M[5]},
      {name: 'class', title: 'Alignment', value: M[2],type: 'select', // we use a select box instead of a plain text field.
       options: {'': '', 'left': 'Left', 'right': 'Right', 'center': 'Centered'}
      }
     ];
     eDefTagDialog('img', form, 'Insert/edit image', 'OK', 'bbcImgProcess');
     
     bbcImgProcess = function(tag, form) {
       var src = form.elements['attr_src'].value;
       var description = form.elements['attr_description'].value;
       var imgclass = form.elements['attr_class'].value;
       
       var str = '!'+(imgclass?('('+imgclass+')'):'')+ src+(description ? ('('+ description+')') : '') +'!';
       editor.dialog.close();
       if (src) {
         editor.active.replaceSelection(str);
       }
     };
         

   • Icon/shortcut key: Choose your preferred icon and shortcut key here.

This will allow you to add or edit Textile image syntax, similar to this:

!(left)/sites/default/files/example.jpg(alternative text)!

Also, when you select this code and press the Insert/Edit Image button, the dialog will be pre-populated with the right settings, enabling you to edit them.