Wysiwyg-editor: Dynamically load dropdown options

[Nucs]

It would be nice if we could have dynamic option loading via function in custom dropdown that is triggered on the toolbar icon click.

Currently what we have:

$.FroalaEditor.RegisterCommand('...',
                {
                   ...
                    options: {
                        "1": "hey",
                        "2": "hey",
                    },
                   ...
                });

What would be nice to have:

$.FroalaEditor.RegisterCommand('...',
            {
                ...
                options: function () {
                    //do some magic loading here, from ajax for example.
                    return {
                        "1": "hey",
                        "2": "hey"
                    }
                }
                ...
            });

At the moment I have to do nasty workarounds with html modifications to do something like that.

Bonus Feature:
Allow html opt to load dynamically too on toolbar icon click.

Thanks, Eli :D

[stefanneculai]

I understand your point, however this is unlikely to be added as an option built-in very soon because of the way the dropdowns are now designed. I am marking this as a feature request and it is in our attention.

[ursoforte]

Sorry for writing in the closed topic.
My case is identical to this;

My current solution:

var options;
    $.get('/options/get', {}, function(){}, 'json')
    .done(function(response) {
        options = response;
    })
    .fail(function() {
        //alert( "error" );
    });

// Command
$.FroalaEditor.RegisterCommand("dynCommand", {
        ...
       // options:{}, //off
        html: function () {
            var html = "<ul class="fr-dropdown-list" role="presentation">";
            for (var i = 0; i < options.length; i++) {
                html += '<li role="presentation"><a class="fr-command" tabindex="-1" role="option" data-cmd="campaigns" data-param1="' + options[i].key + '" aria-selected="false">' + options[i].value + '</a></li>';
            }
            html += '</ul>';
            return html;
        },
        ...
    });

I have not found a better way to do this yet, if anyone has one, please write.

[stefanneculai]

We've just put together a public roadmap with the most popular features. 😍 There you can vote your favorite one, provide feedback or make new suggestions: https://wysiwyg-editor-roadmap.froala.com/public.

[FelipeFelizardo]

I need to refresh the options of the Custom Dropdown, I could not figure out how to do it.

this.campoDinamicoService
.listar()
.subscribe( list => {
const opcoesDropDown = {};

      list.map(campo => {
        opcoesDropDown[`{:${campo.tag}:}`] = campo.descricao;
      });

      $.FroalaEditor.DefineIcon('camposDinamicos', { NAME: 'bookmark' });
      $.FroalaEditor.RegisterCommand('camposDinamicos', {
        title: 'Campos Dinamicos',
        type: 'dropdown',

        // Options for the dropdown.
        options: opcoesDropDown,
        undo: true,
      });