Cara Membuat Toolbar CKEditor Fixed Ketika Di Scroll

Di artikel ini saya akan menjelaskan cara merancang toolbar ckeditor fixed ketika di scroll. Mungkin sebahagian dari teman-teman telah pernah menggunakan CMS WordPress, dimana di Text Editor di CMS tersebut ketika halaman menej posting di scroll ke bawah, karenanya Toolbar dari Text Editor tersebut positionnya menjadi Fixed, sehingga mempermudah penggunanya bagi menjalankan penulisan artikel di halaman Text Editor tersebut. Perlu teman-teman ketahui sebelumnya CKEditor yaitu diantara teks editor yang digunakan di pada lingkungan situs yang masuk kedalam diantara komponen HTML pengganti textarea. CKEditor yaitu WYSIWYG editor atau yang biasanya 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.

Sesungguhnya CKEditor yaitu diantara plugin dari beberapa plugin Text Editor lainnya yang dapat teman-teman gunakan bagi pengganti Textarea, diantaranya selain CKEditor ada pun plugin Text Editor TinyMCE, Raptor Editor, Aloha Editor, Summernote, dll. Dari beberapa Text Editor tersebut tinggal teman-teman pilih salah satunya guna diaplikasikan di pada situs teman-teman. Namun kembali lg kepada topik penjelasan saya dimana saya akan menjelaskan cara merancang toolbar ckeditor fixed ketika di scroll. Dan bagi merancang toolbar tersebut menjadi fixed, teman-teman perlu merancang kode Javascript nya dengan event Scroll, namun bila teman-teman kesulitan dapat ikuti contoh yang saya berikan di tahapan di bawah ini.

Berikut Tahapannya

• Disini saya asumsikan sebelumnya, bahwa saja teman-teman telah menjalankan pemasangan CKEditor di situs teman-teman.




• Bila telah, buka file index.php yang terdapat 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=Di artikel ini saya akan menjelaskan  Cara Membangun Toolbar CKEditor Fixed Ketika Di Scroll title=Cara Membangun Toolbar CKEditor Fixed Ketika Di Scroll />

• Bila telah save file tersebut dan lihat perubahan yang terjadi dari penambahan kode Javascript tersebut.




• Bila berhasil karenanya Toolbar CKEditor tersebut akan Fixed posisinya ketika di Scroll ke bawah, seperti contoh gambar berikut

• Seperti yang terlihat di kotak yang diberi garis warna merah, Toolbar CKEditor tersebut position nya menjadi Fixed ketika di Scroll ke bawah dan di judul penjelasan ini telah saya praktekan dan saya pasang di CKEditor Laman saya.

Hingga disini penjelasan saya mengenai cara merancang toolbar ckeditor fixed ketika di scroll, semoga bermanfaat.

Sumber https://kursuswebsite.org