• Before a preliminary execCommand method, you will find there are a lot of strange questions, while seemingly can solve, but the cost of each question will be greatly increased, this method is not controllable, dom operation will is inevitable in this process, large projects and may feel instead of in the development in patching, and can produce results of robbing Peter to pay Paul.

ExecCommand compatibility analysis

The compatibility table shown in Figure Caniuse is fine, although the document.execcommand () method seems to be generally supported in modern browsers. However, some parameter instructions such as insertBrOnReturn will still be largely unsupported in various browsers, no effect.

  • It was previously executed on an ios devicedocument.execCommand('copy')Always returnsfalseAnd under the iosinputDoes not supportinput.select(); Unable to get the selected text, the following does not work on ios devices, making it unfriendly to try to copy and save to the stickpad with one click.
const input = document.querySelector('#copy-input');
    if (input) {
      input.value = text;
      if (document.execCommand('copy')) {
        input.select();
        document.execCommand('copy'); input.blur(); }}Copy the code

  • Since rules vary from browser to browser, there is no rule on whether a browser should add a tag to the text or a font weight:bold; To implement the CSS style. As a result, the result of editing each other in various browsers is uncontrollable and unpredictable. At the same time because of the legacy of The Times, resulting in the method itself design logic defects.

  • This code will change to

    < /b>

    This makes dom maintenance more expensive to achieve the desired results.

ExecCommand replaces the program

Most editors are wrappers for HTMLcontenteditable and execcommandapis. So instead of using the execCommandAPI implementation, the design is as follows:

1. HTMLcontenteditable has the advantage of working with existing browser cursor and selection support.

2. Convert the input content into an internal document model (a layer of abstraction on the DOM layer, using JS structure objects to describe views and operations) to prevent direct manipulation of dom and affect performance. For example, Quill’s Delta describes three actions and one attribute in Json format:

  • Insert the insert:
  • Retain: keep
  • Delete: delete

For example, inserting Hello into the editor, changing its Hell to red and removing the last letter O would be described as Delta

{
  "ops": [{"insert": "Hello " },
    { "retain": 5 ,"attributes": { "color": "#ff0000"}}, {"delete": 1}}]Copy the code

This data structure describes the operation mode is very intuitive.

3. Intercept drag, click, and keyboard events. Get selectionState, mouse position, and drag text status information.

4. Finally, change contentState to immutable to prevent reference values from being modified, which makes it easier to deal with caching, rollback, and data change detection.

In addition, there is a new W3C standard input-Events-2, which is supposed to be a revised and improved version of execCommand. It is currently in TR1 (Business requirements review) and may have a great future.