How to implement a code button in a javascript wysiwyg editor

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?

document.execCommand is obsolete according to developer.mozilla.org/en-US/docs/Web/API/Document/execCommand. "[...] its use is discouraged since it could be removed at any time. Try to avoid using it." — Dennis Hackethal
– Dennis Hackethal, Commented Jan 17, 2021 at 18:24

remeus · Accepted Answer · 2021-01-17 21:55:33Z

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.

edited Jan 17, 2021 at 21:55

answered Jan 17, 2021 at 18:44

remeus

2,4692 gold badges13 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nico Schuck Over a year ago

Thank you for your answer. Didn't noticed that. Looks like there is also no alternative yet right?

remeus Over a year ago

Actually if you do not care about IE there is a way to do it with insertHTML so I will update my answer.

Collectives™ on Stack Overflow

How to implement a code button in a javascript wysiwyg editor

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related