More option on img tag

I want the editor to be XHTML compatible out of the box. However, you can always extend the image dialog manually to include any attribute.
I'll consider implementing a user-friendly way of extending image and link dialogs.

changes in: default_buttons_functions.js

//file dialog for the type. labels are interface texts. browser is URL of the file browser.
function eDefFileDialog(type, labels, bURL) {
  var row, html, sel = editor.active.getSelection();
  var field = ({image : {name: 'src', tag: 'img'}, link : {name: 'href', tag: 'a'}})[type];
  var bButton = bURL ? ' '+eDefInput('button', 'brw', labels.brw, {onclick: 'eDefFileBrowser(\''+ bURL +'\', this.form.elements[\'file_'+ field.name +'\'].value, \''+ type +'\')'}) : '';
  var file = (editor.G.selFile = editor.parseTag(sel, field.tag)||{attributes: []}).attributes;
  var rows = [[labels.url, eDefInputText('file_'+ field.name, file[field.name], 25)+bButton]];
  if (type == 'image') {
    rows[rows.length] = [labels.w +' x '+ labels.h, eDefInputText('file_width', file.width, 3) +' x '+ eDefInputText('file_height', file.height, 3)];
    rows[rows.length] = [labels.vs +' x '+ labels.hs, eDefInputText('file_vspace', file.vspace, 3) +' x '+ eDefInputText('file_hspace', file.hspace, 3)];
    rows[rows.length] = [labels.title, eDefInputText('file_title', file.title, 25)];
    rows[rows.length] = [labels.align, eDefInputText('file_align', file.align, 4)];
    rows[rows.length] = [labels.alt, eDefInputText('file_alt', file.alt, 25)];
  }
  else if (type == 'link') {
    rows[rows.length] = [labels.tt, eDefInputText('file_title', file.title, 25)];
  }
  for (var i=3; i<arguments.length; i++) rows[rows.length] = arguments[i];//insert additional arguments as rows.
  html = eDefTable(rows) + eDefHTML('div', eDefInputSubmit('ok', labels.ok));
  html = eDefHTML('form', html, {name: 'eDefForm', onsubmit: 'eDefFileInsert(this, \''+ type +'\'); return false;'});
  editor.dialog.open(labels.title, html);
}

.
.
.

//IMCE custom URL and custom finishing function. IMCE js API.
var eDefImceUrl = '';
function eDefImceFinish(url, width, height, fsize, win) {
  var el = document.forms['eDefForm'].elements;
  if (el['file_src']) {
    el['file_src'].value = url;
    el['file_width'].value = width;
    el['file_height'].value = height;
    el['file_vspace'].value = vspace;
    el['file_hspace'].value = hspace;
    el['file_title'].value = title;
    el['file_align'].value = align;
  }
  else if (el['file_href']) {
    el['file_href'].value = url;
  }
  win.close();
}

changes in Image button:

js: eDefFileDialog('image', { "title": "insert/edit image", "url": "image URL", "w": "width", "h": "height", "vs": "vert. space", "hs": "hor. space", "ttl": "title", "align": "align", "alt": "alternative text", "ok": "OK", "brw": "browse" }, '/imce/browse');

_________________________________________

align write manually; max 4 char in this case ;)

enjoy

There have been a few changes in the API providing an easier way to extend current image and link dialogs.
You should call eDefFileDialog() function with additional arguments(arrays) where they will be added as rows into the dialogs.
For instance, lets add hspace, vspace elements to the image dialog (just change the return value of the image button):

return "js:

//additional fields as arrays (title, input)
var hs = ['Hspace', eDefInputText('file_hspace', '', 25)]; // array having the title and form input.
var vs = ['Vspace', eDefInputText('file_vspace', '', 25)]; 

eDefFileDialog('image', $L, '$imce_url', hs, vs); // extra arguments(arrays) turn into rows

";

As in this example, any additional array argument sent to eDefFileDialog(), will turn into a row in the dialog and form elements will be processed automatically. However there are some important points to pay attention regarding the array structure.

As in ['Hspace', eDefInputText('file_hspace', '', 25)]
array's first element is the label for your additional field.
second element is the form input html. this can be any form element. The only requirement here is that the name of the field should be 'file_' + 'attribute name'. For example, for align attribute you should set it to 'field_align' and for style, it should be 'field_style', etc.
(eDefInputText creates <input type="text"... html that requires the parameters (name, value, size))

The default img dialog can detect if the selected text is a complete image tag and writes attribute values in the default dialog fields. Unfortunately this is not true for additional fields. To have the same functionality you should detect the selected text, get attributes of it and set them in your additional fields. Here is how to do this;

return "js:

// get image with attributes (or null if the selection is not an image)
var sel = editor.active.getSelection();// get selection
var img = editor.parseTag(sel, 'img'); // get image
var attr = img ? img.attributes : []; // get attributes

// create fields having attribute values
var hs = ['Hspace', eDefInputText('file_hspace', attr.hspace, 25)];
var vs = ['Vspace', eDefInputText('file_vspace', attr.vspace, 25)];

eDefFileDialog('image', $L, '$imce_url', hs, vs);

";

...for align attribute you should set it to 'field_align' and for style, it should be 'field_style', etc.

the bold ones should have been file

My question is like previous but about "a" tag.
How can i do, that my link title will be not only in title="", but also in tag.
for example. link: http://mysite.com, title=mysite
the module generate <a href=http://mysite.com title="mysite"></a>
But i need <a href=http://mysite.com title="mysite">mysite</a>

in library/default_buttons_functions.js find the line containing:
E.tagSelection(a.substr(0, a.length-4), '</a>');
and replace it with:
E.tagSelection(a.substr(0, a.length-4)+file.attributes.title, '</a>');