Fix: ijinkan upload video pada tinymce

[pandigresik]

PR Description: Enable Media Embedding in TinyMCE Editor

Deskripsi Singkat

Perbaikan ini memungkinkan pengguna untuk menyisipkan dan menampilkan video (termasuk YouTube, Vimeo, dan file video lokal) di dalam editor TinyMCE tanpacontent yang disanitasi oleh HTMLPurifier. Sebelum perbaikan ini, tag <iframe> dan <video> akan dihapus atau diblokir saat disimpan ke database.

Perubahan yang Dilakukan

1. app/Policies/CustomCSPPolicy.php

Menambahkan Content Security Policy directive untuk FRAME agar browser mengizinkan embedding dari YouTube:

->addDirective(Directive::FRAME, [
    'self',
    'https://www.youtube.com',
    'http://www.youtube.com'
]);

2. config/file-manager.php

• maxUploadFileSize: ditingkatkan dari 1024 KB ke 5120 KB (5 MB)
• allowFileTypes: ditambahkan format video ['mp4', 'mkv', 'mov'] untuk upload video langsung ke file manager

3. config/purifier.php (FILE BARU)

Konfigurasi HTMLPurifier untuk mengizinkan:

• Tag <iframe> dengan atribut: src, width, height, frameborder, allowfullscreen
• Tag <video> dan <source> dengan atribut lengkap
• Domain yang diizinkan: YouTube (embed, watch, youtu.be), Vimeo, Facebook, Instagram, Twitter
• CSS properties yang diizinkan untuk styling

4. package.json & package-lock.json

Upgrade TinyMCE dari versi ^6.7.0 ke ^8.5.0

5. resources/views/partials/asset_tinymce.blade.php

• Menambahkan license_key: 'gpl' (required untuk TinyMCE v8)
• Mengubah skin: 'tinymce-5' menjadi skin: false (TinyMCE v8 tidak memerlukan skin bawaan)

6. vite.config.js

Menambahkan path alias @tinymce untuk resolve modul TinyMCE

7. public/build/assets/ & public/vendor/tinymce/

Build assets dan vendor files untuk TinyMCE v8

Alasan Perubahan

1. Masalah: Pengguna tidak dapat menyisipkan video dari YouTube atau upload video lokal karena:

   • HTMLPurifier menghapus tag <iframe> dan <video>
   • CSP memblokir embedding dari domain eksternal
   • File manager tidak mendukung format video

2. Solusi:

   • Konfigurasi ulang HTMLPurifier untuk mengizinkan tag media
   • Tambah CSP exception untuk YouTube
   • Perbarui TinyMCE ke v8 yang memiliki perbaikan dan fitur baru
   • Tambah dukungan upload format video

Dampak Perubahan

• Positif:

  • Pengguna dapat menyisipkan video YouTube/Vimeo via embed code
  • Pengguna dapat upload video langsung ke file manager
  • Editor TinyMCE menjadi lebih kompatibel dengan TinyMCE v8

• Hal yang perlu diperhatikan:

  • Apakah ada conflict dengan plugin/theme custom TinyMCE?
  • Apakah perlu rebuild assets di production?

Steps to Reproduce

1. Buka halaman tambah/edit artikel
2. Klik tombol "Sisipkan Video" atau paste embed code YouTube
3. Simpan dan publikasikan
4. Buka artikel - video tidak muncul karena dihapus oleh purifier

Testing Checklist

• Cek upload file video (mp4, mkv, mov) ke file manager - berhasil
• Cek insert YouTube embed code di TinyMCE - video muncul di frontend
• Cek insert Vimeo embed code di TinyMCE - video muncul di frontend
• Cek insert tag video HTML5 (
• Cek sanitasi HTML masih berfungsi - XSS attack dicegah
• Cek CSP tidak memblokir konten legitimate
• Cek TinyMCE editor berfungsi normal (text formatting, image insert, dll)

Related Issue

• Issue: Perbaiki fungsi insert media dan gambar pada tinymce artikel #1026

Screenshot / Video

simplescreenrecorder-2026-05-06_09.11.46.mp4

[github-actions]

🔄 AI PR Review sedang antri di server...

Proses review akan segera dimulai di background — hasil akan muncul sebagai komentar setelah selesai.
Powered by CrewAI · PR #1029