Ace Editor Kode Kinerja Tinggi untuk Web

Blog Posts

Home › Ace Editor › Coding › Tutorial › Ace Editor Kode Kinerja Tinggi untuk Web

Ace Editor Kode Kinerja Tinggi untuk Web

Posted by: Pratama. Updated: January 31, 2019

ACE adalah editor kode berkinerja tinggi untuk Web yang dapat disematkan yang ditulis dalam JavaScript. ACE dengan mudah menangani dokumen besar dengan 100.000 baris kode dan lebih banyak lagi tanpa masalah. Editor Ace dirancang dengan kode berbasis web yang cocok dan memperluas fitur, kegunaan, dan kinerja editor asli yang ada seperti TextMate, Vim, atau Eclipse. Beberapa proyek yang menggunakan ACE termasuk Codiad, MODx, Wolf CMS, CMS Made Simple, ProcessWire dan StackEdit. Editor ini dapat dengan mudah disematkan di halaman web dan aplikasi JavaScript. ACE dapat digunakan secara lokal atau pada server jarak jauh. Itu juga dapat digunakan sebagai alat yang berdiri sendiri atau tertanam di aplikasi berbasis web yang lebih kompleks. Dukungan lain dari Ace adalah Syintax Hightlighting mewah, pilihan theme, Autocomplete, dan kebutuhan add-on lainnya. Ace dipertahankan sebagai editor utama untuk Cloud9 IDE dan merupakan penerus proyek Mozilla Skywriter (Bespin).

Cloud9 IDE ini bernama AWS Cloud9, Cloud9 hadir dengan alat-alat penting untuk bahasa pemrograman populer, termasuk JavaScript, Python, PHP, dan banyak lagi, sehingga Sobat tidak perlu menginstal file atau mengkonfigurasi mesin pengembangan Sobat untuk memulai proyek baru. Pengembangan terintegrasi berbasis cloud (IDE) yang memungkinkan Sobat menulis, menjalankan, dan men-debug kode hanya dengan browser. Ini termasuk editor kode, debugger, dan terminal.

Fitur pendukung:

Penyorotan sintaksis untuk lebih dari 110 bahasa (TextMate / Sublime Text. HTML Language file dapat diimpor).
Lebih dari 20 tema ( File Textmate / Sublime Text .tmtheme dapat diimpor).
Indentasi dan outdent otomatis.
Baris perintah opsional.
Menangani dokumen-dokumen besar (empat juta baris tampaknya menjadi batasnya!).
Binding kunci sepenuhnya dapat disesuaikan termasuk mode vim dan Emacs.
Cari dan ganti dengan ekspresi reguler.
Sorot tanda kurung yang cocok.
Beralih antara tab lunak dan tab nyata.
Menampilkan karakter tersembunyi.
Seret dan lepas teks menggunakan mouse.
Pembungkus garis.
Lipat kode.
Banyak kursor dan pilihan
Pemeriksa sintaksis langsung (saat ini JavaScript / CoffeeScript / CSS / XQuery).
Potong, salin, dan tempel fungsionalitas.

Bagimana cara membuat ACE Editor?

Gambar dibawah ini merupakan salah satu contoh mode "Ace Live Editor" dengan layout yang telah disesuaikan. Tersedia dengan kolum HTML editor, CSS editor, JavaScript editor dan pratinjau Ace Iframe. Didukung juga dengan Ace autocomplete, Ace Editor Undo Redo, Ace theme setting, Ace text sizer dan Ace menu bar seperti demo yang ditujukan Demo Ace Editor - Ace Kitchen-Sink.

ujicode - Ace Editor Kode Kinerja Tinggi untuk Web

Dibawah ini merupakan dasar-dasar membuat Ace editor standar, namun jika ingin melengkapi dengan banyak fitur lainnya, Sobat dapat melengkapi fitur pendukung seperti diatas dan melihat repositori ini yang disediakan di "Documentation AceText".

Pertama, silahkan persiapkan HTML berikut ini untuk membuat bagian dari Ace Editor. Editor ini dilengkapi dengan petunjuk statusBar dan fullscreen.
Taging pre adalah tujuan dari editor ini, namun Sobat juga dapat menggunakan mode: tag pre, tag div, dan tag textarea. Sobat dapat menggunakan Editor Area di halaman ini untuk menguji code.


20
 
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6
    <title>ACE Editor</title>
7
<style>
8
/* CSS Style */
9
</style>
10
</head>
11
<body>
12
    <pre id="editor"></pre>
13
    <div id="statusBar">ace rocks!</div>
14
<!-- Bagian: JavaScript -->
15
16
<script>
17
// JavaScript
18
</script>
19
</body>
20
</html>

Kedua, letakkan CSS Style di bagian Head.

Copy CSS Style dibawah ini untuk menampilkan layout lebar.
CSS


 
body {overflow: hidden;}

adalah code untuk menyembunyikan scrollbar. Jika Sobat ingin menampilkan scrollbar di Ace Editor, silahkan setting


 
body {overflow: scroll;}

atau


 
body {overflow: auto;}

Bagimana cara menjalankan salah satu scrollbar di Ace Editor?

Sobat dapat melakukan pengaturan CSS


 
body {overflow-y: scroll;  overflow-x: hidden;}

atau sebaliknya


 
body {overflow-y: hidden;  overflow-x: scroll;}


5
 
