概十年前，億速思維(ETSOO)發布了一款編輯器EOEditor，還注冊了軟件著作權證，在2018年發布了4.0 （還能在網上搜索到：https://www.onlinedown.net/soft/35767.htm）后就停止了更新，因為代碼過于浮腫，沒有吸收新的技術，也沒有跟著潮流，做版本控制，問題越攢越多。公司后來的產品開發，采用了百度的UEditor（https://fex.baidu.com/ueditor/），使用過程中也發現一些問題，奈何不是自己的產品，改進很難，后來它也停更，做免費的組件產品，在哪個國家，哪個規模的企業，都很難。一切似乎又回到了起點。

2019年底來新西蘭后，接觸了很多新人新事，發現自己的技術底層邏輯，需要大面積迭代，花了很多時間，可以說是夜以繼日的學習，重新刷新了HTML5/JavaScript/CSS 2, CSS3，重新學習了TypeScript，學習實踐GIT版本控制，更新所有的技術知識點到最新版本，來重構億速思維的底層技術框架，這個過程，一晃就將近3年。

過程很艱難，現在的結果看起來走到了正確的道路上，所有的腳本代碼，全部使用了TypeScript，能形成Package的，只要不威脅公司核心機密，都盡可能發布到GitHub開源。今年3月，為了完成公司的技術拼圖，決定重新這個編輯器，到今天基本完成第一個版本，耗時兩個多月，GitHub：https://github.com/ETSOO/EOEditor，下面是界面截圖。

新版本的幾個亮點：

• 僅支持ES2019+的技術，不支持IE，面向未來。考慮過多的兼容性會積重難返。
• 程序僅一個腳本文件，CDN支持，自定義網頁標簽，使用起來足夠簡單。
• 界面簡潔，但編輯器常見的功能已經包含。
• 客戶端圖片編輯功能，讓用戶可以在本地編輯處理好圖片，降低服務器處理成本。
• 完全開源，MIT協議，不斷迭代。

圖片編輯器截圖，可以直觀看到一些基本功能：

的需求需要在網頁上寫代碼。

比如在線執行代碼的 playground：

或者在線面試：

如果讓你實現網頁版 TypeScript 編輯器，你會如何做呢？

有的同學說，直接用微軟的 monaco editor 呀：

確實，直接用它就可以，但是有挺多地方需要處理的。

我們來試試看。

npx create-vite

創建個 vite + react 的項目。

安裝依賴：

npm install

npm install @monaco-editor/react

這里用 @monaco-editor/react 這個包，它把 monaco editor 封裝成了 react 組件。

去掉 main.tsx 里的 index.css

然后在 App.tsx 用一下：

import MonacoEditor from '@monaco-editor/react'

export default function App() {

  const code = `import lodash from 'lodash';
function App() {
  return <div>guang</div>  
}  
  `;

  return <MonacoEditor
      height={'100vh'}
      path={"guang.tsx"}
      language={"typescript"}
      value={code}
  />
}

跑下開發服務：

npm run dev

試下看：

現在就可以在網頁寫 ts 代碼了。

但是有報錯：

jsx 語法不知道怎么處理。

這里明顯要改 typescript 的 tsconfig.json。

怎么改呢？

這樣：

import MonacoEditor, { OnMount } from '@monaco-editor/react'

export default function App() {

  const code = `import lodash from 'lodash';
function App() {
  return <div>guang</div>  
}  
  `;

  const handleEditorMount: OnMount = (editor, monaco) => {
    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
        jsx: monaco.languages.typescript.JsxEmit.Preserve,
        esModuleInterop: true,
    })

}

  return <MonacoEditor
      height={'100vh'}
      path={"guang.tsx"}
      language={"typescript"}
      onMount={handleEditorMount}
      value={code}
  />
}

onMount 的時候，設置 ts 的 compilerOptions。

這里設置 jsx 為 preserve，也就是輸入 <div> 輸出 <div>，保留原樣。

如果設置為 react 會輸出 React.createElement("div")。

再就是 esModuleInterop，這個也是 ts 常用配置。

默認 fs 要這么引入，因為它是 commonjs 的包，沒有 default 屬性：

