当前位置:网站首页>Use ts from zero to implement with a simple editor

Use ts from zero to implement with a simple editor

2020-11-10 15:10:54 Yours

Small target

  1. Use ts Implement a simple rich text editor from scratch
  2. Preliminary realization “ Set title ”,“ In bold ”,“ Set the color ” These basic functions

Knowledge preparation

  1. contenteditable attribute

    Add... To any element contenteditable="true" It can be edited , Based on this, we can implement a simple rich text editor .

    <div contenteditable="true"></div>
  2. Document.execCommand()

    When HTML Document switch to designMode when , Its document object will expose a execCommand Method to run a command that operates on the current edit area , Such as form input or satisfiable elements .

    document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

Implementation process

  1. Initialize project
    "lint": "eslint . --ext .js,.ts",
    "build": "webpack --env production",
    "start": "webpack-cli serve"

    be based on webpack Build a foundation project ,yarn start For local development .yarn build Used to build production files .

  2. Determine how to call the simple rich text editor
    import Editor from '../src/editor';
    
    new Editor('#editor_root', {
      style: {
        height: '300px',
      },
    });
  3. Initialize editor structure

    image-20201110140645515

  4. Implement editor menu

    image-20201110140958264

summary

  1. The basic functions of the easy to rich text editor have been realized
  2. webpack Not yet export library by es6 module
  3. Unit tests have not been added
  4. document.execCommand Has been marked as Obsolete

Source code address

版权声明
本文为[Yours]所创,转载请带上原文链接,感谢