带有动态值的 Froala 编辑器自定义下拉列表

Question

我正在使用 Froala，但我无法创建一个包含动态选项集的自定义下拉列表。我使用了他们常用的方法来创建下拉菜单，但是如果我们必须从 db 中获取值，那这是无用的。

我想制作一个带有 10 个选项的“模板”下拉列表，以选择将动态创建的选项。

目前我们以这种方式创建自定义下拉菜单，

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

我希望这是动态的，这意味着我将从数据库中获取模板的名称和内容，并将它们相应地添加到选项集中。

就像是，

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
        },
    })
}

这将动态创建下拉列表。请问有什么帮助吗？

Answer 1

扩展@c23gooey 的答案，这是我们针对类似问题提出的问题（插入动态生成的邮件合并占位符）。

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();
        }
    }
});

我们由 Froala 支持运行此方法，并被告知：

编辑器在显示下拉列表时没有任何使用动态内容的内置机制，但您的解决方案绝对是一个不错的解决方案。

Answer 2

使用refreshOnShow函数动态更改选项。