Contents of an editable div - add a new "p-class" after the caret / selected div

Question

I have a project in which the content of an editable div is a parent, and then using jQuery I want to add p tags inside this div. Which can also be edited. Almost like a document with a mini notebook.

The problem is that I am using jQuery.append function in the parent div, which adds the class p to the end of the div. What I need to do is add the class p after the currently selected p / p, in which the cursor is inside.

jQuery I am currently using -

$(".addHeading").click(function() { $('.textArea').append('<div class="heading">Heading</div>'); }); $(".addParagraph").click(function() { $('.textArea').append('<div class="paragraph">Test</div>'); });​ 

I put my current code in a JSFiddle. I hope this is obvious what I'm trying to do.

Any help would be greatly appreciated!

JS Fiddle - http://jsfiddle.net/eheHS/

Hello

Answer 1

By adding a click handler to your newly created paragraph paragraphs, you can save the last edited one. Here is one solution, but not very elegant ( jsFiddle ):

 var $lastCaretDiv; $(".addParagraph").click(function() { if ($lastCaretDiv) { $lastCaretDiv.after($('<div/>', { 'html': 'Test', 'class': 'paragraph' }).click(function () { $lastCaretDiv = $(this); })); } else { $('.textArea').append($('<div/>', { 'html': 'Test', 'class': 'paragraph' }).click(function () { $lastCaretDiv = $(this); })); } }); 

This will set $lastCaretDiv to the last one that was clicked. If it is defined, add a new paragraph after it, otherwise add it to the text area.

My solution has many pitfalls, as it is now, but you have something to work on. I suggest clearing $lastCaretDiv whenever something else in the text area is clicked, for example. heading. It all depends on how you want him to behave.

Answer 2

At the first check, McFjodor's answer is what I need.

Everything seems to be fine. I modified and duplicated its code to do the same for heading text.

Modified javascript as below:

 var $lastCaretDiv; $(".addHeading").click(function() { if ($lastCaretDiv) { //$lastCaretDiv.after('<div class="paragraph">Test</div>'); $lastCaretDiv.after($('<div/>', { 'html': 'Heading', 'class': 'heading' }).click(function () { $lastCaretDiv = $(this); })); } else { $('.textArea').append($('<div/>', { 'html': 'Heading', 'class': 'heading' }).click(function () { $lastCaretDiv = $(this); })); } }); $(".addParagraph").click(function() { if ($lastCaretDiv) { //$lastCaretDiv.after('<div class="paragraph">Test</div>'); $lastCaretDiv.after($('<div/>', { 'html': 'Test', 'class': 'paragraph' }).click(function () { $lastCaretDiv = $(this); })); } else { $('.textArea').append($('<div/>', { 'html': 'Test', 'class': 'paragraph' }).click(function () { $lastCaretDiv = $(this); })); } });​ 

Below is the completed fiddle of what I got after I answered McFjodors!

http://jsfiddle.net/aKtSt/2/

It works now, if I run into any problems with this method, I will update.

Thanks!