どのように、私はライブコードエディタをバニラJavaScriptで作りましたか?

私はcodepandboxのウェブサイトの巨大なファンです.私はいくつかの回のようなウェブサイトをしようとしました.もちろん、彼らは巨大です.私は彼らのようなウェブサイトを作ることができませんでした、しかし、私はものがどのように働くかについて見たかったです.これはほんの始まりです.私は次のように反応JSとJSXのコードライブをレンダリングするためにウェブサイトを作るつもりです.

使ったライブラリ

Codemirror Editor

Codemirrorは既にインポートするCDSを持っていますが、私はローカルにインポートしたいと思いました.あなたがそれを試してみたい場合は、CDNSを使用することができます.

<!-- Codemirror Library -->
<script src="./Codemirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="./Codemirror/lib/codemirror.css">
<link rel="stylesheet" href="./Codemirror/theme/ayu-mirage.css">
<!-- MODES TO HIGHLIGHT CODES -->
<script src="./Codemirror/mode/javascript/javascript.js"></script>
<script src="./Codemirror/mode/css/css.js"></script>
<script src="./Codemirror/mode/xml/xml.js"></script>
<!-- ADDONS -->
<script src="./Codemirror/addon/selection/active-line.js"></script>
<!-- Style -->
<link rel="stylesheet" href="style.css">

codemirror折り畳みコードブロック、autocomplete、カスタム検索入力、自動閉じブラケット、自動終了タグなどのように多くのアドオンがあります.
HTMLのように見えます.

<div class="container">
        <div class="pane code-pane">
            <div class="html-box code-box" id="html-box">
                <div class="title">
                    <span class="title-text">
                        HTML
                    </span>
                </div>
            </div>
            <div class="css-box code-box" id="css-box">
                <div class="title">
                    <span class="title-text">
                        CSS
                    </span>
                </div>
            </div>
            <div class="js-box code-box" id="js-box">
                <div class="title">
                    <span class="title-text">
                        JS
                    </span>
                </div>
            </div>
        </div>
        <div class="pane output">
            <iframe id="preview" frameborder="0"></iframe>
        </div>
    </div>
    <script src="app.js"></script>

つのセクションがあります.下部と上部.共通の目的のためのペインクラスと、違いのためのユニークなクラスがあります.
トップペインは、HTML、CSSとJSのセクションinitと誰もが自分のタイトルがあります.それです.
CSSコードは次のようになります.

body{box-sizing: border-box;margin: 0; padding: 0; font-family: monospace;}
.container{
    width: 100vw; height: 100vh; overflow: hidden; background-color: #ddd;
    display: flex; flex-direction: column; }
.pane{ width: 100%; height: 50%; }
.code-pane{ background-color: aqua; display: flex; }
.output{ background-color: aquamarine; }
.code-box{ width: 34%; height: 100%; display: flex;  flex-direction: column;
    box-sizing: border-box; border-right: 1px solid white; font-size: 1.3rem; }
.html-box{ background-color: azure; resize: horizontal; overflow: auto; }
.css-box{ background-color: bisque; resize: horizontal; overflow: auto; }
.js-box{ background-color: blanchedalmond; resize: horizontal; overflow: auto;}
.title{ width: 100%; height: 40px; background-color: cadetblue; }
.title-text{ color: white; font-size: 2rem; margin-left: 20px;
     padding: 0 10px 0 10px; background-color: #3d3d3d; }
.CodeMirror{ height: 100%;}
#preview { width: 100%; height: 100%; background-color: cadetblue; }

HTML、CSS、およびJSボックスは水平にサイズ変更機能を持っています.しかし、私はそれをより良くするために他のどのライブラリも使用しませんでした.私は、CSS「リサイズ:水平」を使いました;divを変更可能にする.しかし、私はそれがそれを作るのがそんなに難しいことでないと確信します.あなたはそれを行うにはバニラJavaScriptといくつかの数学を使用することができます.
JavaScriptファイルです.

//Code Mirror Initialization

var htmlCodeInstance = CodeMirror(document.getElementById("html-box"), {
    lineNumbers: true,
    tabSize: 4,
    mode: "xml",
    theme: "ayu-mirage",
    styleActiveLine: true,
});
var cssCodeInstance = CodeMirror(document.getElementById("css-box"), {
    lineNumbers: true,
    tabSize: 4,
    mode: "css",
    theme: "ayu-mirage",
    styleActiveLine: true,
});
var jsCodeInstance = CodeMirror(document.getElementById("js-box"), {
    lineNumbers: true,
    tabSize: 4,
    mode: "javascript",
    theme: "ayu-mirage",
    styleActiveLine: true,
});

// Run update() function, when the instances have change
htmlCodeInstance.on("change", function(){
    console.log(htmlCodeInstance.getValue())
    update();
});
cssCodeInstance.on("change", function(){
    console.log(cssCodeInstance.getValue())
    update();
});
jsCodeInstance.on("change", function(){
    console.log(jsCodeInstance.getValue())
    update();
});

//Change iFrame when you receive changes
function update() {
    let preview = document.getElementById("preview").contentWindow.document;
    codeTemplate = `
    <!DOCTYPE html>
    <html>
    <head>
    <style>`
     + cssCodeInstance.getValue() + 
    `</style>
    <body>` + 
    htmlCodeInstance.getValue() +
    `<script>` + jsCodeInstance.getValue() + `</script>` +
    `</body>
    </html>`
    console.log("CODE TEMPLATE: " + codeTemplate)
    preview.open();
    preview.write(codeTemplate);
    preview.close();
}

第1部で.私は私のdivをcodemirrorに初期化して、若干の特性を与えます.私は、それをするより良い方法があるということを知っています.この方法を使用する前に、これをチェックしてください.

Using multiples instance of CodeMirror in a file

Lucretius Biah ・ Jul 14 ・ 4 min read

#codemirror #javasceipt

第2の部分では、私がそれを「onchange」メソッドに与えました.変更したupdate ()関数がコールされた場合に呼び出されます.
codeErrorで"on ()"メソッドが組み込まれています.それで、私はHTMLドキュメントで「AddeventListener」または「OnChange」プロパティを使用しませんでした.これは私が考えるより良い方法です.
そして最後に、私はiframeをHTMLドキュメントにします.この関数は、ユーザーがエディタのいずれかで何かを入力するときにのみ呼び出されます.
コードテンプレートを作りました.それで、ユーザーがエディタの1つで何かを変えるとき、彼らはテンプレートを変えます、そして、私はそれをiframeに書きます.
それです.この動画はお気に入りから削除されています.また近いうちに.
SEE GITHUB REPOSITORY