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

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

Answer 2

在@ 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支持这个方法，被告知：

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