Solusi Ampuh Mengatasi Tombol Source Code (HTML) TinyMCE atau plugin Custom Blok Management yang Macet di OJS 3.5

Halo rekan-rekan pengelola jurnal!

Bagi Anda yang sedang melakukan upgrade atau instalasi baru Open Journal Systems (OJS) versi 3.5 (atau versi dev 3.4 ke atas), mungkin pernah mengalami masalah yang cukup membuat frustrasi saat menata tampilan sidebar.

Masalahnya spesifik: Saat kita ingin membuat Custom Block (misalnya untuk menyisipkan widget statistik, banner indeksasi, atau peta), kita perlu menekan tombol Source Code (< >) pada editor teks.

Normalnya, jendela popup akan muncul dan kita bisa menempelkan kode HTML di sana. Namun di OJS 3.5, yang terjadi adalah:

1. Jendela popup muncul tapi “mati” (tidak bisa diketik).

2. Kursor seolah terkunci di panel belakang.

3. Tampilan jendela kadang tertutup bayangan (masalah layer).

Setelah seharian ngoprek dan bedah kode, ternyata ini adalah masalah konflik UI antara sistem panel OJS (Vue.js) dengan plugin editor (TinyMCE). Istilah teknisnya adalah “Focus Trap” dan “Z-Index Conflict”.

Daripada menggunakan trik sementara (seperti inspect element), kali ini saya bagikan solusi permanen dengan memperbaiki langsung di jantung plugin-nya.

Langkah Perbaikan

Kita perlu menyisipkan sedikit script penawar agar OJS tidak “menarik paksa” kursor kita saat jendela kode terbuka.

1. Lokasi File

Masuk ke File Manager (cPanel/Hosting) Anda, lalu cari file berikut:

plugins/generic/tinymce/TinyMCEPlugin.php

2. Backup Dulu!

Sebelum diedit, biasakan download atau duplikat file tersebut sebagai cadangan.

3. Edit Coding

Buka file tersebut, lalu cari fungsi (method) bernama registerJS.

Gulir ke bawah sedikit di dalam fungsi tersebut sampai Anda menemukan baris kode yang memuat konfigurasi JavaScript.

Tugas kita adalah menyisipkan Patch Fix berikut ini tepat sebelum baris return false; di akhir fungsi registerJS.

Salin kode berikut dan tempelkan (paste) ke dalam file:

// ==========================================
        // OJS 3.5 MODAL FIX (Patch by [Nama Anda/Komunitas])
        // ==========================================
        
        // 1. Fix CSS Z-Index: Paksa Popup Source Code muncul PALING DEPAN
        $templateManager->addHeader(
            'tinymceZIndexFix',
            '<style>
                .tox-tinymce-aux, .tox-dialog-wrap, .tox-dialog {
                    z-index: 9999999 !important;
                }
            </style>'
        );

        // 2. Fix JS Focus Trap: Cegah panel OJS menarik kursor saat mengetik kode
        $templateManager->addJavaScript(
            'tinymceFocusFix',
            'document.addEventListener("focusin", function(e) {
                if (e.target.closest(".tox-tinymce-aux, .tox-dialog, .moxman-window")) {
                    e.stopImmediatePropagation();
                }
            });',
            [
                'inline' => true,
                'contexts' => 'backend',
            ]
        );
        // ==========================================

4. Bersihkan Cache (Wajib)

Setelah file disimpan, jangan lupa masuk ke Dashboard OJS sebagai Admin:

• Menu Administration -> Klik Clear Data Caches & Clear Template Caches.

Hasilnya?

Sekarang coba kembali ke Custom Block Manager. Klik tombol < > (Source Code). Voila! Jendela popup sekarang bisa diklik, diketik, dan kode HTML (seperti <iframe> atau <div>) bisa disimpan dengan sempurna tanpa drama.

Semoga tutorial singkat ini membantu rekan-rekan pejuang jurnal yang sedang pusing mempercantik tampilan OJS-nya.

Salam publikasi !