Rich Text Editor
Editor Berbasis TipTap
ℹ️ Di Mana Editor Ini Digunakan?
Editor teks berbasis TipTap (ProseMirror) digunakan di seluruh modul CMS: Berita, Pengumuman, Agenda, Halaman Statis, Layanan Publik, dan Konten PPID. Semua tempat yang membutuhkan penulisan konten panjang menggunakan editor yang sama.
Toolbar: Setiap Tombol Dijelaskan
Gambar: Toolbar editor teks — semua tombol format tersedia di bagian atas, grouped berdasarkan fungsi
Toolbar terdiri dari beberapa kelompok tombol yang dipisahkan garis tipis. Kiri ke kanan: format teks dasar, heading dan paragraf, perataan, daftar, media dan objek, lalu tabel dan tautan. Tombol yang aktif (tertekan) menandakan format sedang dipakai pada teks di posisi kursor. Berikut penjelasan setiap kelompok:
| Grup | Ikon | Tombol | Fungsi & Shortcut |
|---|---|---|---|
| Teks Dasar | B | Bold | Menebalkan teks untuk menonjolkan kata atau frasa penting. Jangan terlalu sering dipakai, cukup untuk poin kunci. Ctrl+B. |
| I | Italic | Memiringkan teks, biasanya untuk istilah asing, judul buku, atau penegasan halus. Ctrl+I. | |
| U | Underline | Garis bawah. Hindari dipakai untuk penekanan karena pembaca online sering menganggap teks bergaris bawah adalah tautan. Ctrl+U. | |
| S̶ | Strikethrough | Teks tercoret, berguna menandai bagian yang sudah direvisi atau tidak berlaku lagi tanpa menghapusnya. | |
| Heading & Paragraf | H1 | Heading 1 | Judul utama konten. Gunakan hanya satu H1 per halaman, biasanya sudah otomatis diisi dari judul artikel, jadi jarang perlu dipakai di badan tulisan. |
| H2 | Heading 2 | Sub-judul untuk membagi konten panjang menjadi bagian logis. Pembaca dan mesin pencari pakai H2 untuk memahami struktur tulisan. Contoh: "Syarat Dokumen", "Cara Mendaftar". | |
| " | Blockquote | Kutipan dengan indentasi dan garis vertikal di kiri. Dipakai untuk menampilkan perkataan, pasal regulasi, atau catatan penting yang perlu menonjol dari teks biasa. | |
| Alignment | ≡ | Align Left | Rata kiri, default dan paling nyaman dibaca untuk teks panjang. |
| ≡ | Align Center | Rata tengah, cocok untuk judul gambar, caption, atau teks pendek. Hindari untuk paragraf panjang karena susah dibaca. | |
| ≡ | Align Right | Rata kanan, jarang dipakai kecuali untuk tanda tangan, tanggal, atau nomor surat. | |
| Daftar (List) | • | Bullet List | Daftar dengan titik untuk item tanpa urutan, contoh jenis layanan atau daftar dokumen. |
| 1. | Ordered List | Daftar bernomor untuk langkah berurutan, contoh "Cara Mendaftar" langkah 1 sampai 5. Pembaca tahu harus ikuti urutannya. | |
| Media & Objek | 🖼 | Insert Image | Menyisipkan gambar. Klik ikon, pilih file (JPG, PNG, WebP), gambar akan diunggah dan tampil di editor. Sebaiknya optimasi ukuran dulu, maksimal 500KB. |
| 📎 | Insert File/PDF | Melampirkan dokumen (PDF, DOCX, XLSX) yang muncul sebagai tautan unduhan. Cocok untuk lampiran formulir, peraturan, atau laporan. | |
| ▶ | Embed Video | Menyematkan video YouTube. Tempel tautan video, akan otomatis jadi pemutar video yang bisa langsung ditonton di halaman. | |
| 📄 | Embed PDF/Iframe | Menyematkan PDF atau halaman iframe eksternal langsung di konten. Berguna untuk menampilkan dokumen PDF yang bisa dibaca langsung tanpa unduh, atau embed halaman eksternal. | |
</> | Code Block | Membuat blok kode terformat (monospace). Berguna untuk menampilkan cuplikan kode, perintah terminal, atau data terformat lainnya. | |
| Tabel & Tautan | ⊞ | Insert Table | Membuat tabel data sederhana di editor. Pilih jumlah baris dan kolom. Setiap sel bisa diisi teks dengan format apa pun. Sel tabel dapat di-merge (gabung) atau di-split (pisah) sesuai kebutuhan. Untuk tabel data besar yang sering diupdate, sebaiknya pakai Pustaka Tabel. |
| 🗂 | Insert Table from Pustaka | Menyematkan tabel dari Pustaka Tabel (database tabel terstruktur). Tabel yang disisipkan lewat tombol ini bersifat dinamis — perubahan data di Pustaka Tabel otomatis tercermin di halaman. | |
| 🔗 | Insert Link | Membuat hyperlink pada teks terpilih. Blok teks, klik ikon, masukkan tautan. Ctrl+K. Tautan internal (halaman portal) lebih baik dari tautan eksternal untuk SEO. | |
| ✂ | Unlink | Menghapus hyperlink tanpa menghapus teksnya, berguna bila tautan sudah tidak relevan. | |
| Fitur Lanjutan | </> | Source Code | Melihat dan mengedit HTML mentah. Hanya untuk pengguna mahir yang ingin kontrol penuh atas tata letak. Bila tidak yakin, jangan dipakai. |
| ⛶ | Fullscreen | Mode layar penuh agar fokus menulis tanpa gangguan menu di sekitarnya. Tekan Esc untuk keluar. | |
| ↩ | Undo | Membatalkan perubahan terakhir. Berguna saat tidak sengaja menghapus teks. Ctrl+Z. | |
| ↪ | Redo | Mengulang perubahan yang baru saja dibatalkan. Ctrl+Y. |
ℹ️ Paste Modal (Tempel Konten)
Saat Anda menempel (paste) konten dari aplikasi lain (Microsoft Word, halaman web, Google Docs), editor akan membuka paste modal dengan tiga opsi:
- Text — tempel sebagai teks biasa, semua format dihapus.
- HTML Clean — tempel sebagai HTML dengan format dasar (bold, italic, heading), markup berlebihan dibersihkan.
- HTML Full — tempel seluruh HTML apa adanya, termasuk semua format asli.
Pilih Text bila ingin mulai dari nol dan format ulang manual. Pilih HTML Clean bila ingin mempertahankan struktur dasar (heading, daftar, tebal) tanpa sampah markup dari Word. Pilih HTML Full hanya bila Anda yakin sumbernya bersih dan ingin mempertahankan tampilan persis.
Kapan Pakai Heading vs Bold?
Banyak penulis keliru memakai teks bold berukuran besar sebagai pengganti heading. Ini keliru. Heading (H2, H3) bukan sekadar tampilan tebal, melainkan penanda struktur konten yang dibaca mesin pencari dan pembaca layar (screen reader).
- Pakai Heading bila teks itu adalah judul bagian baru yang membuka topik berbeda. Contoh: "Syarat Dokumen", "Biaya Layanan".
- Pakai Bold bila Anda hanya ingin menonjolkan kata atau frasa dalam satu paragraf, tanpa memulai bagian baru. Contoh: "Pendaftaran gratuitan untuk semua WNI."
Aturan praktis: bila teks tersebut berdiri sendiri di barisnya dan diikuti paragraf baru, kemungkinan besar harus pakai Heading, bukan Bold.
Praktik Terbaik Menulis Konten
Gunakan Heading untuk Struktur
Bagi konten panjang dengan H2. Jangan gunakan bold besar sebagai pengganti heading — ini menyulitkan pembaca dan mesin pencari (SEO).
Hindari Copy-Paste dari Word
Microsoft Word menyisipkan banyak markup HTML tidak terlihat yang merusak tampilan. Jika terpaksa menempel dari Word, pilih opsi Text atau HTML Clean di paste modal yang muncul, lalu format ulang di editor.
Optimalkan Gambar Sebelum Upload
Kompres gambar ke ukuran yang wajar (maksimal 500KB per gambar) sebelum diunggah. Gambar terlalu besar memperlambat loading halaman.
Gunakan Tabel untuk Data, Bukan Layout
Tabel di editor ditujukan untuk data terstruktur (seperti jadwal, daftar harga, perbandingan). Jangan gunakan tabel untuk mengatur tata letak halaman.
💡 Tips: Preview Sebelum Publish
Setelah selesai menulis, selalu klik Preview (jika tersedia) atau simpan sebagai Draft terlebih dahulu, lalu lihat tampilannya di halaman publik sebelum menerbitkan. Pastikan semua gambar muncul, link berfungsi, dan format teks sesuai yang diharapkan.
Shortcut Keyboard Cepat
| Shortcut | Fungsi |
|---|---|
Ctrl+B | Bold |
Ctrl+I | Italic |
Ctrl+U | Underline |
Ctrl+K | Insert Link |
Ctrl+Z | Undo |
Ctrl+Y | Redo |
Ctrl+V | Paste (membuka paste modal dengan opsi Text / HTML Clean / HTML Full) |
Tips Menulis Konten yang Baik
Piramida Terbalik Informasi terpenting di paragraf pertama, detail di tengah, informasi tambahan di akhir. Pembaca online cenderung hanya membaca awal.
Paragraf Pendek Maksimal 3-4 kalimat per paragraf. Blok teks panjang membuat pembaca kabur.
Gunakan List untuk Poin-poin Bullet list untuk item tanpa urutan, numbered list untuk langkah-langkah berurutan.
Sisipkan Gambar Relevan Setiap 300-500 kata, sisipkan gambar untuk memecah teks dan menambah konteks visual.
Link ke Konten Terkait Tautkan ke halaman lain di portal Anda untuk meningkatkan waktu kunjungan dan SEO internal.