I am building an amateur rich text editor with vanilla JavaScript and document.execCommand() is essential to enabling the core features of an text editor.

For example bold, italic and unordered list commands:

Array.from(toolbarBtn).forEach(btn => {
  btn.addEventListener('click', (e) => {
    e.preventDefault();
    if (e.target.id === "toolbar__btn--bold") {
      format('bold');
    }
    if (e.target.id === "toolbar__btn--italic") {
      format('italic');
    }
    if (e.target.id === "toolbar__btn--unorderedlist") {
      format('insertunorderedlist');
    }
});
});

However, when looking up this command on MDN Web Docs, I saw that this command is considered to be obsolete:

Obsolete This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

So, I'm wondering are there any replacement method in vanilla JavaScript, that could create all the Rich Text Editor features like execCommand() does?

The Google search gave me no results, so at the same time, I wonder, how is that possible that the method is announced to be obsolete, but no alternative is suggested.

I am building an amateur rich text editor with vanilla JavaScript and document.execCommand() is essential to enabling the core features of an text editor.

For example bold, italic and unordered list commands:

Array.from(toolbarBtn).forEach(btn => {
  btn.addEventListener('click', (e) => {
    e.preventDefault();
    if (e.target.id === "toolbar__btn--bold") {
      format('bold');
    }
    if (e.target.id === "toolbar__btn--italic") {
      format('italic');
    }
    if (e.target.id === "toolbar__btn--unorderedlist") {
      format('insertunorderedlist');
    }
});
});

However, when looking up this command on MDN Web Docs, I saw that this command is considered to be obsolete:

Obsolete This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

So, I'm wondering are there any replacement method in vanilla JavaScript, that could create all the Rich Text Editor features like execCommand() does?

The Google search gave me no results, so at the same time, I wonder, how is that possible that the method is announced to be obsolete, but no alternative is suggested.

• javascript
• rich-text-editor
• execcommand

• 1 You can check this stackoverflow.com/questions/12251629/… – Sifat Haque Commented Apr 30, 2020 at 9:54
• 2 I've already checked it. These are Rich Text Editors that are being suggested there. Meanwhile, I want to build my own. Thus I'm looking for the replacement of a single method. Moreover, this question is almost 8 years old. – Linas M. Commented Apr 30, 2020 at 10:02
• 2 The most of the functionality of execCommand can be replaced with Selection and Range APIs, excluding some commands like clipboard commands and undo command. – Teemu Commented Apr 30, 2020 at 10:06
• 2 It's not gonna be removed, simply it's not yet specced correctly. However current HTML specs ask that it is implemented by UAs nevertheless: html.spec.whatwg.org/#editing-apis That MDN article might need an update (no time tight now to do it myself) Funny it's an SO user that did add the notice. I know they also are quite often on whatwg github issues so they might have some input, will ping them. – Kaiido Commented Apr 30, 2020 at 10:10
• 1 This is - like drag and drop - a nightmare. – Zoldszemesostoros Commented Apr 30, 2020 at 10:39

2 Answers 2

Both the change to MDN marking document.execCommand() as obsolete and a related change at https://github.com/mdn/browser-compat-data/commit/2d3890a were made in part to due to https://w3c.github.io/editing/ActiveDocuments/execCommand.html having a big red warning with the following statements:

This spec is incomplete and it is not expected that it will advance beyond draft status. Authors should not use most of these features directly, but instead use JavaScript editing libraries. The features described in this document are not implemented consistently or fully by user agents, and it is not expected that this will change in the foreseeable future.

As far as any replacement method in vanilla JavaScript, the same warning box says it’s:

predicted that in the future both specs will be replaced by Content Editable and Input Events

…but sadly, we’re not there yet. So the unfortunate current state of things is, even though we have no replacement yet, we know document.execCommand() as-is now doesn’t work cross-browser interoperably — and browser projects aren’t gonna be fixing it. That’s why the MDN warning says:

its use is discouraged… Try to avoid using it.

So, as a comment above says, it’s similar to the case of drag-and-drop: It’s known to be broken in a number of ways, and it’s been that way for a long time because fixing it is basically not practical.

And that’s why the red warning box in the spec also says that developers and authors:

should not use most of these features directly, but instead use JavaScript editing libraries

The available JavaScript editing libraries in online rich-text editor tools such as CKEditor and TinyMCE “paper over” all the underlying brokenness in document.execCommand() for you. If you were to try to write your own robust handling for document.execCommand() in vanilla JavaScript from scratch, you’d basically — after a lot of work and time — end up having repeated the work that was done to create the JavaScript libraries underlying those tools.

So the bottom line is: to save yourself a lot of time and work, use one of the available libraries.

It looks like the new standard will be Input Events Level 2.

The way I see it, it tries to fix the pain points of execCommand.