Question

I am trying to wrap some selected elements in <blockquote> tags but the method I thought might work replaces the existing tags rather than wrapping them.

Here’s my code.

$("input[value='Quote']").on("click", function() {
    document.execCommand('formatBlock', false, '<blockquote>');
});

and…

<div contentEditable>
    <p>para 1</p>
    <p>para 2</p>
</div>

<input type="button" value="Quote" />

I want to end up with something like this…

<div contentEditable>
    <blockquote>
        <p>para 1</p>
        <p>para 2</p>
    </blockquote>
</div>

rather than the following which is what I currently get…

<div contentEditable>
    <blockquote>
        para 1
        <br />
        para 2
    </blockquote>
</div>

Thanks

Answer 1

This should do it

$("input[value='Quote']").on("click", function() {
  $("<blockquote/>").insertBefore($("[contenteditable]").find("p:first")).append($("[contenteditable]").find("p"))
});