Froala editor custom dropdown with dynamic values

Question

I am using Froala and I am stuck creating a custom drop down with dynamic option sets in it. I have used their common way to create the drop down but that is useless if we have to fetch the values from db.

I want to make a "Templates" dropdown with 10 options to select which will be created dynamically.

Currently we create a custom drop down this way,

options: {
    'Template One': function(e){
    _this.editable('insertHTML', "<p>This is template one</p>", true);
    },
}

I want this to be dynamic, meaning I will fetch the names and content of the templates from database and add them in the option set accordingly.

something like,

options : {
    $.each(alltemplates, function(i, h){
       i: function(e){   /// "i" will be the name of the template fetched from db
            _this.editable('insertHTML', h, true); // h is the html fetched from db
        },
    })
}

which will create the drop down dynamically. Any help please ?

Answer 1

Expanding on @c23gooey's answer, here's what we came up with for a similar problem (inserting dynamically-generated mail-merge placeholders).

var commandName = 'placeholders',
    iconName = commandName + 'Icon',
    buildListItem = function (name, value) {
        // Depending on prior validation, escaping may be needed here.
        return '<li><a class="fr-command" data-cmd="' + commandName +
          '" data-param1="' + value + '" title="' + name + '">' +
          name + '</a></li>';
    };

// Define a global icon (any Font Awesome icon).
$.FroalaEditor.DefineIcon(iconName, { NAME: 'puzzle-piece' });

// Define a global dropdown button for the Froala WYSIWYG HTML editor.
$.FroalaEditor.RegisterCommand(commandName, {
    title: 'Placeholders',
    type: 'dropdown',
    icon: iconName,

    options: {},

    undo: true,
    focus: true,
    refreshAfterCallback: true,

    callback: function (cmd, val, params) {
        var editorInstance = this;

        editorInstance.html.insert(val);
    },

    refreshOnShow: function ($btn, $dropdown) {
        var editorInstance = this,
            list = $dropdown.find('ul.fr-dropdown-list'),
            listItems = '',
            placeholders = editorInstance.opts.getPlaceholders();
              // access custom function added to froalaOptions on instance

        // use a different iteration method if not using Angular
        angular.forEach(placeholders, function (placeholder) {
            listItems += buildListItem(placeholder.name, placeholder.value);
        });

        list.empty().append(listItems);

        if (!editorInstance.selection.inEditor()) {
            // Move cursor position to end.
            editorInstance.selection.setAtEnd(editorInstance.$el.get(0));
            editorInstance.selection.restore();
        }
    }
});

We ran this method by Froala support and were told:

The editor doesn't have any builtin mechanism for using dynamic content when showing the dropdown, but your solution is definitely a good one.

Answer 2

Use the refreshOnShow function to change the options dynamically.