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.
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.
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ACE Editor</title>
<style>
/* CSS Style */
</style>
</head>
<body>
<pre id="editor"></pre>
<div id="statusBar">ace rocks!</div>
<!-- Bagian: JavaScript -->
<script>
// JavaScript
</script>
</body>
</html>Kedua, letakkan CSS Style di bagian Head.
Copy CSS Style dibawah ini untuk menampilkan layout lebar.
CSS
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;}/* CSS Style */
body{overflow:hidden}
#editor{margin:0;position:absolute;top:0;bottom:20px;left:0;right:0}
#statusBar{margin:0;padding:0;position:absolute;left:0;right:0;bottom:0;height:20px;background-color:#f5f5f5;color:gray}
.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.<!-- Bagian: JavaScript --> <!-- Libs Ace Master - versi: 1.4.2 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js"></script> <!-- Petunjuk ext-statusbar --> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ext-statusbar.js"></script>
Keempat, perlengkapan JavaScript.
Sisipakan JavaScript dibawah ini.
//<![CDATA[
// JavaScript
var editor = ace.edit("editor"); // id jenis editor
var StatusBar = ace.require('ace/ext/statusbar').StatusBar; // Require StatusBar
// Buat indikator status pemilihan sederhana
var statusBar = new StatusBar(editor, document.getElementById('statusBar')); // id StatusBar
editor.setTheme("ace/theme/monokai"); // Pengaturan Theme
editor.session.setMode("ace/mode/html"); // Sesi Mode
//]]>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
Dibawah ini cara merubah JavaScript. Silahkan ikuti tips berikut ini.
CSS style, tag div dan JavaScript.Dibawah ini cara merubah JavaScript. Silahkan ikuti tips berikut ini.
//<![CDATA[
// Mode HTML
var editor1 = ace.edit("editor1"); // id jenis editor
editor1.setTheme("ace/theme/chrome"); // Pengaturan Theme
editor1.session.setMode("ace/mode/html"); // Sesi Mode
// Mode css
var editor2 = ace.edit("editor2"); // id jenis editor
editor2.setTheme("ace/theme/monokai"); // Pengaturan Theme
editor2.session.setMode("ace/mode/css"); // Sesi Mode
// Mode JavaScript
var editor3 = ace.edit("editor3"); // id jenis editor
editor3.setTheme("ace/theme/mono_industrial"); // Pengaturan Theme
editor3.session.setMode("ace/mode/javascript"); // Sesi Mode
//]]>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:
<!-- Theme: Chrome --> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/theme-chrome.js"></script> <!-- Theme: Monokai --> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/theme-monokai.js"></script> <!-- Theme: Mono Industrial --> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/theme-mono_industrial.js"></script>
Pada bagian ini, pengaturan
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
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.
0 Comments
Post a Comment