Mengenal Quill JS, Text Editor Modern Berbasis JavaScript

Last Updated on December 8, 2021 by

Website merupakan kebutuhan yang sangat krusial di masa kini. Untuk membangun sebuah website yang luar biasa membutuhkan sebuah text editor yang baik juga. Sayangnya tidak semua orang bisa memahami pengkodingan maupun logika pemrograman untuk membangun suatu website. Oleh karena itu dibutuhkan sebuah text editor yang powerful dan mudah digunakan. Quill JS adalah salah satunya! Ini adalah editor WYSIWYG (What You See Is What You Get) sehingga sangat mudah digunakan.

Quill merupakan text editor open source gratis yang dibuat untuk web modern. Dengan arsitektur modular dan API ekspresifnya, ini sepenuhnya dapat disesuaikan agar sesuai dengan kebutuhan apa pun. Berikut ini adalah penjelasan lengkap Quill.

Quill JS : WYSIWYG Editor Terbaik JavaScript

Quill.js adalah alat dalam kategori Editor Teks dari technology stack. Quill.js adalah alat sumber terbuka dengan 31.4K bintang GitHub dan 2.6K fork di GitHub. Quill adalah editor WYSIWYG open source gratis yang dibuat untuk web modern.

Dengan arsitektur yang dapat diperluas dan API ekspresif, Anda dapat sepenuhnya menyesuaikannya untuk memenuhi kebutuhan Anda.

Beberapa alasan utama pengguna memilih Quill adalah kemudahan penggunaannya, opsi penyesuaian, dokumentasi yang mengagumkan, dan fakta bahwa itu adalah open-source. Grafik popularitas tren npm di bawah ini menunjukkan statistik unduhan untuk Quill dan alternatif editor teks WYSIWYG lainnya dalam satu tahun terakhir.

Fitur-Fitur Modern Quill JS

Quill memiliki sejumlah fitur modern yang menarik dan layak dicoba. Adapun fitur-fitur dari Quill JS adalah:

1. Desain Berbasis API

Editor teks yang kaya (Rich Text Editor) seperti Quill dibuat untuk membantu orang menulis teks. Namun yang mengejutkan, sebagian besar Rich Text Editor tidak tahu teks apa yang dibuat pengguna. Berbagai editor ini melihat konten mereka melalui lensa yang sama dengan yang dilakukan pengembang web : DOM.

Hal ini dapat menyajikan ketidakcocokan impedansi karena DOM terdiri dari Node yang diatur dalam pohon yang tidak seimbang, sedangkan teks terdiri dari garis, kata, dan karakter. Tidak ada DOM API di mana karakter adalah satuan ukuran. Dengan batasan ini, sebagian besar Rich Text Editor tidak dapat menjawab pertanyaan sederhana seperti “Teks apa yang ada dalam kisaran ini?” atau “Apakah kursor pada teks yang dicetak tebal?”

Mencoba membangun pengalaman pengeditan yang kaya di atas kode-kode primitif seperti itu sangat sulit dan membuat frustrasi. Namun, Quill dirancang untuk mengedit dan mempertimbangkan karakter, dan membangun API-nya di atas unit-unit sentris teks alami ini.

Untuk mengetahui apakah elemen adalah sesuatu yang tebal, Quill tidak perlu melintasi DOM untuk mencari node <b> atau <strong> atau atribut gaya font-weight cukup panggil getFormat(5, 1). Semua panggilan API intinya memungkinkan indeks dan panjang arbitrer untuk akses atau modifikasi. API acaranya juga melaporkan perubahan dalam format JSON yang intuitif. Tidak perlu mem-parsing HTML atau pohon DOM yang berbeda.

2. Konten dan Pemformatan yang Bisa Dikustomisasi

Mengevaluasi kekurangan-kekurangan Rich Text Editor semudah membandingkan daftar periksa format yang diinginkan. Tanda Rich Text Editor yang bagus adalah berapa banyak format yang didukungnya. Hal ini masih merupakan ukuran penting, tetapi batas bawah mendekati tak terhingga.

Teks tidak lagi ditulis untuk dicetak. Namun teks itu ditulis untuk dirender di web serta di atas kanvas yang jauh lebih kaya daripada kertas. Konten dapat hidup, interaktif, atau bahkan kolaboratif. Hanya beberapa Rich Text Editor yang dapat mendukung media sederhana seperti gambar dan video; hampir tidak ada yang bisa menyematkan tweet atau grafik interaktif.

