Bina editor kod dalam talian menggunakan JavaScript-tutorial js-php.cn

Bina editor kod dalam talian menggunakan JavaScript

PHPz

Lepaskan： 2023-08-08 08:17:16

asal

2682 orang telah melayarinya

Tajuk: Menggunakan JavaScript untuk membina editor kod dalam talian

Pengenalan:
Editor kod dalam talian ialah salah satu alatan yang biasa digunakan oleh pengaturcara, yang membolehkan pengguna mengedit, menjalankan dan nyahpepijat kod. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk membina penyunting kod dalam talian yang mudah tetapi berkuasa.

1. Bahagian HTML dan CSS:
Pertama, kita perlu mencipta reka letak HTML asas untuk menampung editor kod. Kita boleh menggunakan elemen <div> sebagai kawasan penyuntingan kod dan menetapkan id unik untuknya. Kemudian kita perlu mencipta gaya CSS yang sesuai untuk editor menentukan penampilan dan interaksinya. <div>元素来作为代码编辑区域，并为其设置一个唯一的id。然后，我们需要为编辑器创建适当的CSS样式来定义其外观和交互。

<!DOCTYPE html>
<html>

<head>
    <style>
        /* 定义代码编辑区域样式 */
        .code-editor {
            width: 100%;
            height: 300px;
            border: 1px solid #ccc;
            padding: 10px;
            font-family: "Courier New", monospace;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div id="editor" class="code-editor"></div>

    <script src="main.js"></script>
</body>

</html>

Salin selepas log masuk

二、JavaScript部分：
在JavaScript中，我们将使用一个叫做"CodeMirror"的开源库来实现代码的编辑和显示功能。首先，我们需要在HTML中引入CodeMirror的脚本文件。

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.css">

Salin selepas log masuk

接下来，我们可以在JavaScript文件main.js中编写代码来初始化和配置我们的代码编辑器。

// 初始化代码编辑器
var editor = CodeMirror(document.getElementById("editor"), {
    mode: "javascript", // 设置编辑器语言为JavaScript
    lineNumbers: true, // 显示行号
    theme: "default", // 编辑器主题样式
    indentUnit: 4, // 缩进单位为4个空格
    autofocus: true // 自动获取焦点
});

// 添加示例代码
var exampleCode = `function HelloWorld() {
    console.log("Hello, World!");
}`;

editor.setValue(exampleCode); // 将示例代码添加到编辑器中

// 监听代码变化事件
editor.on("change", function(cm) {
    var code = cm.getValue();
    // 在这里可以执行需要的操作，比如实时运行代码或保存到服务器等等
});

Salin selepas log masuk

通过上述代码，我们使用CodeMirrorrrreee

2. Bahagian JavaScript:

Dalam JavaScript, kami akan menggunakan perpustakaan sumber terbuka yang dipanggil "CodeMirror" untuk melaksanakan fungsi penyuntingan dan paparan kod. Pertama, kita perlu memperkenalkan fail skrip CodeMirror ke dalam HTML.

rrreee

Seterusnya, kami boleh menulis kod dalam fail JavaScript main.js untuk memulakan dan mengkonfigurasi editor kod kami.
rrreee

Dengan kod di atas, kami menggunakan pustaka CodeMirror untuk mencipta editor kod dengan nombor baris, penyerlahan sintaks dan lekukan automatik. 🎜🎜Kami juga menambahkan kod sampel dan mendengar acara penukaran kod. Dalam fungsi pengendali acara, anda boleh melakukan operasi yang sesuai berdasarkan keperluan sebenar, seperti menjalankan kod dalam masa nyata, menyimpan ke pelayan atau menyepadukan dengan fungsi lain. 🎜🎜Kesimpulan: 🎜Melalui artikel ini, kami belajar tentang menggunakan JavaScript dan perpustakaan CodeMirror untuk membina editor kod dalam talian yang ringkas tetapi berkuasa. Anda boleh menyesuaikan dan memanjangkannya lagi untuk memenuhi keperluan khusus anda. Saya harap artikel ini membantu dalam membangunkan editor kod dalam talian anda sendiri. 🎜

Atas ialah kandungan terperinci Bina editor kod dalam talian menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!