Mengatasi tinymce this domain is not registered Pada E-TOEFL
TinyMCE merupakan salah satu WYSIWYG (What You See Is What You Get) editor text yang banyak digunakan oleh developer aplikasi dalam membangun form html. Pada dasarnya TinyMCE adalah teks editor yang bersifat open source yang dapat kita gunakan secara gratis. Namun per tahun 2024 ini TinyMCE mengharuskan siapa saja yang menggunakan teks editornya untuk mendaftarkan websitenya ke platform Tiny Cloud. Untuk verifikasinya meggunakan API yang nantinya kita implementasikan ke dalam kode skrip kita.
Jika kita menggunakan tinymce tanpa registrasi ke platform mereka maka akan muncul peringatan seperti This domain is not registered with Tiny Cloud. Please see the quick start guide or create an account. Peringatan lain yang sering dijumpai yaitu This domain is not registered in the TinyMCE Customer Portal. Please alert the admin to add it to the approved. Peringatan tersebut berdampak pada tinymce menjadi tidak bisa dipakai untuk menginput teks.
Untuk itu kami akan menjelaskan bagaimana cara mengatasi editor tinymce yang error terutama pada aplikasi E-TOEFL Source Code TOEFL dan TOEIC Online Berbasis Web yang hampir keseluruhan form nya menggunakan editor tinymce. Secara garis besar langkahnya adalah kita hanya perlu mendaftar ke portal tinymce untuk mendapatkan API akses. Kemudian API tersebut di implementasikan ke kode aplikasi kita, setelah itu baru daftakan domain ke portal tinymce.
Langkah 1 : Buat Akun di TinyMCE Cloud dan dapatkan API
Buka website https://www.tiny.cloud dan buat akun, atau bisa juga login dengan menggunakan akun Google.
Selanjutnya anda akan diarahkan ke Dashboard tinymce. Untuk mendapatkan API Key, klik tombol Get Your API Key kemudian salin API key yang di dapat. Di menu ini juga kita diberikan cara cepat untuk integrasi TinyMCE di website dari berbagai platform seperti HTML/JS, React, Vue.js, Angular dan lain-lain.
Langkah 2 : Integrasi API Key TinyMCE di Website
Karena aplikasi E-TOEFL menggunakan framework Vue JS maka kita fokus pada bagian integrasi untuk vue js. Pada source code e-toefl ada beberapa file yang perlu kita ganti API key nya dengan punya anda sendiri. Berikut adalah beberapa file yang perlu diganti API Key nya beserta lokasi pada baris berapa. Gunakan text editor seperti Notepad++ atau Sublime Text agar kita tahu kode tersebut ada di baris berapa.2. resources\js\Pages\Admin\Lesson\Question\Edit.vue ---> baris 56, 138, 191, 240, 290, 340, 390, 455
3. resources\js\Pages\Admin\MasterData\Announcement\Create.vue ---> baris 41
4. resources\js\Pages\Admin\MasterData\Announcement\Edit.vue ---> baris 41
5. resources\js\Pages\Admin\MasterData\Faq\Create.vue ---> baris 41
6. resources\js\Pages\Admin\MasterData\Faq\Edit.vue ---> baris 41
Sebagai contoh berikut adalah pemasangan API key pada salah satu file vue di source code E-TOEFL.
Setelah semua file diatas sudah diganti API key nya, berikutnya kita lakukan compile terhadap resource vue js. Setiap perubahan yang terjadi pada file vue baik itu edit maupun tambah harus di compile terlebih dahulu dengan menjalankan perintah npm run build pada CMD. Arahkan CMD ke folder project
Langkah 3 : Mendaftarkan Domain di Website TinyMCE
Setelah melakukan integrasi tinymce pada website, berikutnya adalah mendaftarkan domain website kita ke portal tinymce. Klik menu Approved Domains, anda bisa menambahkan beberapa domain disini.
Jika sudah mungkin perlu beberapa menit untuk melihat perubahan. Silahkan cek lagi form yang ada inputan tinymce nya. Seharusnya pesan peringatan sudah hilang dan editor siap untuk digunakan.
