Cara Membuat Text Editor dengan Bootstrap dan jQuery

Posted on

linecontrol text editor

 

Halo sahabat programmer, jumpa lagi dengan lambecode. Pembahasan kali ini tentang cara membuat text editor dengan menggunakan bootstrap dan jQuery di PHP.  Text editor merupakan software atau perangkat lunak yang digunakan untuk menulis, mengubah, dan menghapus text yang ada di dalamnya. Sebagai contoh gampangnya, Microsoft Word adalah editor yang paling dikenal banyak orang. Baik orang IT maupun orang biasa. Text editor memberi kemudahan untuk melakukan editor terhadap text atau tulisan. Misalkan untuk memberikan efek bold, italic, underline, list, dll.

Pada tutorial ini, kami share cara mebuat text editor dengan menggunakan plugin LineControl. Banyak pembuat back-end(sisi admin) aplikasi maupun website menggunakan text editor. Bahkan setiap back-end harus ada text editr karena sangat dibutuhkan ketika menulis informasi, konten, berita, dan tulisan lainnya yang dibutuhkan oleh sistem.

Setelah mengerti pentingnya text editor di dalam sebuah sistem, mari kita lanjutkan tutorial ini menuju hal yang lebih teknis.

LineControl Text Editor

LineCOntrol Text Editor merupakan plugin text editor responsif yang dibangun untuk memudahkan dalam melakukan editor. Bekerja dengan Bootstrap dan jQuery, sehingga sudah dipastikan plugin ini bersifat responsif. Selain itu, cara instalasi ke dalam project sangatlah mudah. Hanya dengan menyertakan css dan js dari LineControl, plugin ini sudah siap digunakan. Namun sebelum itu pastikan bootstrap dan jQuery telah terinstall terlebih dahulu.

LineControl Text Editor mengandung unsur WYSIWYG(What You See Is What You Get), sehingga memungkinkan penggunanya dapat melakukan perubahan terhadap tulisannya. Layaknya Microsoft Word. Plugin ini dibuat oleh “Suyati Technologies Pvt Ltd” dari India dan dibagikan melalui GitHub.

Fitur:

  • Responsif dan mudah diimplementasikan
  • Style menggunakan Bootstrap3 dan FontAwesome 4
  • Dapat menghitung jumlah kata dalam text editor

Cara Membuat Form Text Editor dengan LineControl

  • Download LineControl
  • Includecss dan js LineControl ke dalam index project

  • Buat textarea atau container lain juga bisa untuk memasukkan elemen dari text editor

  • Panggil plugin pada elemen yang telah dibuat

  • Text editor sudah bisa digunakan

Jika ingin melakukan modifikasi terhadap editor tersebut, anda dapat melakukannya dengan membuka setting yang ada pada js LineEditor. Seperti ini default konfigurasinya.

Leave a Reply

Your email address will not be published. Required fields are marked *