在 @c23gooey 的答案基础上,我们为类似的问题(插入动态生成的邮件合并占位符)提出了以下解决方案。
var commandName = 'placeholders',
iconName = commandName + 'Icon',
buildListItem = function (name, value) {
return '<li><a class="fr-command" data-cmd="' + commandName +
'" data-param1="' + value + '" title="' + name + '">' +
name + '</a></li>';
};
$.FroalaEditor.DefineIcon(iconName, { NAME: 'puzzle-piece' });
$.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();
angular.forEach(placeholders, function (placeholder) {
listItems += buildListItem(placeholder.name, placeholder.value);
});
list.empty().append(listItems);
if (!editorInstance.selection.inEditor()) {
editorInstance.selection.setAtEnd(editorInstance.$el.get(0));
editorInstance.selection.restore();
}
}
});
我们向Froala支持团队咨询了此方法,并获得以下回复:
编辑器在显示下拉列表时没有任何内置机制来使用动态内容,但您的解决方案绝对是一个好方法。