Demo Lengkap: Semua Fitur TinyMCE Editor

Artikel ini mendemonstrasikan semua fitur yang tersedia di TinyMCE editor kami. Dari formatting dasar hingga fitur advanced seperti table dan code blocks.

1. Heading & Struktur Dokumen

TinyMCE mendukung berbagai level heading untuk struktur dokumen yang baik:

Heading 3 - Sub Bagian

Heading 4 - Detail Lebih Dalam

Heading 5 - Spesifik

Heading 6 - Minimum

2. Formatting Teks

Berbagai formatting yang tersedia:

• Bold text - untuk penekanan kuat
• Italic text - untuk penekanan lembut atau istilah asing
• Underlined text - untuk highlight khusus
• Bold dan Italic - kombinasi formatting

Blockquote

"Akuntansi adalah bahasa bisnis. Memahami akuntansi berarti memahami bagaimana bisnis berkomunikasi."

- Warren Buffett

3. Advanced Text Formatting

Fitur formatting tambahan untuk konten yang lebih kaya:

Strikethrough

Gunakan strikethrough untuk menandai teks yang sudah tidak berlaku atau harga lama:

• Harga normal: Rp 500.000 → Harga promo: Rp 299.000
• Fitur lama: Manual Export Excel → Fitur baru: Auto-sync Cloud
• Proses lama: 3 hari kerja → Sekarang: Instant

Subscript & Superscript

Berguna untuk rumus kimia, matematika, dan catatan kaki:

• Rumus kimia: H₂O (air), CO₂ (karbon dioksida), C₆H₁₂O₆ (glukosa)
• Notasi matematika: m² (meter persegi), cm³ (centimeter kubik), 10⁶ (juta)
• Catatan kaki: Referensi penelitian¹, Lihat catatan^[2]

Text Color & Background Highlight

Warnai teks untuk penekanan visual:

• 🔴 Penting: Jangan lupa backup data secara rutin
• 🟢 Sukses: Transaksi berhasil disimpan
• 🔵 Info: Fitur baru tersedia di update ini
• ⭐ Highlight: Gunakan highlight untuk menandai keyword penting

4. List & Enumerasi

Unordered List (Bullet Points)

• Pencatatan transaksi harian
• Rekonsiliasi bank bulanan
• Penyusunan laporan keuangan
  • Neraca
  • Laba Rugi
  • Arus Kas
• Analisis rasio keuangan

Ordered List (Numbered)

1. Buka rekening bank bisnis
2. Pilih software akuntansi (GLplus recommended)
3. Setup chart of accounts
4. Mulai mencatat transaksi
5. Buat laporan keuangan pertama

5. Gambar & Media

Gambar Single (Center)

Gambar Berdampingan (Side-by-Side dengan Table)

Gallery Layout dengan Merge Cell (Large-Left)

Layout 1 besar di kiri, 2 kecil di kanan menggunakan rowspan="2":

Gallery Layout dengan Merge Cell (Large-Right)

Layout 2 kecil di kiri, 1 besar di kanan menggunakan rowspan="2":

Gallery dengan Colspan (Full-Width)

Layout 2 gambar di atas, 1 gambar full-width di bawah menggunakan colspan="2":

Gallery Masonry Style

Layout masonry dengan 1 gambar besar di kiri dan 2 gambar stacked di kanan:

6. Table (Dengan dan Tanpa Border)

Table Data dengan Border

Table Layout (Tanpa Border - untuk gambar berdampingan)

Table di atas dengan gambar berdampingan menggunakan layout table tanpa border. Anda bisa toggle border dengan tombol "Borders" di toolbar.

7. Link & Anchor

Link dapat ditambahkan ke teks:

• Website GLplus - kunjungi untuk info lebih lanjut
• Email Support - untuk bantuan teknis
• Link Internal - anchor ke bagian dokumen

8. Code Blocks

Inline Code

Gunakan journal_entry() function untuk membuat jurnal otomatis. Variable $total_debit harus sama dengan $total_kredit.

Code Block (Preformatted)

// Contoh kode PHP untuk API GLplus
$response = Http::withToken($api_key)
    ->post('https://api.glplus.id/v1/journal-entries', [
        'date' => '2026-01-15',
        'description' => 'Penjualan via Tokopedia',
        'entries' => [
            ['account_code' => '1101', 'debit' => 1000000, 'credit' => 0],
            ['account_code' => '4101', 'debit' => 0, 'credit' => 1000000],
        ]
    ]);

if ($response->successful()) {
    Log::info('Journal created: ' . $response['id']);
}

9. Horizontal Rule

