I am trying to edit the "Insert/edit Image" button. I currently have the default installation code for the button, which is different than that posted in the "I lost the Insert Image code, can someone help me?" issue in this queue. The code I have is:

js:
var S = E.getSelection();
var M = S.match(new RegExp('^\\[img(?:=(\\d+)x(\\d+))?](.+)\\[/img]$')) || ['', '', '', ''];
var form = [
 {name: 'src', title: 'Image URL', value: M[3], suffix: E.imce.button('attr_src'), required: true},
 {name: 'width', title: 'Width x Height', value: M[1], suffix: ' x ', attributes: {size: 3}, getnext: true},
 {name: 'height', value: M[2], attributes: {size: 3}}
];
var opt = {title: 'Insert/edit image'};
opt.submit = function(tag, form) {
  var el = form.elements;
  var src = el['attr_src'].value;
  var w = el['attr_width'].value;
  var h = el['attr_height'].value;
  E.replaceSelection('[img'+ (w*1 ? ('='+ w +'x'+ h) : '') +']'+ src +'[/img]');
};
E.tagDialog('img', form, opt);

This code is missing the "Alternative Text" variable, and I would also like to add a variable to set image float settings as I found on your project page in the comments section at (http://ufku.com/drupal/bueditor#comments). The code I found for that was:
{name: 'style', title: 'Image float', type: 'select', options: {'': '', 'float: left;': 'Left', 'float: right;': 'Right'}},

So, if I edit the "Insert/edit Image" code at all in the button editor (i.e. paste the Alternative text line from the "default code" you listed in that former issue or add the float variable, the bueditor completely disappears from my pages and the demo below the bueditor settings as soon as I hit "save configuration".
Can you please tell me what I'm doing wrong or post the proper code that should go here to make this button work and not cause my editor to disappear?

Comments

ufku’s picture

ufku commented

That's the BBCode image button. The "default editor" includes the HTML version. You should edit that. Or you can add a new editor as a copy of the default editor by clicking "Add the default editor" link at admin/settings/bueditor.

jen.c.harlan’s picture

jen.c.harlan commented

I have most html tags disallowed, and would rather use bbcode. Is there a way I can do this with bbcode?

ufku’s picture

ufku commented

AFAIK BBCode does not support multiple attributes at once in img tag. You need to choose one of dimensions, alt and alignment. Besides, dimension and alt attributes use the same structure which is [img=DIMorALT]. You can't use both at the same time.

Try this code that implements all three.

js:
var form = [
{name: 'src', title: 'Image URL', suffix: E.imce.button('attr_src'), required: true},
{name: 'width', title: 'Width x Height', suffix: ' x ', attributes: {size: 3}, getnext: true},
{name: 'height', attributes: {size: 3}},
{name: 'align', type: 'select', options: {'': '', 'left': 'Left', 'right': 'Right'}},
{name: 'alt', title: 'Alt text'},
];
var opt = {title: 'Insert/edit image'};
opt.submit = function(tag, form) {
  var el = form.elements;
  var src = el['attr_src'].value;
  var w = el['attr_width'].value;
  var h = el['attr_height'].value;
  var a = el['attr_align'].value;
  var alt = el['attr_alt'].value;
  E.replaceSelection('[img'+ (w*1 ? ('='+ w +'x'+ h) : alt ? ('='+ alt) : '') + (a ? ' align='+ a : '') +']'+ src +'[/img]');
};
E.tagDialog('img', form, opt);
ufku’s picture

ufku commented
Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.