How would you insert a Figure element in a contenteditable element?

Question

I'm wondering how to implement a command to insert <figure> elements in a contenteditable element. Document.execCommand() provides an insertImage command but nothing like I'm looking for.

Here is the snippet of code I'd like to insert:

<figure>
    <img src="http://example.org/image.jpg" alt="some text" />
    <figcaption>Here is a caption</figcaption>
</figure>

Thanks

Answer 1

You can add your custom command and add your figure with src and caption.

See https://jsfiddle.net/2qjcLosq/

execCommand('insertfigure' ,'you_src','your_caption');