4

我有一个项目，其中一个内容可编辑的 div 是父级然后使用 jQuery 我希望在这个 div 中添加 p 标签。然后也可以对其进行编辑。几乎就像一个迷你记事本文档。

我遇到的问题是我在父 div 上使用 jQuery .append 函数，它将 p 类添加到 div 的末尾。我需要它做的是在当前选定的 p / 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，您可以保存最后一个编辑的段落。这是一种解决方案，但不是很优雅（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 回答
0

在第一次检查时，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/

如果我遇到此方法的任何问题，我将更新此方法现在有效。

谢谢！

于 2012-11-09T09:15:00.903 回答