Question

I try to create a document.execCommand('insertHTML',false,'&zwnj;<pre><div>&zwnj;'); block in a contenteditable area by using <pre> but my problem is that I can't find how to close it properly.

At this point, I only found a partial solution who let two unwanted empty lines inside the <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> block and one outside.

HTML:

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;
}

CSS:

$('#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");
});

Javascript:

{{1}}

See by yourself:

Demo

Thanks, Bob

PS: This is my first post so if I'm not doing something good, tell me ;)
And Sorry for my bad english :)

Answer 1

为什么不使用document.execCommand FormatBlock进行创建<pre>

<强> Fiddle DEMO

document.execCommand - 关闭<pre> block

1 个答案: