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.

to be 100% sure what you mean: can you show me the relecant content of your editor as html code to the point of time when you want to double click? — Thariama, Sep 27 '12 at 11:42

Thariama · Accepted Answer · 2012-09-27T12:41:51.513

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

No this need to be valid HTML so a table could never be inside a `p`. I am sure you will have come across this similar issue with a image/table there is no way to insert something in between. — John Magnolia, Sep 27 '12 at 11:50
Your example shows how to insert a table with HTML, although I dont want to automatically insert anything. Only place the cursor in a "gap" (has to be an empty paragraph) so that they can then edit this as they wish — John Magnolia, Sep 27 '12 at 11:52
ok, i think i know what you want - i will update my answer. btw a table can be inside a paragraph (depends on the definition of valid) :) — Thariama, Sep 27 '12 at 12:42

score 1 · Answer 2 · edited May 23 '17 at 11:43

There is a way to get the caret (text cursor) position into the text
Caret position in textarea, in characters from the start
this is just a function getCaret(element);

now we need to capture the tinymce container's body inside the iframe content_ifr
the iframe: document.getElementById("content_ifr")
the tinymce's body: ...contentDocument.getElementById("tinymce")

using jquery we listen to the dblclick event:
.dblclick(function(event){})
find the caret and inject a <p> element on its position.
html.substr(0,position)+"<p></p>"+html.substr(position)
that is, all the text from the start to position, the p element and the text from the position to the end.

The whole code will look like this:

var editor = document.getElementById("content_ifr").contentDocument.getElementById("tinymce");

$(editor).dblclick(function(event){
    var position = getCaret(this);
    this.innerHTML = this.innerHTML.substr(0,position)+"<p></p>"+this.innerHTML.substr(position);
}

this should do the job ;)

Tinymce double click insert new paragraph

2 Answers2