具有动态值的 Froala 编辑器自定义下拉菜单答案

【问题标题】：Froala editor custom dropdown with dynamic values具有动态值的 Froala 编辑器自定义下拉菜单
【发布时间】：2015-12-16 02:13:01
【问题描述】：

我正在使用 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
        },
    })
}

这将动态创建下拉菜单。有什么帮助吗？

【问题讨论】：

标签： javascript jquery froala

【解决方案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 支持运行此方法并被告知：

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

【讨论】：

【解决方案2】：

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

【讨论】：