如何在 javascript 所见即所得编辑器中实现代码按钮

Question

I try to build my own WYSIWYG editor in javascript. Most of the buttons are quite simple (as long as document.execCommand has a commandId).

But how to implement a code option like in StackOverflow editor.

What I tried:

document.execCommand('formatBlock', '<pre><code>')

Unfortunately, it is not working. What I'm doing wrong?

Answer 1

The <code> tag is not part of the list of supported tags for formatBlock . You can however insert a <pre> tag by using:

document.execCommand('formatBlock', false, '<pre>');

You can check the w3c documentation for a list of supported tags (it depends on the browser).

If you do not care about IE, you can use the insertHTML option, combined together with document.getSelection() , like so:

document.execCommand('insertHTML', false, `<pre><code>${document.getSelection()}</code></pre>`)

Or you could implement the functionality yourself. As pointed out by others, document.execCommand is now obsolete , so it might be your safest option, depending on which browsers you need to support.