TinyMCE自定义下拉列表设置值与复选框

Question

我正在使用TinyMCE文本编辑器。我在工具箱中添加了自定义下拉菜单按钮。在这个自定义菜单按钮中，我想用复选框加载动态值。

我创建了一个使用复选框返回值的数组。代码是 -

  $scope.customerList = ['Customer 1','Customer 2'];

  var menuItems = [];
  $scope.customerList.forEach(function(customer, index){

    var thisCheckbox  = "<input type='checkbox' value='"+customer+"' />";
      item = {
          'text': thisCheckbox
      };
      menuItems.push(item);
  });

menuItems数组返回带复选框的值，如下所示，

然后我在Tinymce工具箱中添加了这个menuItems -

$scope.tinymceOptions = {
    plugins: 'link image code',
    toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code | customDrpdwn',
    setup: function(editor){
        editor.addButton( 'customDrpdwn', {
            text : 'Customers List',
            type: 'menubutton',
            icon : false,
            menu: menuItems
        });
    }
};

它显示在下拉列表中，如

它没有获得带有值的复选框。我该如何解决这个问题。 谢谢！

Answer 1

TinyMCE不支持以您尝试使用复选框的方式向菜单或工具栏按钮添加项目 - 但它支持菜单和工具栏按钮中的可选选项。

• 查看visualblocks插件，了解如何向菜单添加可选项目的示例。

• 查看advlist插件，了解如何将可选项添加到工具栏按钮的示例。

• 在主tinymce.js文件中查看它如何实现fontsizeselect工具栏选项（也是可选择的工具栏按钮）。

这些示例应该为您提供实现可选选项所需的内容。