WYSIWYG editor. How to wrap selected text in a block?

I'm doing text editor for your site. Use a third-party not want.
Editor based on contenteditable property.
I need the selected text wrapped in a div with a class dialog on button click. But to the SECOND click with highlighted this area was out of this div, as well as working "document.execCommand(undo, false, null)".

I think to do something like "document.execCommand('insertHTML', false, div)", but there is a problem in the div you need to push the code string of the selected text wrapped in a div with the class.

Wanted to do so, but the variable div is an object.
var range = window.getSelection().getRangeAt(0),
selectionContents = range.extractContents(),
div = document.createElement('div');

div.appendChild(selectionContents);
div.setAttribute('class', 'dialog');
document.execCommand('insertHTML', false, div);
March 23rd 20 at 19:09
0 answer

Find more questions by tags WYSIWYGJavaScript