Belajar CodeIgniter #12: Cara Menggunakan Quilljs Untuk Editor Artikel

25 Februari 2025

Belajar CodeIgniter #12: Cara Menggunakan Quilljs Untuk Editor Artikel

Belajar CodeIgniter #12 - Halo, para pejuang kode! Kali ini, kita akan melanjutkan seri Belajar CodeIgniter dengan topik yang menarik, yaitu Cara Menggunakan Quilljs Sebagai Editor Artikel. Jika kamu mengikuti tutorial sebelumnya, kita sudah berhasil membuat form untuk menulis dan mengedit artikel. Namun, form tersebut masih sangat sederhana dan belum memiliki editor teks yang memadai.

Bayangkan, jika user ingin membuat teks menjadi bold atau italic, mereka harus mengetik manual tag HTML seperti <b></b> atau <i></i>. Tentu saja, ini akan menyulitkan, terutama bagi mereka yang tidak familiar dengan HTML. Nah, di sinilah Quilljs hadir sebagai solusi!

Apa Itu Quilljs?

Quilljs adalah library JavaScript yang dirancang khusus untuk membuat text editor di web. Keunggulannya adalah kemudahan dalam kustomisasi dan API yang ekspresif. Selain itu, Quilljs bersifat open source, sehingga kita bisa memodifikasinya sesuai kebutuhan tanpa harus membayar fitur premium.

Kenapa Memilih Quilljs?

Sebenarnya, ada beberapa pilihan editor teks lain seperti CKEditor dan TinyMCE. Namun, Quilljs dipilih karena ringan, mudah diintegrasikan, dan memiliki dokumentasi yang lengkap. Cocok banget untuk proyek kecil hingga menengah seperti yang sedang kita kerjakan dalam Belajar CodeIgniter ini.

Cara Menggunakan Quilljs

Untuk menggunakan Quilljs, kita hanya perlu menambahkan CSS dan JavaScript dari Quilljs, lalu melakukan inisialisasi. Berikut contoh sederhananya:

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


<!-- Initialize Quill editor -->

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

Mudah, bukan? Sekarang, mari kita terapkan Quilljs ke dalam proyek Belajar CodeIgniter kita!

Langkah 1: Menambahkan Quilljs ke Form New Article

Pertama, kita akan mengintegrasikan Quilljs ke dalam form new article. Buka file admin/post_new_form.php dan modifikasi kodenya seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <?php $this->load->view('admin/_partials/head.php') ?>
  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</head>
<body>
  <main class="main">
    <?php $this->load->view('admin/_partials/side_nav.php') ?>
    <div class="content">
      <h1>Write new Article</h1>
      <form action="" method="POST">
        <div>
          <label for="title">Title*</label>
          <input type="text" name="title" class="<?= form_error('title') ? 'invalid' : '' ?>" placeholder="Judul artikel" value="<?= set_value('title') ?>" required maxlength="128" />
          <div class="invalid-feedback">
            <?= form_error('title') ?>
          </div>
        </div>
        <div>
          <label for="content">Konten</label>
          <input type="hidden" name="content" value="<?= set_value('content') ?>">
          <div id="editor" style="min-height: 160px;"><?= set_value('content') ?></div>
        </div>
        <div>
          <button type="submit" name="draft" class="button" value="true">Save to Draft</button>
          <button type="submit" name="draft" class="button button-primary" value="false">Publish</button>
          <div class="invalid-feedback">
            <?= form_error('draft') ?>
          </div>
        </div>
      </form>
      <?php $this->load->view('admin/_partials/footer.php') ?>
      
      
        var quill = new Quill('#editor', {
          theme: 'snow'
        });
        quill.on('text-change', function(delta, oldDelta, source) {
          document.querySelector("input[name='content']").value = quill.root.innerHTML;
        });
      
    </div>
  </main>
</body>
</html>

Dengan kode di atas, Quilljs akan berfungsi sebagai editor teks di form new article.

Langkah 2: Modifikasi Toolbar Quilljs

Secara default, Quilljs menyediakan toolbar dengan berbagai fitur seperti bold, italic, list, dan lainnya. Namun, jika kamu ingin menambahkan atau mengurangi fitur, kamu bisa memodifikasi toolbar-nya.

Berikut contoh kode untuk custom toolbar:


  var quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
      toolbar: [
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        [{ font: [] }],
        ["bold", "italic"],
        ["link", "blockquote", "code-block", "image"],
        [{ list: "ordered" }, { list: "bullet" }],
        [{ script: "sub" }, { script: "super" }],
        [{ color: [] }, { background: [] }],
      ]
    },
  });
  quill.on('text-change', function(delta, oldDelta, source) {
    document.querySelector("input[name='content']").value = quill.root.innerHTML;
  });

Dengan kode ini, kamu bisa menyesuaikan toolbar sesuai kebutuhan proyek Belajar CodeIgniter kamu.

Langkah 3: Menggunakan Quilljs di Form Edit

Untuk form edit, caranya sama persis dengan form new article. Kamu hanya perlu memastikan bahwa konten artikel yang sudah ada dimuat ke dalam editor. Berikut contoh kodenya:

<div>
  <label for="content">Konten</label>
  <?php $content = form_error('content') ? set_value('content') : $article->content ?>
  <input type="hidden" name="content" value="<?= html_escape($content) ?>">
  <div id="editor" style="min-height: 160px;"><?= $content ?></div>
</div>

Kesimpulan

Setelah berhasil mengintegrasikan Quilljs ke dalam proyek Belajar CodeIgniter, kamu bisa melanjutkan dengan menambahkan fitur lain seperti upload gambar atau integrasi dengan database. Jangan lupa untuk terus eksplorasi dokumentasi Quilljs agar kamu bisa memaksimalkan penggunaannya.

Nah, buat kamu yang masih penasaran atau punya pertanyaan seputar Belajar CodeIgniter, jangan ragu untuk bergabung di komunitas Codepolitan! Di sini, kamu bisa bertanya, berdiskusi, atau bahkan berbagi ilmu dengan sesama developer. Yuk, ramaikan komunitas kita dan jadilah bagian dari generasi coder Indonesia yang kreatif dan inovatif!