import * as fs from 'fs';

設置 esModuleInterop 會在編譯的時候自動加上 default 屬性。

就可以這樣引入了：

import fs from 'fs';

可以看到，現在 jsx 就不報錯了：

還有一個錯誤：

沒有 lodash 的類型定義。

寫 ts 代碼沒提示怎么行呢？

我們也要支持下。

這里用到 @typescript/ata 這個包：

ata 是 automatic type acquisition 自動類型獲取。

它可以傳入源碼，自動分析出需要的 ts 類型包，然后自動下載。

我們新建個 ./ata.ts，復制文檔里的示例代碼：

import { setupTypeAcquisition } from '@typescript/ata'
import typescriprt from 'typescript';

export function createATA(onDownloadFile: (code: string, path: string) => void) {
  const ata = setupTypeAcquisition({
    projectName: 'my-ata',
    typescript: typescriprt,
    logger: console,
    delegate: {
      receivedFile: (code, path) => {
        console.log('自動下載的包', path);
        onDownloadFile(code, path);
      }
    },
  })

  return ata;
}

安裝用到的包：

npm install --save @typescript/ata -f 

這里就是用 ts 包去分析代碼，然后自動下載用到的類型包，有個 receivedFile 的回調函數里可以拿到下載的代碼和路徑。

然后在 mount 的時候調用下：

const ata = createATA((code, path) => {
    monaco.languages.typescript.typescriptDefaults.addExtraLib(code, `file://${path}`)
})

editor.onDidChangeModelContent(() => {
    ata(editor.getValue());
});

ata(editor.getValue());

就是最開始獲取一次類型，然后內容改變之后獲取一次類型，獲取類型之后用 addExtraLib 添加到 ts 里。

看下效果：

有類型了！

寫代碼的時候用到的包也會動態去下載它的類型：

比如我們用到了 ahooks，就會實時下載它的類型包然后應用。

這樣，ts 的開發體驗就有了。

再就是現在字體有點小，明明內容不多右邊卻有一個滾動條：

這些改下 options 的配置就好了：

scrollBeyondLastLine 是到了最后一行之后依然可以滾動一屏，關閉后就不會了。

minimap 就是縮略圖，關掉就沒了。

scrollbar 是設置橫向縱向滾動條寬度的。

theme 是修改主題。

return <MonacoEditor
      height={'100vh'}
      path={"guang.tsx"}
      language={"typescript"}
      onMount={handleEditorMount}
      theme: "vs-dark",
      value={code}
      options={
        {
          fontSize: 16,
          scrollBeyondLastLine: false,
          minimap: {
            enabled: false,
          },
          scrollbar: {
            verticalScrollbarSize: 6,
            horizontalScrollbarSize: 6,
          }
        }
    }
  />

好多了。

我們還可以添加快捷鍵的交互：

默認 cmd（windows 下是 ctrl） + j 沒有處理。

我們可以 cmd + j 的時候格式化代碼。

editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyJ, () => {
    editor.getAction('editor.action.formatDocument')?.run()
});

試下效果：

有同學可能問，monaco editor 還有哪些 action 呢？

打印下就知道了：

editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyJ, () => {
    // editor.getAction('editor.action.formatDocument')?.run()
    let actions = editor.getSupportedActions().map((a) => a.id);
    console.log(actions);
});

有 131 個：

用到再搜就行。

這樣，我們的網頁版 TypeScript 編輯器就完成了。

總結

有的需求需要實現網頁版編輯器，我們一般都用 monaco editor 來做。

今天我們基于 @monaco-editor/react 實現了 TypeScript 編輯器。

可以在 options 里配置滾動條、字體大小、主題等。

然后 onMount 里可以設置 compilerOptions，用 addCommand 添加快捷鍵等。

并且我們基于 @typescript/ata 實現了自動下載用到的 ts 類型的功能，它會掃描代碼里的 import，然后自動下載類型，之后 addExtraLib 添加到 ts 里。

這樣在網頁里就有和 vscode 一樣的 ts 編寫體驗了。

原文鏈接：https://juejin.cn/post/7361934843209777152