Menambahkan Custom HTML Tag Module - Quill.js

Quill.js merupakan salah satu dari WYSIWYG (What You See Is What You Get) text editor yang dapat kamu gunakan secara gratis.

Quill.js secara default menyediakan beberapa modul yang langsung dapat digunakan, seperti Bold, italic, underline, striketrhough, dan banyak lainnya.

Modul-modul ini membungkus teks yang dipilih dengan menggunakan tag HTML yang telah ada sebelumnya.

Pada tutorial kali ini akan dijelaskan bagaimana cara menambahkan modul kustom yang dapat membungkus teks dengan menggunakan tag HTML kustommu sendiri.

Cara Menginstal Quill.js

Kamu dapat menggunakan Quill.js dengan membaca dokumentasinya pada website Quill.js atau kamu dapat menambahkan kode di bawah ini pada file proyekmu.

<!-- Menambahkan style Quill.js -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Membuat container toolbar -->
<div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
</div>

<!-- Membuat editor container -->
<div id="editor">
  <p>Hello World!</p>
</div>

<!-- Menambahkan library Quill.js -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Inisialisasi editor Quill -->
<script>
  var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow',
  })
</script>

Cara Menambahkan Toolbar Quill.js

Kamu bisa menambahkan toolbar dengan cara berikut.

var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  [{ header: 1 }, { header: 2 }],
  [{ list: 'ordered' }, { list: 'bullet' }],
  [{ script: 'sub' }, { script: 'super' }],
  [{ indent: '-1' }, { indent: '+1' }],
  [{ direction: 'rtl' }], // text direction           
  [{ size: ['small', false, 'large', 'huge'] }],
  [{ header: [2, 3, 4, 5, 6, false] }],               
  [{ color: [] }, { background: [] }],
  [{ font: [] }],
  [{ align: [] }],
  ['link', 'image', 'video'],
  ['formula'],
  ['clean']
]

var options = {
  modules: {
    toolbar: toolbarOptions,
  },
  placeholder: 'Compose an epic..',
  theme: 'snow',
}

var editor = new Quill('#editor', options)

Membuat Tag HTML Kustom

Pertama-tama kita akan mengimport blot inline dengan cara berikut.

let Inline = Quill.import('blots/inline')

Kemudian buat kelas baru dan extend blot inlinenya.

class myTag extends Inline { }
myTag.blotName = 'custom-tag'
myTag.tagName = 'custom-tag'

Selanjutnya register kelas yang telah dibuat tadi ke Quill dengan cara berikut.

Quill.register(myTag)

Kemudian inisialisasikan Quill dengan modul baru yang telah dibuat dengan cara berikut.

var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  [{ header: 1 }, { header: 2 }],
  [{ list: 'ordered' }, { list: 'bullet' }],
  [{ script: 'sub' }, { script: 'super' }],
  [{ indent: '-1' }, { indent: '+1' }],
  [{ direction: 'rtl' }], // text direction           
  [{ size: ['small', false, 'large', 'huge'] }],
  [{ header: [2, 3, 4, 5, 6, false] }],               
  [{ color: [] }, { background: [] }],
  [{ font: [] }],
  [{ align: [] }],
  ['link', 'image', 'video'],
  ['formula'],
  ['clean'],
  ['custom-tag'] // tag kustom
]

var options = {
modules: {
    toolbar: toolbarOptions,
  },
  placeholder: 'Compose an epic..',
  theme: 'snow',
}

var editor = new Quill('#editor', options)

Pada saat inisialisasi, tombol custom-tag tidak akan terlihat apa-apa di toolbar Quill alias invisible karena hanya berupa tombol tanpa teks. Bagaimana cara mengatasinya ?

Tombol custom-tag memiliki sebuah atribut kelas .ql-custom-tag. Dengan menggunakan atribut kelas tersebut, kita akan menambahkan properti content pada pseudo elemennya dengan cara berikut.

.ql-custom-tag {
  width: auto;
}

.ql-custom-tag::after {
  content: 'Custom Tag';
}

Tautan Referensi

• https://quilljs.com/
• https://github.com/quilljs/quill