Javascript document.execCommand-关闭<；预处理>；块

我尝试创建一个

<p><button type="button" id="on">OPEN PRE BLOCK</button><button type="button" id="off">CLOSE PRE BLOCK</button></p>
<div id="edit-area" contenteditable="true" class="classy">
    <h1>This is heading</h1>
    <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti.</div>
    <div><br></div>
    <div>Red color is for div blocs</div>
</div>

Javascript:

$（'#on'）。单击（函数（）{
document.execCommand（'insertHTML'，false，&zwnj；&zwnj；'）；
pre {
    background-color: rgba(0, 0, 0, 0.04);
  border-radius: 3px;
  font-family: consolas,monaco,"Andale Mono",monospace;

    border-top-color: rgba(0, 0, 0, 0.09);
    border-top-style: solid;
    border-top-width: 1px;
    border-right-color: rgba(0, 0, 0, 0.09);
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-color: rgba(0, 0, 0, 0.09);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: rgba(0, 0, 0, 0.09);
    border-left-style: solid;
    border-left-width: 1px;
    display: block;
    //white-space: pre;
}

div:not(.classy) {
  color: red;
}

});
$（'#off'）。单击（函数（）{
document.execCommand（“insertHTML”，false，
\u200C”）；
document.execCommand（“insertHTML”，false，
\u200C”）；
});

亲自看看：




谢谢，鲍勃



PS：这是我的第一篇帖子，所以如果我做得不好，告诉我；）

对不起，我的英语不好：）
为什么不使用
document.execCommand FormatBlock
创建

请将您正在使用的相关代码以代码的形式发布到您的问题中。链接的JSFIDLE中没有。另外，为什么要使用
&zwnj
使用CSS来处理布局要好得多。似乎如果没有它，它不会进入预块，并且会自动放在末尾，因为contenteditable区域。问题是我找不到如何关闭它，除非使用
block之类的技巧。为什么不使用jQuery来实现这一点？
$('#on').click(function() {
  document.execCommand('insertHTML',false,'&zwnj;<pre><div>&zwnj;');
});

$('#off').click(function() {
  document.execCommand("insertHTML", false, "<br>\u200C");
    document.execCommand("insertHTML", false, "<br>\u200C");
});