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小提琴 - http://jsfiddle.net/eheHS/

此致

Answer 1

通过向新创建的段落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，例如标题。这一切都取决于你希望它的表现。

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/

现在如果我遇到这个方法的任何问题我将更新。

谢谢！

内容可编辑div - 在插入/选定div后插入新的'p class'

2 个答案: