Froala编辑器自定义下拉菜单与动态值

Question

我正在使用Froala，但在创建一个带有动态选项集的自定义下拉列表时卡住了。我已经按照他们的常规方式创建了下拉列表，但是如果我们需要从数据库获取值，那么这种方式就毫无用处。

我想要创建一个“模板”下拉列表，其中有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
        },
    })
}

哪位能帮我动态创建下拉菜单？有什么帮助吗？

- Yunus Aslam

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支持团队咨询了此方法，并获得以下回复：

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

- TrueWill

Answer 2

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

- c23gooey