TinyMCE 4 "Custom Insert Row" Button

Question

I'm using TinyMCE 4 for editing content. I need to add a custom button that adds a row on a table when clicked.

TinyMCE 4 has a function to do that but i'm not sure how to call it. I'm trying with $('#myTable tr:last').after('<tr></tr>');.

Here's an example.

<script type="text/javascript">
    tinymce.init({
        selector: "textarea",
        toolbar: "mybutton",
        setup: function(editor) {
            editor.addButton('mybutton', {
                text: 'My button',
                icon: false,
                onclick: function() {
                    $('#myTable tr:last').after('<tr></tr>');
                }
            });
        }
    });
</script>

Answer 1

With the cursor placed inside the table, you can modify your code to look like this:

setup: function(editor) {
    editor.addButton('mybutton', {
        text: 'My button',
        icon: false,
        onclick: function() {
            editor.execCommand('mceTableInsertRowAfter', false, editor);
        }
    });
}

See example - tinyMCE fiddle

Answer 2

>>but i'm not sure how to call it.

You add a button to the editor by adding the button in the toolbar -

      tinyMCE.init({
            ...
            toolbar1 : 'mybutton'
      });