Add buttons

[ezersky]

Hi!

How to add some buttons to http://jhollingworth.github.com/bootstrap-wysihtml5/
I need add button like a «code» with tags

<code></code>

[adampatterson]

I as well need to add a button that will open a modal and allow me to insert HTML.

#152

[balexandre]

I would love to have left center and right alignments buttons 👍

[tmaiaroto]

Yea, this is missing a lot of functionality of wysihtml5. It seems to hide it or cut it off in some manner. I'm going to have to rip through this but would rather not. I'm hoping there's a way to extend things... I'd love to add a speech button for starters (tried appending it to the toolbar with the load event but I imagine it's too late at that point). Then I'd love to start building plugins. Which I see how to change up the template for things, but will need greater control.

Also tried with custom templates key, but it didn't seem to work either. I could change existing ones but couldn't add new buttons.

A code button would be a big +1 from me.

[tmaiaroto]

Yay, figured it out.

$('#your-textarea').wysihtml5({
    toolbar: { speech: '<li><a data-wysihtml5-command="insertSpeech">speech</a></li>' }
});

I imagine custom commands will need to be built using the functionality of https://github.com/xing/wysihtml5 and then referenced here...

[tmaiaroto]

As far as your code concerns, you can keep the code tag by doing:

parserRules: {
    tags: {
        code: {}
        }
}

In the options you pass to wysihtml5() but you're going to still need a button that runs a command to wrap the code in a <code> block unless you wanted to just set html: true and manually do it. If you also set stylesheets: ['bootstrap.min.css'] (whatever your bootstrap css path is) then you'll see that code block in the editor turn red and have a gray background.

[tmaiaroto]

You can add blocks with:

$('#your-textarea').wysihtml5({ toolbar: {
   code:  function(locale, options) {
    return '<li><a class="btn" data-wysihtml5-command="formatInline" data-wysihtml5-command-value="code" href="javascript:;" unselectable="on"><i class="icon-beer"></i></li>'
   }
});

Now you're all set for the blocks...I'm trying to figure out how to do even more though.

[tmaiaroto]

Ok, it's a little hacky, but I pasted it all out for everyone. If you want a really bad ass editor, use this:

$('.wysihtml5').wysihtml5('deepExtend', {
                stylesheets: ['/li3b_core/css/bootstrap.min.css'],
                toolbar: {
                    speech: '<li>' +
                            '<a class="btn" data-wysihtml5-command="insertSpeech" title="Voice input" href="javascript:;" unselectable="on"><i class="icon-volume-up"></i></a>' +
                        '</li>',
                    code:  function(locale, options) {
                        return '<li><a class="btn" data-wysihtml5-command="formatInline" data-wysihtml5-command-value="code" href="javascript:;" unselectable="on"><i class="icon-th-large"></i></li>'
                    },
                    insertAnything:  function(locale, options) {
                            return '<li>' +
                                '<a class="btn" data-wysihtml5-command="insertHTML" href="javascript:;" data-toggle="modal" data-target="#insertAnythingModal" unselectable="on"><i class="icon-asterisk"></i></a>' +
                                '<div id="insertAnythingModal" data-wysihtml5-dialog="insertHTML" class="modal hide fade">' +
                                    '<div class="modal-header">' +
                                        '<a class="close" data-dismiss="modal">&times;</a>' +
                                        '<h3>Insert Some Stuff</h3>' +
                                    '</div>' +
                                    '<div class="modal-body">' +
                                        '<textarea id="myJazz"></textarea>' +
                                    '</div>' +
                                    '<div class="modal-footer">' +
                                        '<a class="btn" href="javascript:;" data-dismiss="modal">Cancel</a>' +
                                        '<a class="btn btn-primary" data-dismiss="modal" data-wysihtml5-command="insertHTML" onClick="$(this).attr(\'data-wysihtml5-command-value\', $(\'#myJazz\').val()); $(\'#myJazz\').val(\'\')" data-wysihtml5-command-value="jazz" href="javascript:;" unselectable="on">Insert</a>' +
                                    '</div>' +
                                '</div>' +
                            '</li>';
                    },
                },
                html: true,
                parserRules: {
                    classes: {
                      "middle": 1,
                      "icon-beer": 1,
                      "prettyprint": 1
                    },
                    tags: {
                        code: {},
                        pre: {},
                        strong: {},
                        em: {},
                        i: {}
                    }
                }
            });

Basically... You're using the "insertHTML" command that exists in wysihtml5. The first anchor doesn't really do what "insertHTML" normally does, it just brings up the modal. The link within the modal then sets the data attribute.

Alternatively, you can insert any text with "insertHTML" in a static manner like so:

insertThis: function(locale, options) {
                        return '<li><a class="btn" data-wysihtml5-command="insertHTML" data-wysihtml5-command-value="I got inserted." href="javascript:;"><i class="icon-ok"></i></a></li>';
                    }

Note: You can not do both because you can only have one of each command.
So it's a bit hacky, but works. I suppose you could make that modal do a bunch of stuff and then send back the final HTML value, combining the command into a big multi-function button. It kinda stinks you can't add multiple of the same command because it could get confusing and leave you in a situation of being limited.

[tmaiaroto]

You can also look at this guy's solution: http://itsnot.freehostia.com/wysihtml5/wysihtml5-new.htm ... But you have to have focus and I think have something typed in order for the insert to work. You may be able to fix it up so it works a little nicer though.

[tmaiaroto]

As it turns out, after all this hard work...The thing submits an empty string for me. So wysihtml5 is dead to me. Moved to CKEditor. So glad to have wasted an entire day. Hopefully this helps someone though.

[gadicc]

@tmaiaroto, your code was a total timesaver... i'm sorry it didn't work out for you but it worked out great for me. I just got the value from the textarea using jQuery val(), and it worked perfectly.

[OneDivZero]

@tmaiaroto thanks for your nice work! It helped me really to figure out some cool internals. Despite all that, I think what you've tried should not be impossible. Maybe it is not the right way to trust on the internal commands of this plugin. Why didn't you just apply a click-handler on your a-tag in the modal and then do this stuff bypassed? This should work in theory. Even if this plugin has some misterious behaviour when you'll dig in a bit, it's really worth to customize it further.

[tmaiaroto]

Well, now that my frustrations have gone away =) I may give it another shot haha.

[brian-spinos]

how can I use a template for the font-style drop-down button??

thanks in advance!

[BobMabena]

No word on allowing custom buttons?
I would like to be able to insert a time stamp (and a horizontal line) into my editor.