Insert Table into content editable div

Question

I have a fiddle showing what my code is doing. Using javascript/jquery I am trying to insert a table into a content editable div at the current caret position. I am using Tim Down's Rangy library to accomplish this. I am doing this with the following javascript.

var range = getFirstRange();
var el = document.createElement("table");
var tableHtml = "";
for (var a = 0; a <= tableY; a++) {
    if(a%2==0){
       tableHtml += '<tr class="zebra">';
    }
    else{
       tableHtml += '<tr>';
    }
    for (var b = 0; b <= tableX; b++) {
       tableHtml += '<td>&nbsp;</td>';
    }
    tableHtml += '</tr>';   
}
$(el).html(tableHtml); 
range.insertNode(el);
rangy.getSelection().setSingleRange(range);

Just in case it helps here is the getFirstRange function.

function getFirstRange() {
   var sel = rangy.getSelection();
   return sel.rangeCount ? sel.getRangeAt(0) : null;
} 

I need to make valid html wherever this table is placed. for example if the caret is in the middle of a link I am trying to avoid the following html.

<p>some text <a href="#">text 
                         <table>
                             <tr>
                               <td>table content</td>
                             </tr>
                         </table> 
              text</a> more text</p> 

I would like it to look like this instead.

<p>some text <a href="#">text</a></p>
<table>
   <tr>
     <td>table content</td>
   </tr>
</table>
<p><a href="#">text</a> more text</p>

Answer 1

If you want to drop the new node immediately after a selected node(s) that cannot validly contain it, replace this:

range.insertNode(el);

With something like this:

var badNodes = {a: 1, p: 1};

// starting with the node at the beginning of the range,
// iterate to the "left" until we find a node that isn't
// a text node
var n = range.startContainer;
var tag = n.nodeName;
while (tag == '#text') {
    n = n.parentNode;
    tag = n.nodeName;
}

// if the node we landed on isn't one of our bad nodes ...
if (badNodes[tag.toLowerCase()]) {

    // that we refuse to insert 'el' into, continue iterating to the
    // "left" until we find a node we're willing to place 'el' after.
    while (badNodes[n.parentNode.nodeName.toLowerCase()]) {
        n = n.parentNode;
        tag = n.nodeName;
    }
    n.parentNode.insertBefore(el, n.nextSibling);

} else {
    range.insertNode(el);
}

See my fiddle fork: http://jsfiddle.net/zntwL/29/

---

UPDATE ^{(I think this is what you want)}

If you want to split the invalid node(s) and drop the new node in, use something like this instead:

var badNodes = {a: 1, p: 1};

// starting with the node at the beginning of the range,
// iterate to the "left" until we find a node that isn't
// a text node
var n = range.startContainer;
var tag = n.nodeName;
while (tag == '#text') {
    n = n.parentNode;
    tag = n.nodeName;
}

// if the node we landed on is one of our "bad" nodes ...
if (badNodes[tag.toLowerCase()]) {

    // continue iterating to the "left" until we find a "good" node
    while (badNodes[n.parentNode.nodeName.toLowerCase()]) {
        n = n.parentNode;
        tag = n.nodeName;
    }

    // remove everything from our "good" node from the start of the
    // range to the end of the node. this causes all bad nodes to be
    // severed and auto-closed and auto-opened as necessary at the cut.
    range.setEndAfter(n);
    var clipped = range.extractContents();

    // drop 'el' in after the break (right where we want it)
    n.parentNode.insertBefore(el, n.nextSibling);

    // and re-attach the clipped portion of the "good" node, which
    // includes the auto-opened "bad" nodes.
    el.parentNode.insertBefore(clipped, el.nextSibling);

} else {
    range.insertNode(el);
}

http://jsfiddle.net/zntwL/31/

Your final solution may need some tweaking. You may need to detect #text nodes differently to be cross-browser compliant. And you'll want to modularize this and populate the badNodes array appropriately. But, I think that's the general idea.

Answer 2

What about something like

var parentNode = range.commonAncestorContainer;
parentNode.inertNode(el);

to replace your

range.insertNode(el);

You might have to tweak it to get the table exactly where you want it in all cases, but at least it will never show up in the middle of an element.

Answer 3

As an iPhone application developer I found following that works for me on editable content

function TableOfContentForSubHeading1() {
    var level = 0;
    document.getElementById("content").innerHTML =
        document.getElementById("content").innerHTML.replace(/<h([\d])>([^<]+)<\/h([\d])>/gi, function (str, openLevel, titleText, closeLevel) {
            if (openLevel != closeLevel) {
                return str;
            }
            if (openLevel > level) {
                toc += (new Array(openLevel - level + 1)).join("<ol>");
            } else if (openLevel < level) {
                toc += (new Array(level - openLevel + 1)).join("</ol>");
            }
            level = parseInt(openLevel);
            var anchor = titleText.replace(/ /g, "_");
            toc += "<li><a href=\"#" + anchor + "\">" + titleText + "</a></li>";
            return "<h" + openLevel + "><a name=\"" + anchor + "\">" + titleText + "</a></h" + closeLevel + ">";
        });
    if (level) {
        toc += (new Array(level + 1)).join("</ol>");
    }
    document.getElementById("content").innerHTML += toc;
}

Hope it works.

Answer 4

Here below I made some improvement in case the Headings include also a CLASS reference or ID.

<script>
window.onload = function () {
var toc = "";
var level = 0;

document.getElementById("contents").innerHTML =
    document.getElementById("contents").innerHTML.replace(/<h([\d])([^<]+)>([^<]+)<\/h([\d])>/gi,
        function (str, openLevel, classHeading, titleText, closeLevel) {
            if (openLevel != closeLevel) {
                return str;
            }

            if (openLevel > level) {
                toc += (new Array(openLevel - level + 1)).join("<ul>");
            } else if (openLevel < level) {
                toc += (new Array(level - openLevel + 1)).join("</ul>");
            }

            level = parseInt(openLevel);

            var anchor = titleText.replace(/ /g, "_");
            toc += "<li><a href=\"#" + anchor + "\">" + titleText
                + "</a></li>";

            return "<h" + openLevel + classHeading +"><a name=\"" + anchor + "\">"
                + titleText + "</a></h" + closeLevel + ">";
        }
    );

if (level) {
    toc += (new Array(level + 1)).join("</ul>");
}

document.getElementById("toc").innerHTML += toc;
};
</script>

I've added an additional parameter to the replace function:

([^<]+)

named classHeading and adding it into return function

return "<h" + openLevel + classHeading + ....

So that the class used for is kept.