insert nested elements at caret position

Question

I am making use of a contenteditable div in combination with the rangy for inserting, deleting, changing ,commenting and formatting options in HTML at caret position . i have implemented inserting a new paragraph using rangy function SplitAtcaret : http://jsfiddle.net/timdown/rr9qs/2/. this is working good .

now i need to implement same inserting new section like a paragraph concept in sections .

sections for example :

Input HTML:

<div class="section_level1" >
    <h1>First Level section Heading</h1>
    <p>Level First some text some text some paragraphs. </p>
    <div class="section_level2" >
        <h1>Second Level section Heading</h1>
        <p>Second level some text <rangy position> insert new section (level 1)  here  </rangy posiiton > some text some paragraphs. </p>
        <div class="section_level3" >
            <h1>Third Level section Heading</h1>
            <p>Third level some text dummy text dummy text.some paragraphs. </p>
        </div>
    </div>
</div>

Need Output Html as ( when inserting a new section at caret position ( inside second level ). ):

<div class="section_level1" >
    <h1>First Level section Heading</h1>
    <p>Level First some text some text some paragraphs. </p>
    <div class="section_level2" >
        <h1>Second Level section Heading</h1>
        <p>Second level some text <p>
    </div>
</div>
<div class="section_level1" >  
    <h1>Level 1 heading goes here </h1>
    <p> Level 1 contents goes here. </p>
    <div class="section_level2" >
        <h1>dummy heading</h1>
        <p>Second level some text <p>
        <div class="section_level3" >
            <h1>Third Level section Heading</h1>
            <p>Third level some text dummy text dummy text.some paragraphs. </p>
        </div>
    </div>
</div>

i want to know what are all open elements available before the caret position .can anyone please help . — MohanaPriyaG_SPS, Sep 18 '15 at 06:44

score 1 · Answer 1 · edited May 23 '17 at 12:06

You could use Tim Down's splitParaAtCaret:

function splitParaAtCaret() {
    var sel = rangy.getSelection();
    if (sel.rangeCount > 0) {
        // Create a copy of the selection range to work with
        var range = sel.getRangeAt(0).cloneRange();

        // Get the containing paragraph
        var p = range.commonAncestorContainer;
        while (p && (p.nodeType != 1 || p.tagName != "P") ) {
            p = p.parentNode;
        }

        if (p) {
            // Place the end of the range after the paragraph
            range.setEndAfter(p);

            // Extract the contents of the paragraph after the caret into a fragment
            var contentAfterRangeStart = range.extractContents();

            // Collapse the range immediately after the paragraph
            range.collapseAfter(p);

            // Insert the content
            range.insertNode(contentAfterRangeStart);

            // Move the caret to the insertion point
            range.collapseAfter(p);
            sel.setSingleRange(range);
        }
    }
}

Modify the code that searched for the containing element to search for the class name:

    while (p && (p.nodeType != 1 || p.className != "section_level1") ) {
        p = p.parentNode;
    }

insert nested elements at caret position

1 Answers1