Add a custom dropdown/button to Redactor WYSIWYG

Question

I have two questions:

1. I'm trying to had a button like this :

    buttons: buttons, buttonsCustom: { sh: { title: 'Syntax Highlighter', callback: function(){ var html = "<pre class='brush:'></pre>"; this.execCommand('inserthtml', html); } } } 

   My button appears but when i click on it, it say that "this" hasn't an "execCommand" function. How does it work ? How can i say that "this" is Redactor ? You know what i mean ?

2. Is it possible to create a dropdown list ?

Answer 1

I wanted to add a custom button like in redactor. I took your code and i changed the code for my purpose. It works for me you can take a look :

$(document).ready(
    function()
    {
        $('.redactor').redactor({ 
            focus: true,
            buttonsAdd: ['|', 'token'], 
            buttonsCustom: {
                token: {
                    title: 'Ajouter une variable', 
                    dropdown: {
                        header: {title: 'Entête',callback: function(obj){obj.insertHtml('%header%');}},
                        footer: {title: 'Signature',callback: function(obj){obj.insertHtml('%footer%');}},
                        last_name: {title: 'Nom',callback: function(obj){obj.insertHtml('%last_name%');}},
                        first_name: {title: 'Prénom',callback: function(obj){obj.insertHtml('%first_name%');}},
                        date: {title: 'Date',callback: function(obj){obj.insertHtml('%date%');}},
                        contract: {title: 'Contrat',callback: function(obj){obj.insertHtml('%contract%');}}
                    }
                } 
            }
        }); 
    }
);

Cheers

Answer 2

I fixed it by myself:

callback: function(obj){
  var html = "<pre class='brush:'></pre>";
  obj.execCommand('inserthtml', html);
}

Answer 3

Looking at the redactor source (latest version 8.2.6) I noticed that you can pass a fourth parameter to the plugin API's addBtn function to describe a dropdown. So, say you want to add a Font Size dropdown menu from inside a plugin:

RedactorPlugins.fontSize = {

    init: function(obj) {

        btnCallback = function(obj,event,key) {
            // button actions, if any
        }

        dropdown = {
            small: {
                title: 'Small'
                callback: function(obj,event,key) { //set the font size to small }
            }
            medium: {
                title: 'Medium'
                callback: function(obj,event,key) { //set the font size to medium }
            }
        }

        this.addBtn('fontSize','Change font size', btnCallback, dropdown);
    }

}