Question

我正在使用Froala，我无法使用动态选项集创建自定义下拉列表。我已经使用他们常用的方法来创建下拉列表，但如果我们必须从db中获取值，则无用。

我想制作一个“模板”下拉列表，其中有10个选项可供选择动态创建。

目前我们以这种方式创建自定义下拉列表

[10, 30, 50, 70, 90]

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

之类的，

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

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

Answer 1

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

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功能动态更改选项。

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

2 个答案: