How to extend image or link dialogs to get values for other attributes of "img" and "a" tags from the user?
How to create a dialog for any tag just like image or link dialogs?

There is the E.tagDialog(tag, fields, options) method(introduced by default library) to create a dialog for
any tag.
tag -> tag name
fields -> an array of attributes that are eiter strings or objects.
options -> object containing optional parameters:

The simplest form, for example:
E.tagDialog('div', ['id', 'class', 'style', 'html']);//html is a special keyword that represents inner html
will create a DIV Tag Dialog requesting values of attributes id, class and style and also the inner html.
It will also detect if the current selection is a proper DIV tag, and if so, will put the values of attributes to the corresponding fields.
After submission, it will enclose/replace the selection in the textarea.

You might have noticed that fields in image/link dialogs are declared as objects not as strings. That's a
customized form of declaring attributes. It is ideal to use an object if you want
- a field type other than textfield (type: 'select', options: {'left': 'Left', 'right': 'Right'})
the default type is text and other supported types are select, textarea, hidden
- a custom label (title: 'Image URL')
- a default value (value: ' ')
- some prefix or suffix text or html (prefix: '[ ', suffix: ' ]')
- to join two fields in a single line like in image width & height fields (getnext: true)
- to set custom attributes for the field (attributes: {size: 10, style: 'width: 200px'})
- to force value entry (required: true)

Note:
- The field object must have a name property that specifies the attribute name. ex:{name: 'href'}
- If a field value has new a line character(\n) in it, then the field type automatically becomes "textarea"

So lets add an "align" attribute field to the image dialog(note that it's not XHTML compliant):

The field object to pass to E.tagDialog is;

Lets add it to the form in the image button's content:

That's it. We now have an image dialog which can also get/set the "align" attribute of an image tag.

How to create a button that gets user input and adds it to the textarea?

If you want to use a complete form for user input, then use the E.tagDialog method with a custom submit handler.
If you want to get just a single input you may consider using javascript prompt().
Here is an example that gets image URL as a user input

How to extend the functionality of Headings button to create a specialized tag chooser?
How to create an image chooser(ie. smiley chooser) using E.tagChooser?

Firstly, we should understand what E.tagChooser does.
E.tagChooser(tags, options)

Parameter "tags": an array of tag info, each having the format:
[tag, title, attributes]
tag: the tag that will enclose the selected text in the textarea
title: the text or html to help the user choose this tag
attributes: attributes that will be inserted inside the tag. ex:{'id': 'site-name', 'class': 'dark'}

ex tags: [ ['span', 'Red', {'style': 'color: red'}], ['span', 'Blue', {'class': 'blue-text'}] ]
this will create two options:
Red (inserting <span style="color: red"></span>)
Blue (inserting <span class="blue-text"></span>)

Parameter "options": an object containing the optional parameters.
It defaults to {wrapEach: 'li', wrapAll: 'ul', applyTag: true, effect: 'slideDown'}

wrapEach: the html tag that will enclose each option.
wrapAll: the html tag that will enclose the whole block of options.
applyTag: boolean allowing the user to preview the effect of the tag.
effect: jQuery effect ('slideDown' or 'fadeIn')

Knowing the details we can create our customized tag chooser.
Let's, for example, add styled headings to the default header chooser.

Now, let's create an image chooser
There will be no title for our tags since we will use applyTag to preview the image that will be inserted. However we will be using a line break for every N(=4 in our example) image in order to create rows of options. Otherwise,
all of them will be placed in a single row.

While inserting a single tag should we use the classic <tag>%TEXT%</tag> pattern or the E.toggleTag('tag') ?
What is the difference between <tag>%TEXT%</tag> and js:E.toggleTag('tag') ?

First of all, the classic tag insertion method does not require any additional library, whereas E.toggleTag is a part of the bue.misc.js library.

- Classic method preserves the selected text after tag insertion, whereas E.toggleTag selects the whole insertion.
Classic method: converts the selection "foo" to "<tag>foo</tag>", ("foo" still being selected)
E.toggleTag('tag'): converts the selection "foo" to "<tag>foo</tag>" (<tag>foo</tag> is selected)

- Classic method doesn't parse the selection to check if it is an instance of the tag, whereas E.toggleTag does and toggles it.
Classic method: converts the selection "<tag>foo</tag>" to "<tag><tag>foo</tag></tag>"
E.toggleTag('tag'): converts the selection "<tag>foo</tag>" to "foo"

- In classic method you define the attributes of the tag in the usual way, whereas in E.toggleTag you pass them as an object
<tag class="foo" id="bar">%TEXT%</tag> <=> E.toggleTag('tag', {'class': 'foo', 'id': 'bar'})

- In classic method It's possible to use the selected text for any purpose, whereas in E.toggleTag the only goal is to html.
Classic method can use the selection multiple times and do anything with it: [bbcode]%TEXT%[/bbcode]: (%TEXT%)