Namun inilah arah pergerakan web, yaitu lebih kaya dan lebih interaktif. Alat yang mendukung pembuatan konten perlu mempertimbangkan kasus penggunaan ini. Quill mengekspos model dokumennya sendiri, abstraksi yang kuat di atas DOM, memungkinkan untuk ekstensi dan kustomisasi.

Batas atas format dan konten yang dapat didukung Quill tidak terbatas. Pengguna telah menggunakannya untuk menambahkan dek slide yang disematkan, daftar periksa interaktif, dan model 3D.

3. Lintas Platform

Dukungan lintas platform penting untuk berbagai library Javascript, tetapi kriteria untuk apa artinya ini seringkali berbeda. Bagi Quill JS, bar tidak hanya berfungsi sebagaimana mestinya, tetapi juga harus berjalan atau bekerja dengan cara yang sama.

Tidak hanya fungsionalitas yang menjadi pertimbangan lintas platform, tetapi juga pengalaman pengguna dan pengembang. Jika beberapa konten menghasilkan markup tertentu di Chrome pada OSX, itu akan menghasilkan markup yang sama di Internet Explorer. Jika menekan enter maka hal tersebut akan mempertahankan status format tebal di Firefox pada Windows, itu akan dipertahankan di Safari seluler.

4. Mudah digunakan

Semua manfaat ini hadir dalam paket yang mudah digunakan. Quill dikirimkan dengan default terbaik dan mudah dipahami yang dapat langsung Anda gunakan hanya dengan beberapa baris Javascript:

var quill =new Quill('#editor',{ 
modules:{toolbar:true}, 
theme:'snow' 
});

Jika aplikasi Anda tidak pernah menuntutnya, Anda tidak perlu menyesuaikan Quill cukup nikmati pengalaman yang kaya dan konsisten yang keluar dari kotak.

Memulai Quil JS Dengan Cepat

Cara terbaik untuk memulai adalah mencoba contoh sederhana. Anda bisa download Quill di sini: https://quilljs.com/. Quill diinisialisasi dengan elemen DOM untuk menampung editor. Isi dari elemen tersebut akan menjadi isi awal Quill JS.

<!-- Include stylesheet --> 
<link
href=https://cdn.quilljs.com/1.3.6/quill.snow.css
rel="stylesheet">
<!-- Create the editor container -->
<div
id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p> 
</div> 
<!-- Include the Quill library --> 
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script> <!-- Initialize Quill editor --> 
<script> 
var quill = new Quill('#editor',{ 
theme:'snow'}); 
</script>

Cara Kustomisasi Quil JS

Quill dirancang dengan mempertimbangkan penyesuaian dan ekstensi. Ini dicapai dengan mengimplementasikan inti editor kecil yang diekspos oleh API granular yang terdefinisi dengan baik.

Inti ditambah dengan modul, menggunakan API yang sama dengan yang Anda akses. Secara umum, penyesuaian umum ditangani dalam konfigurasi, antarmuka pengguna oleh Tema dan CSS, fungsionalitas oleh modul, dan konten editor oleh Parchment.

Selain itu Quill JS juga menyediakan opsi konfigurasi. Quill lebih menyukai Code daripada Configuration™, tetapi untuk kebutuhan yang sangat umum, terutama di mana kode yang setara akan panjang atau rumit, Quill menyediakan opsi konfigurasi. Ini akan menjadi tempat pertama yang baik untuk melihat untuk menentukan apakah Anda bahkan perlu menerapkan fungsionalitas khusus apa pun.

Dua dari opsi yang paling kuat adalah modul dan tema. Anda dapat secara drastis mengubah atau memperluas apa yang dapat dan dilakukan Quill hanya dengan menambahkan atau menghapus modul individual atau menggunakan tema yang berbeda.

Demikianlah penjelsan tentang Quill JS dan fitur menariknnya sebagai WYSIWYG Editor. Anda juga bisa melihat berbagai ulasan tentang Quill di https://github.com/quilljs/quill sebelum Anda memutuskan untuk menggunakannya.

Jangan lupa untuk kunjungi selalu Web App di https://appkey.id/ atau download aplikasinya di Google Play Store sekarang untuk dapatkan informasi terbaru.