內容可編輯div - 在插入/選定div后插入新的'p class'

Question

我有一個項目，其中內容可編輯div是父，然后使用jQuery我希望在此div中添加p標簽。 然后也可以編輯。 幾乎像一個迷你記事本文件。

我遇到的問題是我在父div上使用jQuery .append函數，它將p類添加到div的末尾。 我需要它做的是在當前選中的p /插入光標當前內部的p之后添加p類。

我正在使用的jQuery -

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

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

我已將當前代碼放入JSFiddle中。 我希望我的目標顯而易見。

任何幫助將不勝感激！

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

問候

Answer 1

通過向新創建的段落div添加單擊處理程序，您可以保存最后編輯的段落div。 這是一個解決方案，但不是很優雅（ 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);
        }));
    }
});

這會將$lastCaretDiv設置$lastCaretDiv最后一個被單擊的。 如果已定義，則在其后添加新段落，否則將其附加到文本區域。

我的解決方案現在有很多陷阱，但你有一些工作要做。 我會建議在點擊文本區域中的其他$lastCaretDiv時清除$lastCaretDiv ，例如標題。 這一切都取決於你希望它的行為方式。

Answer 2

在第一次檢查時，McFjodor的答案就是我所追求的。

似乎工作正常。 我已經調整並復制了他的代碼，也為標題文本做了同樣的事情。

修改后的javascript如下：

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

根據McFjodors的回答，下面是我所追求的完整小提琴！

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

這個工作現在如果我遇到這個方法的任何問題我會更新。

謝謝！