4

コンテンツ編集可能な 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 フィドル - http://jsfiddle.net/eheHS/

よろしく

4

2 に答える 2

0

新しく作成した段落divにクリックハンドラーを追加することで、最後に編集した段落divを保存できます。これが1つの解決策ですが、あまりエレガントではありません（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ヘッダーなど、テキスト領域内の他の何かがクリックされるたびにクリアすることをお勧めします。それはすべてあなたがそれをどのように振る舞わせたいかに依存します。

于 2012-11-08T21:55:23.627 に答える