Pada kesempatan ini saya akan menjelaskan cara membuat toolbar ckeditor fixed ketika di scroll. Mungkin sebagian dari teman-teman sudah pernah menggunakan CMS WordPress, dimana pada Text Editor di CMS tersebut ketika halaman edit posting di scroll ke bawah, maka Toolbar dari Text Editor tersebut positionnya menjadi Fixed, sehingga memudahkan penggunanya untuk melakukan penulisan artikel di halaman Text Editor tersebut. Perlu teman-teman ketahui sebelumnya CKEditor adalah salah satu teks editor yang digunakan di dalam lingkungan website yang masuk kedalam salah satu komponen HTML pengganti textarea. CKEditor adalah WYSIWYG editor atau yang biasa di singkat dengan (What You See Is What You Get) yang berarti teks yang diedit akan sama hasilnya dengan apa yang akan di tampilkan nantinya.
Sebenarnya CKEditor adalah salah satu plugin dari beberapa plugin Text Editor lainnya yang dapat teman-teman gunakan untuk pengganti Textarea, diantaranya selain CKEditor ada juga plugin Text Editor TinyMCE, Raptor Editor, Aloha Editor, Summernote, dll. Dari beberapa Text Editor tersebut tinggal teman-teman pilih salah satunya guna diterapkan di dalam website teman-teman. Namun kembali lg kepada topik penjelasan saya dimana saya akan menjelaskan cara membuat toolbar ckeditor fixed ketika di scroll. Dan untuk membuat toolbar tersebut menjadi fixed, teman-teman perlu membuat kode Javascript nya dengan event Scroll, namun jika teman-teman kesulitan bisa ikuti contoh yang saya berikan pada tahapan di bawah ini.
Berikut Tahapannya
- Disini saya asumsikan sebelumnya, bahwa saja teman-teman sudah melakukan pemasangan CKEditor di website teman-teman.
- Jika sudah, buka file index.php yang ada di halaman Administrator Panel teman-teman
- Sleanjutnya tambahkan kode seperti berikut, sebelum penutup tag html </body></html> :
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0Awindow.addEventListener('scroll'%2C%20function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20konten%20%20%20%20%20%20%20%20%20%20%20%20%20%3D%20document.getElementsByClassName('cke_contents').item(0)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20toolbar%20%20%20%20%20%20%20%20%20%20%20%20%20%3D%20document.getElementsByClassName('cke_top').item(0)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20editor%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3D%20document.getElementsByClassName('cke').item(0)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20inner%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3D%20document.getElementsByClassName('cke_inner').item(0)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20scrollvalue%20%20%20%20%20%20%20%20%20%3D%20document.documentElement.scrollTop%20%3E%20document.body.scrollTop%20%3F%20document.documentElement.scrollTop%20%3A%20document.body.scrollTop%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20toolbar.style.width%20%20%20%20%20%3D%20konten.offsetWidth%20%2B%20%22px%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20toolbar.style.top%20%20%20%20%20%20%20%3D%20%2215px%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20toolbar.style.left%20%20%20%20%20%20%3D%20%220px%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20toolbar.style.right%20%20%20%20%20%3D%20%220px%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20toolbar.style.margin%20%20%20%20%3D%20%220%20auto%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20toolbar.style.boxSizing%20%3D%20%22border-box%22%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20if(toolbar.offsetTop%20%3C%3D%20scrollvalue)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20toolbar.style.position%20%20%20%3D%20%22fixed%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20konten.style.paddingTop%20%3D%20toolbar.offsetHeight%20%2B%20%22px%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20if(editor.offsetTop%20%3E%20scrollvalue%20%26%26%20(editor.offsetTop%20%2B%20editor.offsetHeight)%20%3E%3D%20(scrollvalue%20%2B%20toolbar.offsetHeight))%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20toolbar.style.position%20%20%20%3D%20%22relative%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20konten.style.paddingTop%20%3D%20%220px%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20toolbar.style.top%20%20%20%20%20%20%20%3D%20%220px%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20toolbar.style.left%20%20%20%20%20%20%3D%20%220px%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20if((editor.offsetTop%20%2B%20editor.offsetHeight)%20%3C%20(scrollvalue%20%2B%20toolbar.offsetHeight))%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20toolbar.style.position%20%3D%20%22fixed%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20toolbar.style.top%20%20%20%20%20%20%3D%20%22calc(100%25%20-%20%22%20%2B%20toolbar.offsetHeight%20%2B%20%22px)%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20inner.style.position%20%20%20%3D%20%22relative%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%2C%20false)%3B%20%20%20%20%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
- Jika sudah save file tersebut dan lihat perubahan yang terjadi dari penambahan kode Javascript tersebut.
- Jika berhasil maka Toolbar CKEditor tersebut akan Fixed posisinya ketika di Scroll ke bawah, seperti contoh gambar berikut
- Seperti yang terlihat pada kotak yang diberi garis warna merah, Toolbar CKEditor tersebut position nya menjadi Fixed ketika di Scroll ke bawah dan pada judul penjelasan ini sudah saya praktekan dan saya pasang di CKEditor Website saya.
Sampai disini penjelasan saya mengenai cara membuat toolbar ckeditor fixed ketika di scroll, semoga bermanfaat.
The post Cara Membuat Toolbar CKEditor Fixed Ketika Di Scroll appeared first on Kursus Website Terbaik.