10

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.

sideshowbarker
  • 62,215
  • 21
  • 143
  • 153
Linas M.
  • 163
  • 10
  • 1
    You can check this https://stackoverflow.com/questions/12251629/is-there-something-better-than-document-execcommand – Sifat Haque Apr 30 '20 at 09:54
  • 1
    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. Apr 30 '20 at 10:02
  • 2
    The most of the functionality of `execCommand` can be replaced with [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection_API) and [Range](https://developer.mozilla.org/en-US/docs/Web/API/Range) APIs, excluding some commands like clipboard commands and undo command. – Teemu Apr 30 '20 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: https://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 Apr 30 '20 at 10:10
  • Thank you Kaiido, sideshowbarker and Teemu. That's useful to know. – Linas M. Apr 30 '20 at 10:34
  • This is - like drag and drop - a nightmare. – Zoldszemesostoros Apr 30 '20 at 10:39
  • I went ahead made my answer below into a Community Wiki answer. What that means is, it’s now owned by the community, and anybody with a reputation score of 100 or more can make edits and updates to it (rather than the normal case where you’d instead need a reputation score of a 1000 or more to edit or update it). – sideshowbarker May 01 '20 at 11:22
  • Yes, I already red it. It's a great answer. Thank you. Now I have better insights of how to move forward with my code :) – Linas M. May 01 '20 at 11:26

2 Answers2

8

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.

sideshowbarker
  • 62,215
  • 21
  • 143
  • 153
  • Correct me if I'm wrong: `document.execCommand()` is not going away, BUT it doesn't work the same across browsers and this will not be fixed. IOW, obsolete, but not deprecated. – Jack Steam Aug 21 '20 at 15:44
  • 1
    @JackSteam yeah, browsers can’t remove it. So we’re stuck with it forever, as far as the web platform goes — as with a lot of other poorly-designed legacy features of the platform. – sideshowbarker Aug 21 '20 at 15:51
  • @sideshowbarker: so - assuming one should avoid `document.execCommand` and not willing to use a complete editor library (e.g. TinyMCE), I probably have to go with `window.getSelection()` and find ways to properly insert ``, `` and so on (or their corresponding ``-items along with their correct CSS-styles), right? Basically I should be creating logic to properly replace pieces of text with the correct tags and contents - which is pretty hard when several "styles" overlap... What a pain :/. – Igor Nov 08 '20 at 01:56
4

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.

Martin Meeser
  • 2,061
  • 2
  • 19
  • 36