3

I'm loving wysihtml5 but I can't find any documentation about something as simple as adding a class to an element.

Basically what I'm looking for is a way to allow 2 different variations on the blockquote element:

blockquote.pull-left blockquote.pull-right

(where each class specifies different style attributes)

So ideally I'd like to create 2 additional toolbar buttons that allow me to not only use the formatBlock command (to wrap the selection withing a blockquote element) but also specify the blockquote's class.

Any idea?

Pierlo Upitup
  • 1,614
  • 4
  • 19
  • 27

1 Answers1

0

Try adding a custom function like this into a separate custom.js file for clarity:

wysihtml5.commands.custom_class = {
  exec: function(composer, command, className) {
    return wysihtml5.commands.formatBlock.exec(composer, command, "blockquote", className, new RegExp(className, "g"));
  },
  state: function(composer, command, className) {
    return wysihtml5.commands.formatBlock.state(composer, command, "blockquote", className, new RegExp(className, "g"));
  }
};

And then in your toolbar pass the class name through like this assuming the class is "pull-left":

<a data-wysihtml5-command="custom_class" data-wysihtml5-command-value="pull-left">Pull left</a>

You will also have to add any custom classes into the "whitelist" by going to the advanced.js file and adding them there under classes, otherwise the classes will be stripped out when you save.

Chris
  • 111
  • 1
  • 5