Tinymce double click insert new paragraph

Question

If I have 2 tables directly under each other with margin-bottom, is it impossible to place the cursor in this gap by creating a temporary paragraph.

E.g I want to insert a new table between the other 2. This is impossible without altering the HTML directly.

Is it possible to use the double click so that it works similar to MS word and creates a blank paragraph in this area you click, this would then get replace by the table etc similar to how the trailing plugin works.

I currently use the 'trailing' plugin which fixes this similar issue at the bottom of the page.

Also I am using the jquery version of tinymce, if that makes it any easier to fix this.

Example HTML inside tinymce editor;

<table style="margin: 15px 0; width: 100%;">
    <thead>
        <tr>
            <th scope="col">
                Product Name</th>
            <th scope="col">
                Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Large product</td>
            <td><a href="http://example.com">Find out more</a></td>
        </tr>
        <tr>
            <td>Large product</td>
            <td><a href="http://example.com">Find out more</a></td>
        </tr>
    </tbody>
</table>
<table style="margin: 15px 0; width: 100%;">
    <thead>
        <tr>
            <th scope="col">
                Product Name</th>
            <th scope="col">
                Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Large product</td>
            <td><a href="http://example.com">Find out more</a></td>
        </tr>
        <tr>
            <td>Large product</td>
            <td><a href="http://example.com">Find out more</a></td>
        </tr>
    </tbody>
</table>

Also created a jsFiddle with example: http://fiddle.tinymce.com/Sicaab/2 I want to be able to insert extra content (paragraph,another table, list etc) between the 2 tables without editing the HTML.

Answer 1

The mouse position won't help you, because you do not know if the editor content has been scrolled or not.

First, i will show you how to work with the onDblClick.

Here is a helpfull function to get the paragraph of an editor html element (in case there are no html elements that are not stacked under(or better in) a paragraph.

function table_of_click(node)
{
    while (node)
    {
      if (node.nodeName == 'BODY') { return null; }
      if (node.nodeName == 'TABLE')    { return node; }
      else { node = node.parentNode; }
    }
    return null;
};

Here is the necessary call to catch the double click event. Be aware that this solution will add a paragraph just before the paragraph you clicked in. I assume your tables are in a paragraph each?

ed.onDblClick.add(function(ed, evt){


  // get tableof click event
  var table = table_of_click(evt.target);

  // if the click has not been inside a table return (nothing to do)
  if (!table) return;

  $(table).before("<p id='new_p'><br></p>");
  ed.selection.select( $(ed.getBody()).find('#new_p').get(0) );

  $('.new_p:first').remove();
  evt.preventDefault();
  evt.stopPropagation();
  return false;
});