How do I add toolbar icons to the editor?


#1

Hello,

I have create a BBCode for my discourse. GitHub

The user can use [card]Cardname[/card] to link a singel card.
For more a Cardlist (deck) they can use

[deck]
4 Shinen of Life's Roar
2 Bow of Nylear
....
[/deck]

I will add two costum Icon to the editor. One for [card] and the other for [deck].
They should post and mark the card or cardlist and if they click on the icon this content will be in the right BBcode.

Where/How can i found some tipps how i make this.


(Jeff Atwood) #2

Not sure if there is a good way to do this at the moment, @eviltrout?


(cpradio) #3

Look at the composer help button plugin or the vb emoji plugin (seems I was wrong about vb emoji). Both of them do this.


(Jacob Chapel) #4

After some time I did this for my forum:

Has to be included like this:


#5

Thanks that help alot.

But now i have a other problem.

I have set one Icon and this work´s.
But i need two Icons, if i set these One for Card and One for Decks

https://github.com/ImperatorTheo/mtg-bbcode/blob/master/assets/javascripts/mtg-toolbar.js

I become no error in the console if i click the Icons but nothing happens.


(Robin Ward) #6

That code should work. I would add console.log statements inside your callbacks and try and figure out where the code stops running.


(Jacob Chapel) #7

I don’t see any issues with the code either. If you are seeing the buttons, the code is working it is just not firing in your functions correctly.

Adding some logging to your functions will allow you to track down where the cost is stopping.


#8

@eviltrout and @chapel

i moved the variable startTag,endTage,startRe,endRe in the functions and it work´s

var buttonCard = 'wmd-card-button';
var buttonDeck = 'wmd-deck-button';


function toggleCard(chunk) {
  var startTag = '[card]';
  var endTag = '[/card]';

  var startRe = /\[card\]$/;
  var endRe = /^\[\/card\]/;

  if (!chunk) {
    $('#' + buttonCard).click();
    return;
  }

  chunk.trimWhitespace(true);

  var tagBefore = startRe.exec(chunk.before);
  var tagAfter = endRe.exec(chunk.after);

  if (tagBefore || tagAfter) {
    chunk.before = chunk.before.replace(startRe, '');
    chunk.after = chunk.after.replace(endRe, '');
  } else {
    chunk.startTag = startTag;
    chunk.endTag = endTag;

    if (!chunk.selection) {
      chunk.selection = 'Put hidden content here';
    }
  }
  return;
}

function toggleDeck(chunk) {
  var startTag = '[deck]';
  var endTag = '[/deck]';

  var startRe = /\[deck\]$/;
  var endRe = /^\[\/deck\]/;

  if (!chunk) {
    $('#' + buttonDeck).click();
    return;
  }

  chunk.trimWhitespace(true);

  var tagBefore = startRe.exec(chunk.before);
  var tagAfter = endRe.exec(chunk.after);

  if (tagBefore || tagAfter) {
    chunk.before = chunk.before.replace(startRe, '');
    chunk.after = chunk.after.replace(endRe, '');
  } else {
    chunk.startTag = startTag;
    chunk.endTag = endTag;

    if (!chunk.selection) {
      chunk.selection = 'Put hidden content here';
    }
  }
  return;
}

window.PagedownCustom.appendButtons.push({
  id: buttonCard,
  description: 'Karten [card][/card] CTRL+S',
  execute: toggleCard,
  shortcut: 's'
});

window.PagedownCustom.appendButtons.push({
  id: buttonDeck,
  description: 'Deck [deck][/deck] CTRL+S',
  execute: toggleDeck,
  shortcut: 'e'
});  

thanks you!