使用document.execCommand环绕代码标记

Question

我正在尝试制作自定义WYSIWYG编辑器。

我有一个可编辑的内容：

<div id='editor' contenteditable>

</div>

使用Javascript：

$('.toolbar a').click(function(e) {
    var command = $(this).data('command');
    if (command == 'h1' || command == 'h2' || command == 'p' || command == 'blockquote' || command == 'code') {
        document.execCommand('formatBlock', false, command);
    }

    if (command == 'createlink' || command == 'insertimage') {
        url = prompt('Enter the link here: ', 'http:\/\/');
        document.execCommand($(this).data('command'), false, url);
    }
    else
        document.execCommand($(this).data('command'), false, null);


});

我的工具栏：

            <div class="toolbar">
                <a data-command='undo'  href="#"><i class="material-icons md-dark md-36">undo</i></a>
                <a data-command='redo'  href="#"><i class="material-icons md-dark md-36">redo</i></a>
                <a data-command='bold'  href="#"><i class="material-icons md-dark md-36">format_bold</i></a>
                <a data-command='italic'  href="#"><i class="material-icons md-dark md-36">format_italic</i></a>
                <a data-command='underline'  href="#"><i class="material-icons md-dark md-36">format_underline</i></a>
                <a data-command='blockquote'  href="#"><i class="material-icons md-dark md-36">format_quote</i></a>
                <a data-command='code'  href="#"><i class="material-icons md-36 md-dark">code</i></a>
            </div>

一切正常，但代码标签除外。当我单击代码按钮时，没有任何反应。

注意：blockquote按钮有效但代码按钮不起作用。