Création d'un éditeur de code HTML, CSS et JS avec aperçu en direct à l'aide de JavaScript

Dans ce tutoriel, vous apprendrez à Créer un éditeur de code HTML, CSS et JS avec aperçu en direct utilisant Javascript. Le didacticiel vise à fournir aux étudiants en informatique/informatique et aux nouveaux programmeurs une référence qui peut améliorer leurs capacités de programmation à l’aide de JavaScript et peut être utile pour leurs futurs projets. Ici, un tutoriel étape par étape avec des extraits sur la façon de créer un éditeur de code simple est fourni. Un simple fichier zip de code source d’éditeur de code est également fourni et peut être téléchargé gratuitement.

À propos de cet éditeur de code en direct

Ici, nous allons créer un simple éditeur de code en ligne avec un aperçu en direct. Il agit comme un autre éditeur ou compilateur de code en ligne célèbre tel que JSFiddle qui permet aux étudiants ou à certains développeurs de tester leur code en ligne. L’éditeur de code que nous allons créer contient HTML, CSS et JS éditeurs ou champs de texte où l’utilisateur placera son script et sera compilé lors de l’exécution ou de l’exécution du script. Le résultat des scripts compilés sera affiché dans le panneau de prévisualisation.

Comment créer un éditeur de code HTML, CSS et JS avec aperçu en direct à l’aide de JavaScript

Afin de répondre au programme que nous aimerions créer, nous aurons besoin des éléments HTML et des méthodes JavaScript suivants

Zone de texte HTML
Iframe HTML
Écouteur d’événements JS
JS document.getElementById
JS contentWindow.document
Fenêtre JS.open()
Fenêtre JS.writeln()
Fenêtre JS.close()

La Textarea sera les champs de texte des scripts ou servira d’éditeur de code où le développeur écrira ou placera ses scripts. L’élément HTML Iframe servira de fenêtre ou de panneau d’aperçu du résultat. Les objets et méthodes JS répertoriés seront utilisés pour obtenir, compiler et exécuter les scripts et afficher le résultat sur la fenêtre/le panneau Iframe.

Étape 1 : Création de l’interface

Commençons par créer un nouveau fichier HTML nommé index.html. Le fichier contient le script suivant comme l’extrait ci-dessous. Il contient les balises/éléments HTML de l’interface de la page, des éditeurs de code et du panneau de prévisualisation. Dans l’extrait ci-dessous, j’ai utilisé CDN pour charger le Bootstrap Framework pour le design de la page.

<!DOCTYPE html>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
 
    <script src=" integrity="sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<body style="background:#e1ecf7">
    <nav class="navbar navbar-expand-lg navbar-dark" style="background:#1597BB">
            <a class="navbar-brand" href="./">Online Code Editor - JS</a>
                <a href=" class="text-light fw-bolder h6 text-decoration-none" target="_blank">SourceCodester</a>
    </nav>
    <div class="container-fluid px-5 py-1">
        <div class="col-lg-6 col-md-8 col-sm-12 mx-auto">
            <h3 class="text-center">Simple HTML, CSS, and JavaScript Code Editor with Preview Panel</h3>
            <!-- HTML Editor -->
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <div class="card code-editor-card rounded-0 mb-3">
                <div class="card-header rounded-0">
                <div class="card-title"><b>HTML Editor</b></div>
                <div class="card-body rounded-0">
                <textarea id="html-editor" cols="30" rows="10" class="form-control editor-textarea"></textarea>
            <!-- End of HTML Editor -->
            <!-- CSS Editor -->

  


            <div class="card code-editor-card rounded-0 mb-3">
                <div class="card-header rounded-0">
                <div class="card-title"><b>CSS Editor</b></div>
                <div class="card-body rounded-0">
                <textarea id="css-editor" cols="30" rows="10" class="form-control editor-textarea"></textarea>
            <!-- End of CSS Editor -->
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <!-- JS Editor -->
            <div class="card code-editor-card rounded-0 mb-3">
                <div class="card-header rounded-0">
                <div class="card-title"><b>JS Editor</b></div>
                <div class="card-body rounded-0">
                <textarea id="js-editor" cols="30" rows="10" class="form-control editor-textarea"></textarea>
            <!-- End of JS Editor -->
            <!-- Preview Panel -->
            <div class="card code-editor-card rounded-0">
                <div class="card-header">
                <div class="d-flex justify-content-between">
                    <button class="btn btn-primary rounded-0" id="execute_code">Run</button>
            <!-- End of Preview Panel -->

Étape 2 : Création du CSS personnalisé

L’extrait de code suivant est une feuille de style en cascade personnalisée pour la conception de l’éditeur et des panneaux d’aperçu. Enregistrez l’extrait sous style.css. Ce fichier doit être chargé sur la page d’index.

textarea.editor-textarea {
    height: 100%;
    overflow: auto;
    resize: none;
}
.code-editor-card .card-body{
    height: 30vh !important;
}
iframe#preview-panel {
    width: 100%;
    height: 100%;
    overflow: auto;
}

Étape 3 : Création du JavaScript

Enfin, nous allons créer un fichier JavaScript nommé compile.js. Le fichier contient le script qui compile et exécute le script depuis l’éditeur et affiche le résultat dans le panneau de prévisualisation.

//HTML Code Textarea
var _html = document.getElementById('html-editor')
//CSS Code Textarea
var _css = document.getElementById('css-editor')
//JS Code Textarea
var _js = document.getElementById('js-editor')
// Preview Iframe
var preview_panel = document.getElementById('preview-panel').contentWindow.document
// Run or Execute button
var _compile = document.getElementById('execute_code')
 
 
// Compiling and Execute Code
_compile.addEventListener('click', function(){
    preview_panel.open()
    preview_panel.writeln(`<style>${_css.value}</style>`)
    preview_panel.writeln(`${_html.value}`)
    preview_panel.writeln(`<script>${_js.value}</script>`)
 
    preview_panel.close()
})

Voilà! Vous pouvez maintenant tester l’extrait que j’ai fourni ci-dessus de votre côté et voir s’il fonctionne et répond aux principaux objectifs et buts de ce didacticiel. J’ai également fourni le fichier zip du code source que j’ai créé pour ce tutoriel qui peut être téléchargé en cliquant sur le Bouton de téléchargement situé après cet article.

Instantanés

Voici les instantanés du résultat de l’extrait que j’ai fourni.

C’est la fin de ce tutoriel. J’espère Cela Création d’un éditeur de code HTML, CSS et JS avec aperçu en direct à l’aide de JavaScript vous aide avec ce que vous cherchez et que vous trouverez quelque chose d’utile pour vos projets actuels et futurs.

Explorez plus sur ce site Web pour plus Tutoriels et Codes sources gratuits.