使用Ts從零實現以一個簡易編輯器

時間 2020-12-02

標籤 javascript html java webpack git es6 github web typescript 編輯器欄目 JavaScript 简体版

原文原文鏈接

小目標

使用ts從零實現一個簡單的富文本編輯器
初步實現「設置標題」，「加粗」，「設置顏色」這幾個基本功能

知識準備

contenteditable屬性
給任何一個元素加上contenteditable="true" 即可使其可編輯，由此爲基礎即可實現一個簡單的富文本編輯器了。javascript
```
<div contenteditable="true"></div>
```
Document.execCommand()
當HTML文檔切換到designMode時，它的文檔對象將公開一個execCommand方法來運行操做當前可編輯區域的命令，如表單輸入或可知足元素。html
```
document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
```

實現過程

初始化項目
```
"lint": "eslint . --ext .js,.ts",
"build": "webpack --env production",
"start": "webpack-cli serve"
```
基於webpack搭建一個基礎項目，yarn start 用於本地開發。yarn build 用於構建生產文件。java

肯定簡易富文本編輯器的調用方式

import Editor from '../src/editor';

new Editor('#editor_root', {
  style: {
    height: '300px',
  },
});

初始化編輯器結構
實現編輯器菜單

解決range丟失的問題webpack

當編輯器失去焦點的時候，會致使當前選中的文本丟失。因此在編輯器失去焦點的事件觸發時保存當前rangegit

backupRange(): void {
    const selection = window.getSelection();
    const range = selection.getRangeAt(0);
    this.currentSelection = {
      startContainer: range.startContainer,
      startOffset: range.startOffset,
      endContainer: range.endContainer,
      endOffset: range.endOffset,
    };
}

在執行操做以前，恢復以前的rangeees6

restoreRange(): void {
    if (this.currentSelection) {
      const selection = window.getSelection();
      selection.removeAllRanges();
      const range = document.createRange();
      range.setStart(
        this.currentSelection.startContainer,
        this.currentSelection.startOffset,
      );
      range.setEnd(
        this.currentSelection.endContainer,
        this.currentSelection.endOffset,
      );
      // 向選區中添加一個區域
      selection.addRange(range);
    }
  }