Vanilla Js を使用した軽量コード エディターの作成

こんにちは!??
私の新しいプロジェクト、シンプルなフロントエンド コード エディターである NEXON を共有できることを嬉しく思います
これはバニラ JS を使用して構築しました。

導入

Nexon は、オンラインでフロントエンド コードを作成できるシンプルで軽量のオンライン コード エディターです。
また、堅牢なプロジェクト管理も提供しており、プロジェクトを保存、編集でき、プロジェクトを .html 形式でダウンロードすることもできます!

特徴

• プロジェクト管理
• ライブコードプレビュー
• ダウンロード機能
• シンプルで直感的な UI

使用されているテクノロジーとライブラリ

• html
• JavaScript
• litestyle.css
• FileSaver.js

私のプロジェクトをチェックしてください

• ネクソン
• GitHub

アイデア

昨日、退屈が襲ってきて、何かを作ろうと決めたので、NEXON が誕生しました

プロセス

それで、まず UI をデザインしました。litestyle.css を使用する予定でした。これは、機能を確認したかったので、数か月前に構築した CSS フレームワークです。
そして、このために js を書きました、
私は単純な iframe と textarea を使用しました。ここで、textarea の値は、入力するたびに iframe の srcdoc として設定されます。
ユーザー データの保存にはローカル ストレージを利用しました。

直面する課題

ダウンロード機能の実装は難しいことが判明したため、FileSaver.js を使用してこの課題を克服しました

学んだ教訓

NEXON の構築は素晴らしい学習経験でした。
NEXON の構築は、JAVASCRIPT の知識を固めるのに役立ちました。
また、モジュールコードを書くことの重要性も学びました。

結論

NEXON の構築は、私のフロントエンドの旅における重要なマイルストーンであり、バニラ JS の力を示しています。

以上がVanilla Js を使用した軽量コード エディターの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。