I have implemented a custom button that allows a user to add a table to the editor, which works fine. However, I can't seem to get the onElementSelect to fire when clicking in the newly added table. The goal is that when a user clicks on a table, a popover will displayed that will allow the user to edit the number of columns/rows. For now, I'm just triggering an alert.
taRegisterTool('insertTable', {
iconclass: 'fa fa-table',
tooltiptext: 'Insert table',
onElementSelect: {
element: 'td',
action: function(event, $element, editorScope){
alert('table clicked!');
// once we get here, I will add the necessary code to implement the table editor
},
action: function($deferred){...
...
});
taOptions.toolbar[1].push('insertTable');
I have tried setting the element to td, tr, tbody, and table, but none of those work. If I set it to a or img, clicking on one of those elements in the editor fires the alert.
I've added custom toolbar buttons for inserting links and images and those work fine using this method.
Does textAngular not allow selection of the table elements?
Plunkr of where I'm stuck: http://plnkr.co/edit/tm1dMv?p=preview
After much digging, I found the following:
In the textAngularSetup.js file, around line 55, you can add additional elements that you would like to be able to create click events on.
.value('taSelectableElements', ['a','img','td'])
That's it!
Plunkr updated with working example: http://plnkr.co/edit/tm1dMv?p=preview