使用AngularJs在自定义TinyMCE编辑器中添加动态数据

Dynamic data added in custom TinyMCE Editor using AngularJs

本文关键字:添加 动态 数据 编辑器 TinyMCE AngularJs 自定义 使用      更新时间:2024-06-09

我使用的是anglarjs TinyMCE编辑器,https://www.tinymce.com/docs/integrations/angularjs/,在这里,我在工具箱中添加了自定义下拉按钮,当我使用静态值时,它工作得很好,但实际上我不知道如何在这个下拉列表中加载动态数据值。

setup : function ( editor ) {
             editor.addButton( 'customDrpdwn', {
                text : 'Customers List',
                type: 'menubutton',
                icon : false,
                menu: [
                  {
                    text: 'Customer 1',
                    onclick: function(){
                      alert("Clicked on Customer 1");
                    }
                  },
                  {
                    text: 'Customer 2',
                    onclick: function(){
                      alert("Clicked on Customer 2");
                    }
                  }
                ]
            });
        }, 
  }; 

我试着在菜单文本字段中加载动态值,但我遇到了错误。动态加载我的代码后,像这样-

$scope.customerList = ['Customer 1','Customer 2'];
setup : function ( editor ) {
     editor.addButton( 'customDrpdwn', {
        text : 'Customers List',
        type: 'menubutton',
        icon : false,
        for(var i =0; i< $scope.customerList.length; i++){
          menu: [
            {
              text: $scope.customerList[i],
              onclick: function(){
                alert("Clicked on Customer 1");
              }
            }
          ]
        }
    });
} 

现在,我的问题是,在这个自定义字段中加载动态数据是可能的。如果是,那么我如何动态加载数据?请帮帮我。

这里有一种方法:

$scope.customerList = ['Customer 1','Customer 2'];
// first make all the menu items
var menuItems = [];
$scope.customerList.forEach(function(customer, index){
    item = {
        'text': customer,
        onclick: function(){
            alert("Clicked on " + customer);
        }
    };
    menuItems.push(item);
});
$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 // then just add it here
        });
    }
};