Media Pengembangan Web & App | by APPKEY

Pembuatan WebsiteWeb ProgrammingMengenal Quill JS, Text Editor Modern Berbasis JavaScript

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-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.

Artikel Terkait  TLS Adalah? Mengenal Istilah SSL/TLS dan HTTPS

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.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Mau posting artikel iklan?

Yuk klik dan ikuti ketentuan layanan dari kami, dapatkan penawaran paket dengan harga terbaik!

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Contoh PHP Curl : 10 Hal Luar Biasa yang dapat Anda Kembangkan dengan Curl

Meningkatnya jumlah aplikasi yang pindah ke web telah membuat "HTTP Scripting" lebih sering diminta dan diinginkan. Untuk dapat secara...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Rekomendasi 7 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

Ini Cara Mudah Membuat Redirect PHP | Seri Belajar PHP

Fungsi redirect PHP sangat banyak digunakan dalam kehidupan berwebsite alias mengelola website. Script redirect PHP banyak dipergunakan oleh user...

4 Cara Mengatasi Autentikasi Google Play Store dengan Cepat dan Mudah

Apakah Anda sedang mengalami masalah autentikasi Google Play Store? Permasalahan autentikasi Google Play Store adalah permasalahan umum sering dialami...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Rekomendasi 10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya