概十年前,億速思維(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,下面是界面截圖。
EOEditor 2022界面截圖
新版本的幾個亮點:
圖片編輯器截圖,可以直觀看到一些基本功能:
圖片編輯器效果
的需求需要在網頁上寫代碼。
比如在線執行代碼的 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
TML 編輯器推薦
可以使用專業的 HTML 編輯器來編輯 HTML,菜鳥教程為大家推薦幾款常用的編輯器:
你可以從以上軟件的官網中下載對應的軟件,按步驟安裝即可。
接下來我們將為大家演示如何使用Notepad++工具來創建 HTML 文件,其他兩個工具操作步驟類似。
Notepad++
Notepad++是 Windows操作系統下的一套文本編輯器(軟件版權許可證: GPL),有完整的中文化接口及支持多國語言編寫的功能(UTF8技術)。
步驟 1: 新建 HTML 文件
在 Notepad++ 安裝完成后,選擇" 文件(F)->新建(N) ",在新建的文件中輸入以下代碼:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body> <h1>我的第一個標題</h1> <p>我的第一個段落。</p> </body></html>
步驟 2: 另存為 HTML 文件
然后選擇" 文件(F)->另存為(A) ",文件名為 runoob.html:
當您保存 HTML 文件時,既可以使用 .htm 也可以使用 .html 擴展名。兩者沒有區別,完全根據您的喜好。
在一個容易記憶的文件夾中保存這個文件,比如 runoob
步驟 3: 在瀏覽器中運行這個 HTML 文件
啟動您的瀏覽器,然后選擇"文件"菜單的"打開文件"命令,或者直接在文件夾中雙擊您的 HTML 文件,
運行顯示結果類似如下:
Notepad++ 和 Sublime Text 還可以配合 Emmet 插件來提高編碼速度。Emmet 官網:http://emmet.io/
*請認真填寫需求信息,我們會在24小時內與您取得聯系。