1
/* CSS Style */
2
body{overflow:hidden}
3
#editor{margin:0;position:absolute;top:0;bottom:20px;left:0;right:0}
4
#statusBar{margin:0;padding:0;position:absolute;left:0;right:0;bottom:0;height:20px;background-color:#f5f5f5;color:gray}
5
.ace_status-indicator{color:gray;position:absolute;right:0;border-left:1px solid}

Ketiga, gunakan link cdnjs cloudflare dibawah ini :

Code ini dapat diletakan diatas JavaScript di HTML tersebut, src ini digabung dan diperkecil dengan uglify.js.


7
 
1
<!-- Bagian: JavaScript -->
2
3
<!-- Libs Ace Master - versi: 1.4.2 -->
4
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js"></script>
5
6
<!-- Petunjuk ext-statusbar -->
7
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ext-statusbar.js"></script>

Keempat, perlengkapan JavaScript.

Sisipakan JavaScript dibawah ini.


10
 
1
//<![CDATA[
2
// JavaScript
3
    var editor = ace.edit("editor"); // id jenis editor
4
    var StatusBar = ace.require('ace/ext/statusbar').StatusBar; // Require StatusBar
5
6
    // Buat indikator status pemilihan sederhana
7
    var statusBar = new StatusBar(editor, document.getElementById('statusBar')); // id StatusBar
8
    editor.setTheme("ace/theme/monokai"); // Pengaturan Theme
9
    editor.session.setMode("ace/mode/html"); // Sesi Mode
10
//]]>

Diatas merupakan alat editor yang digunakan untuk mengerjakan mode HTML. Jika sobat ingin editor yang digunakan untuk CSS JavaScript ataupun editor lainnya (Kolum yang berbeda), tentukan Ace editor dengan mode yang berbeda. Misalnya mengubah CSS style, tag div dan JavaScript.
Dibawah ini cara merubah JavaScript. Silahkan ikuti tips berikut ini.


17
 
1
//<![CDATA[
2
3
// Mode HTML
4
    var editor1 = ace.edit("editor1"); // id jenis editor
5
    editor1.setTheme("ace/theme/chrome"); // Pengaturan Theme
6
    editor1.session.setMode("ace/mode/html"); // Sesi Mode
7
8
// Mode css
9
    var editor2 = ace.edit("editor2"); // id jenis editor
10
    editor2.setTheme("ace/theme/monokai"); // Pengaturan Theme
11
    editor2.session.setMode("ace/mode/css"); // Sesi Mode
12
13
// Mode JavaScript
14
    var editor3 = ace.edit("editor3"); // id jenis editor
15
    editor3.setTheme("ace/theme/mono_industrial"); // Pengaturan Theme
16
    editor3.session.setMode("ace/mode/javascript"); // Sesi Mode
17
//]]>

Ace SetTheme

Pada umumnya setTheme Ace Editor dapat berjalan baik tanpa menggunakan kode sumber CSS yang dipasang di HTML ini atau dengan cukup menambahkan setTheme di bagian JavaScript. Jika kemungkinkan keterlambatan prosess setiap merubah pengaturan theme ini, silahkan menambahkan CSS link cdnjs cloudflare dibawah ini:


8
 
1
<!-- Theme: Chrome -->
2
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/theme-chrome.js"></script>
3
4
<!-- Theme: Monokai -->
5
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/theme-monokai.js"></script>
6
7
<!-- Theme: Mono Industrial -->
8
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/theme-mono_industrial.js"></script>

Pada bagian ini, pengaturan SetTheme CSS Style akan berjalan otomatis di bagian head dan kemudian merubah theme di area editor.
Sobat juga dapat melakukan pengaturan dengan dua pilihan, misalkan: pengaturan SetTheme dimasing-masing kolum editor secara serentak (pengaturan warna tema yang sama) dengan satu kali tombol select theme, atau dengan memilih pengaturan SetTheme yang berbeda dimasing-masing kolum editor (Contoh JavaScript diatas). SetTheme ini juga dapat dilakukan dengan menambahkan ext-settings_menu yang telah disediakan di Code Sumber Ace.

Kode Sumber Terbuka

Ace adalah proyek komunitas yang secara aktif mendorong dan mendukung kontribusi pengkodean. Ace Editor ini disedikan juga dengan perpustakaan inti yang dapat digunakan ataupun sekedar mencoba untuk laman web. Code sumber Ace dihosting di GitHub dan dirilis di bawah lisensi BSD - sangat sederhana dan ramah untuk semua jenis proyek, baik open-source atau tidak.

Sekian wisata coding hari ini tentang Ace Editor Kode Kinerja Tinggi untuk Web. Selamat bertugas.

Ace Editor Kode Kinerja Tinggi untuk Web | UjiCode

Blog Posts

Ace Editor Kode Kinerja Tinggi untuk Web

0 Comments

Post a Comment

Editor Area

CSS Editor

JavaScript Editor

HTML Encoded

Source

Proyek berikutnya

HTML Editor

JavaScript

Latest Notes

Configuration

Bantuan

Ace Editor Kode Kinerja Tinggi untuk Web | UjiCode

Blog Posts

Ace Editor Kode Kinerja Tinggi untuk Web

0 Comments

Post a Comment

Editor Area

CSS Editor

JavaScript Editor

HTML Encoded

Source

Proyek berikutnya

HTML Editor

JavaScript

Latest Notes

Configuration

Bantuan

Save Code

Upload Code