带有复选框的 TinyMCE 自定义下拉设置值答案

【问题标题】：TinyMCE custom dropdown set value with checkbox带有复选框的 TinyMCE 自定义下拉设置值
【发布时间】：2016-04-17 16:07:12
【问题描述】：

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

它用复选框返回值的菜单项数组，像这样，

然后我在 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
        });
    }
};

它显示在下拉列表中，像这样，

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

【问题讨论】：

标签： javascript tinymce

【解决方案1】：

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

查看visualblocks 插件，了解如何将可选项目添加到菜单的示例。
查看advlist 插件，了解如何将可选项目添加到工具栏按钮的示例。
查看tinymce.js 主文件，了解它如何实现fontsizeselect 工具栏选项（也是可选择的工具栏按钮）。

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

【讨论】：