使用 Vanilla Js 建立輕量級程式碼編輯器

嘿那裡！ ??
我很高興分享我的新項目，NEXON，一個簡單的前端程式碼編輯器，
我使用 vanilla js 建構的。

介紹

Nexon，是一個簡單且輕量級的線上程式碼編輯器，它允許您在線上編寫前端程式碼，
它還提供了強大的專案管理，您可以在其中儲存專案、編輯項目，也可以以 .html 格式下載專案！

特徵

• 專案管理
• 即時程式碼預覽
• 下載功能
• 簡單直覺的使用者介面

使用的技術和函式庫

• html
• javascript
• litestyle.css
• FileSaver.js

查看我的項目

• 尼克森
• GitHub

這個想法

昨天，無聊襲來，我決定建造一些東西，因此，NEXON 誕生了

過程

所以首先，我設計了UI，我打算使用litestyle.css，這是我幾個月前建造的CSS框架，因為我想檢查它的功能，
&然後我為此寫了js，
我使用了一個簡單的 iframe 和一個 textarea，其中 textarea 的值設定為 iframe 的 srcdoc，無論您何時鍵入。
我利用本地儲存來儲存用戶資料。

面臨的挑戰

實作下載功能被證明是很棘手的，所以我使用 FileSaver.js 來克服這個挑戰

學到的教訓

建構 NEXON 是個很棒的學習經驗。
建造 NEXON，幫助我鞏固了我的 JAVASCRIPT 知識，
& 而且我還了解了編寫模組化程式碼的重要性。

結論

建造 NEXON，標誌著我前端之旅的一個重要里程碑，展示了 vanilla JS 的力量。

以上是使用 Vanilla Js 建立輕量級程式碼編輯器的詳細內容。更多資訊請關注PHP中文網其他相關文章！