2

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

mikeagoff
  • 376
  • 2
  • 12
  • First of all in the snippet provided there is badly defined object. Second `action` is a duplicate key in the `onElementSelect` object. If it's just the case of typing mistake and original code doesn't contain it please correct the question – Kirill Slatin Jul 23 '15 at 17:41
  • Can you elaborate on an [MCVE](http://stackoverflow.com/help/mcve) in this [plunker](http://plnkr.co/edit/NixE6HylQmheXg2CUomv?p=preview)? – Kirill Slatin Jul 23 '15 at 17:49
  • @KirillSlatin - Sorry for the delay. I have added a plunkr to the question. http://plnkr.co/edit/tm1dMv?p=preview – mikeagoff Jul 27 '15 at 16:24
  • [Official docs](https://github.com/fraywing/textAngular/wiki/Customising-The-Toolbar) even don't have `onElementSelect` mentioned. This seem to be some kind of internal thing. According to sources it triggers `ta-element-select` event AND it can only be applied to `a` and `img` tags. At the same time `ta-bind` seems to be isolating its scope so you can't even provide your custom `ng-click` handler on the table. Sorry, I don't think I can help much. I suppose the best option would be to open an issue on github and ask author of textAngular directly – Kirill Slatin Jul 27 '15 at 19:20
  • @KirillSlatin, I was hoping to get him to answer here, since the question was originally just how do I do "x". I hate opening issues on github pages if its not really a bug. But it sounds like this may be something he could "fix" in a later version. Thanks! – mikeagoff Jul 28 '15 at 10:51

1 Answers1

4

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

mikeagoff
  • 376
  • 2
  • 12