Dynamic data added in custom TinyMCE Editor using AngularJs

Question

I am using anglarjs TinyMCE editor, https://www.tinymce.com/docs/integrations/angularjs/, here, I added custom dropdown button in toolbox, and Its working fine when I used static value,but I don't know actually how can I loaded dynamic data value in this dropdownlist.

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");
                    }
                  }
                ]

            });
        }, 
  };

I try myself to load dynamic value in Menu text field, but I'm getting error. After dynamic loading my code like this -

$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");
              }
            }
          ]
        }
    });
}

Now, my question is that, this is possible to load dynamic data in this custom field. If so then how can I load data dynamically? Please help me.

you can use this way onPostRender: function() { var ctrl = this; $.getJSON( url , function( menu) { ctrl.state.data.menu = ctrl.settings.menu = menu; }); } — uzaif
– uzaif, Commented Apr 13, 2016 at 11:02

leninhasda · Accepted Answer · 2016-04-13 18:19:24Z

2

here is one way to do this:

$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
        });
    }
};

answered Apr 13, 2016 at 18:19

leninhasda

1,76012 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic data added in custom TinyMCE Editor using AngularJs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related