Theme buttons for 5.x-.. / Split the button line [#227885]

Hi all,

In another thread (http://drupal.org/node/222067), I pointed to the fact that the buttons in Bueditor 5.x can't (easily) be split over several lines. When you have more than 10-15 buttons, this gives a rather "spaghetti-like" look, and it is not very user-friendly.

It would be nice to be able to have some kind of "split-the-button-line-here" marker. It appears that this can be done in the 6.x version of Bueditor, where buttons can be themed. It would be soooo nice if this could be backported to version 5.x . For the time being, switching to Drupal 6.x is not an option, because the major CCK and Views modules haven't yet moved on to 6. So, for the foreseeable future, I'll (have to) stick with 5.x.

Is there any kind soul who could look into this? Full theming isn't even necessary, and it doesn't have to be anything fancy, just a "split the button line here", that's all.

Thanks!!

Comments

Comment #1

modul CreditAttribution: modul commented 11 June 2008 at 20:08

I'm still anxiously hoping for someone willing to add a "split the button line here" possibility in Bueditor for 5.x . It's kind of discomforting to read in my mail of February that the reason for sticking with Drupal 5.x, i.e. the unavailability of CCK and Views for Drupal 6, is, after almost 4 months, still valid. Anyway, that's nothing to worry about here.
But my hopes for a "split the button line here" option for Bueditor for D 5 are still alive. Anyone, anyone??

Comment #2

ufku CreditAttribution: ufku commented 12 June 2008 at 02:11

change the editor.template function in bueditor.js with this.

editor.template = function () {
  if (typeof editor.tplHTML != 'undefined') return editor.tplHTML;
  editor.tplHTML = '';
  var buttons = [];
  for (var i=0, j=0; b=editor.buttons[i]; i++) {
    if (b[0].substr(0, 4) == 'tpl:') {
      editor.tplHTML += b[1];
      continue;
    }
    if (b[1].substr(0, 3) == 'js:') b[4] = new Function('E', b[1].substr(3));
    var inner = b[2].search(/\.(png|gif|jpg|jpeg)$/i) != -1 ? ('type="image" src="'+ editor.path +'icons/'+ b[2] +'" class="editor-image-button"') : ('type="button" value="'+ b[2] +'" class="editor-text-button"');
    editor.tplHTML += '<input '+ inner +' onclick="editor.buttonClick(%n, '+ j +'); return false;" id="editor-%n-button-'+ j +'" title="'+ b[0] +'" accesskey="'+ b[3] +'" />';
    buttons[j] = b;
    j++
  }
  editor.buttons = buttons;
  return editor.tplHTML;
}

Then create a button with title(tpl:), content(any html code. or <br /> for a break), weight(specify this in order to put the html code(break) into the correct place)

This is a quick and dirty hack. Please test it throughly and report back. I'll decide to create a proper patch or not according to your feedback.

Comment #3

modul CreditAttribution: modul commented 12 June 2008 at 09:10

Status:

Active

» Fixed

Hi Ufku, thanks for your swift and WORKING hack!!! As far as I can tell, it is doing exactly what it is supposed to do. I tested it with a couple of Bueditor instances, and there is nothing to say except that it works :-). I therefore changed the status of this feature request to "fixed".

If you put it into your final code, my only suggestion would be to change the naming requirement. "tpl:" is a rather unorthodox name for what it is doing. Maybe "break:" or something would make more sense. But hey, that's just a silly detail. Your code works, and I can't thank you enough!