Untuk memisahkan section dengan jelas, gunakan horizontal rule (seperti garis di atas dan bawah section ini).

10. Kombinasi Fitur

Semua fitur bisa dikombinasikan untuk membuat konten yang rich dan informatif:

"Dengan GLplus, Anda bisa menghemat waktu hingga 80% dalam pencatatan keuangan."

11. Visualisasi Toolbar TinyMCE

Berikut adalah tata letak lengkap toolbar TinyMCE Editor yang kami gunakan:

Toolbar Baris 1 - Formatting & Undo/Redo

Toolbar Baris 2 - Alignment & List

Toolbar Baris 3 - Insert & Media

Layout Visual Toolbar

┌─────────────────────────────────────────────────────────────────────────────┐
│  [↶] [↷]  |  [Paragraph ▼]  |  [B] [I] [U]  |  [🎨]  |  [👁️] [🔍] [?]    │
├─────────────────────────────────────────────────────────────────────────────┤
│  [⬅] [↔] [➡] [☰]  |  [•] [1.]  |  [←|] [|→]  |  [🔗] [🖼️] [▶️] [⊞]    │
├─────────────────────────────────────────────────────────────────────────────┤
│  [Source Code]  |  [Fullscreen]  |  [⊞🔲 Borders Toggle (Custom)]            │
└─────────────────────────────────────────────────────────────────────────────┘

Keterangan:
• [↶] = Undo    • [↷] = Redo    • [B] = Bold    • [I] = Italic
• [⬅➡↔☰] = Align    • [• 1.] = Lists    • [🔗] = Link    • [🖼️] = Image
• [▶️] = Media    • [⊞] = Table    • [⊞🔲] = Toggle Table Borders (Custom)
• [👁️] = Preview    • [🔍] = Search    • [?] = Help

Plugin yang Aktif

• advlist - Advanced list styling
• anchor - Insert anchors/bookmarks
• autolink - Auto-convert URLs to links
• charmap - Special characters
• code - Source code editing
• codesample - Code blocks with syntax highlighting
• fullscreen - Fullscreen editing mode
• help - Keyboard shortcuts help
• image - Image upload and editing
• link - Link management
• lists - Enhanced list features
• media - Video/audio embed
• preview - Preview content
• searchreplace - Find and replace
• table - Table creation and editing
• visualblocks - Show block elements boundaries
• wordcount - Word and character count

Catatan: Toolbar di atas adalah konfigurasi default TinyMCE di GLplus. Beberapa tool merupakan custom implementation (seperti Toggle Table Borders).

12. Video Embed (YouTube)

Anda dapat menyematkan video YouTube langsung dalam artikel:

Video Tutorial GLplus - Overview

Video Tips: Cara Cepat Rekonsiliasi Bank

💡 Tips: Gunakan video untuk menjelaskan konsep kompleks. Video tutorial meningkatkan engagement hingga 80% dibandingkan teks saja.

13. Video Gallery (Multi-Video Layout)

Tampilkan beberapa video dalam satu baris menggunakan table layout:

14. Audio Embed

Podcast dan audio juga bisa disematkan:

Podcast: Akuntansi untuk Pemula

Episode 1: Memahami Dasar-Dasar Akuntansi • Durasi: 15:30

15. Step-by-Step Tutorial dengan Visual

Cara Membuat Invoice Pertama Anda

1. Login ke Dashboard Masuk ke akun GLplus Anda dan klik menu "Invoice" di sidebar kiri.

2. Klik "Buat Invoice Baru" Pilih template invoice yang sesuai dengan bisnis Anda.

3. Isi Detail & Kirim Isi data pelanggan, item, dan kirim via email atau WhatsApp.

16. Kesimpulan Lengkap

TinyMCE editor di GLplus mendukung seluruh spectrum konten rich media: dari teks formatting dasar hingga video embed, audio player, image galleries, interactive cards, dan visual infographics.

Dengan fitur-fitur ini, Anda bisa membuat:

• Tutorial video yang engaging dengan YouTube embed
• Galeri produk dengan layout masonry yang cantik
• Testimonial dengan foto customer untuk social proof
• Pricing comparison yang jelas dan konversi-optimized
• Step-by-step guides dengan visual support
• Feature highlights dengan icon cards yang eye-catching

"Konten yang rich dan multimedia meningkatkan engagement hingga 3x lipat dibandingkan konten plain text."

Untuk bantuan lebih lanjut, kunjungi Help Center, tonton video tutorial kami, atau hubungi support via email / WhatsApp.

🎨 Demo artikel lengkap dengan video, gallery, cards, dan semua fitur TinyMCE Editor • GLplus Blog