7 Sumber Terbuka Editor HTML WYSIWYG Terbaik

Ada dua jenis editor kode - Editor berbasis teks sederhana dan WYSIWYG (apa yang Anda lihat adalah apa yang Anda dapatkan). Di artikel kami sebelumnya, kami membahas beberapa yang terbaikEditor HTML Sumber Terbuka tempat Anda mengetik kode secara manual. Meskipun tidak ada masalah dengan editor HTML berbasis teks, mereka tetap jadul. Dan di situlah sumber terbuka editor HTML WYSIWYG hadir. Editor HTML WYSIWYG memberikan opsi berbasis visual untuk membangun situs web tanpa pengetahuan pemrograman apa pun (ingat Iklan Wix, yaitu wizzy-sig)

Editor HTML WYSIWYG memiliki beberapa keunggulan dibandingkan editor berbasis teks. Pertama-tama, Anda dapat membuat situs web dengan editor WYSIWYG meskipun tidak tahu cara membuat kode. Yang harus Anda lakukan adalah menyeret dan melepas item di editor dan setelah selesai, cukup salin kodenya. Namun, menemukan editor HTML WYSIWYG open source yang bagus bisa menjadi pekerjaan rumah. Di sinilah kami masuk.

Baca juga: 50+ Aplikasi Android Sumber Terbuka Saat Anda Ingin Meninggalkan Google

Sumber Terbuka Editor HTML WYSIWYG Terbaik

1. Pell

Pell mungkin adalah editor WYSIWYG terkecil dan paling sederhana yang pernah Anda temui. Secara harfiah ukurannya 1,38 kb!

Ini menawarkan semua fungsi dan format dasar seperti judul, tebal, miring, daftar, kutipan, tautan, dan gambar. Tindakan lain yang tersedia termasuk indentasi, superskrip, subskrip, serta nama dan ukuran font. Setelah Anda selesai menulis dan memformat dengan Pell, itu akan menghasilkan seluruh kode HTML yang kemudian dapat Anda salin dan tempelkan di situs web atau laman Anda dan Anda siap melakukannya.

Kelebihan:

• WYSIWYG terkecil dan teringan
• Tidak ada ketergantungan
• Dapat disesuaikan dengan mudah

Kekurangan:

• Tidak ada pengeditan HTML yang mewah
• Gambar hanya melalui tautan

Putusan:
Mempertimbangkan ukurannya, Pell membuat paket yang menarik. Tapi jujur ​​saja, Anda hanya bisa menyelesaikan file HTML biasa dengan opsi pengeditan terbatas. Jadi, jika Anda adalah seseorang yang mencari editor WYSIWYG yang cepat dan ringan yang merupakan sumber terbuka untuk beberapa pekerjaan yang sangat mendasar, lihat Pell.

Dapatkan Pell

2. OpenWYSIWYG

OpenWYSIWYG adalah editor HTML teks kaya lintas-browser yang sepenuhnya dikodekan dalam JavaScript. Dengan hanya menyalin-tempel beberapa baris kode, Anda dapat mengubahnya ke dalam editor HTML WYSIWYG OpenWYSIWYG yang tangguh.<p> <p>UI dan opsi pengeditan dengan menu drop-down sangat mirip dengan editor teks mana pun dan Anda akan merasa seperti di rumah sendiri. Terlepas dari semua opsi pemformatan dasar, OpenWYSIWYG menawarkan pemilih warna yang disempurnakan dengan 216 warna web untuk dipilih dan alat pemformatan tabel yang hebat dengan setiap opsi yang dapat Anda pikirkan.</p> <p>Hal hebat lainnya tentang OpenWYSIWYG adalah bersama dengan semua opsi visual, Anda masih bisa<strong>lihat kode HTML mentah</strong> dan melakukan penyesuaian langsung pada kode. Berguna saat Anda ingin belajar atau menyegarkan kembali keterampilan pengkodean Anda.</p> <p><img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-2a8d34d0ca966deffc6441af9dbbe702-101381.jpg" alt="7 Sumber Terbuka Editor HTML WYSIWYG Terbaik"></p> <p><strong>Kelebihan:</strong></p> <ul> <li>Lingkungan pengeditan yang kuat</li> <li>UI yang intuitif dan mudah</li> <li>Pemilih warna dan opsi pengeditan tabel yang luas</li> </ul> <p><strong>Kekurangan:</strong></p> <ul> <li>Tidak diperbarui dalam beberapa tahun</li> </ul> <p><strong>Putusan:</strong><br> Ditulis dalam JavaScript, open source editor HTML OpenWYSIWYG harus bekerja dengan bahasa pemrograman web lainnya. Jika Anda mencari sesuatu yang sedikit lebih kuat dari Pell untuk dimasukkan ke dalam aplikasi web Anda, ini adalah pilihan yang bagus.</p> <p><strong>Dapatkan OpenWYSIWYG</strong></p> <h3>3. TinyMCE (Edisi Komunitas)</h3> <p>Editor WYSIWYG HTML open source berikutnya di daftar kami adalah TinyMCE. Itu juga sepenuhnya ditulis dalam JavaScript dan menawarkan UI dan pengalaman seperti kebanyakan pengolah kata. Itu membuatnya lebih ramah pengguna.</p> <p>TinyMCE tidak gratis, tetapi Edisi Komunitas adalah yang gratis dan bersumber terbuka. Muncul dengan semua opsi pengeditan dasar seperti memformat teks, daftar, tabel, dan juga beberapa opsi pengeditan gambar.</p> <p>Pengembang mempertahankan harga model premium sesuai dengan jumlah pengguna. Beberapa fitur premium termasuk Google Drive dan dukungan Microsoft Azure, ekstensi, pemeriksa ejaan dan tautan, serta dukungan teknis.</p> <p><img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-35ef757e6374c689f5158bf25ea8b2c6-101381.jpg" alt="Jika Anda memiliki pengalaman sebelumnya dalam pemrograman dan tidak ada waktu untuk belajar, Anda benar-benar dapat melakukannya dengan menggunakan sumber terbuka editor HTML WYSIWYG. Namun, menemukan Editor HTML WYSIWYG yang bagus tidaklah mudah, terutama jika Anda membutuhkannya untuk menjadi sumber terbuka dan gratis."></p> <p><strong>Kelebihan:</strong></p> <ul> <li>Dukungan ekstensi</li> <li>Manajemen file</li> <li>Dukungan teknis</li> <li>Editor kode gaya IDE untuk HTML</li> </ul> <p><strong>Kekurangan:</strong></p> <ul> <li>Mahal</li> <li>Tidak sepenuhnya open source</li> </ul> <p><strong>Putusan:</strong><br> TinyMCE dengan opsi integrasi yang mudah, UI yang ramah pengguna dan banyak fitur, adalah paket yang lengkap. Jika Anda hanya ingin open source editor HTML WYSIWYG yang paling kaya fitur dan baik-baik saja dengan mengeluarkan uang, TinyMCE adalah cara yang tepat. Juga, mereka menawarkan uji coba gratis satu bulan untuk model Pro mereka yang selalu dapat Anda periksa.</p> <p><strong>Dapatkan Demo TinyMCE</strong></p> <h3>4. Jodit</h3> <p>Jodit adalah editor open source WYSIWYG HTML editor lain yang cepat dan ringan yang dapat Anda sematkan ke dalam kode dan mulai mengedit halaman Anda. Ini cukup ringan dengan ukuran sekitar 100 KB dan telah ditulis sepenuhnya dalam TypeScript. Itulah mengapa Anda tidak memerlukan dependensi atau pustaka apa pun untuk menjalankannya.</p> <p>Muncul dengan antarmuka drag-n-drop untuk gambar juga. Anda juga dapat melampirkan video YouTube atau Vimeo melalui tautan atau menyematkannya. Hal terbaik yang saya suka tentang Jodit adalah ia hadir dengan ekstensi <strong>Editor ACE</strong> di luar kotak dan dengan satu tombol, Anda dapat beralih antara kode aktual dan mode pratinjau.</p> <p><img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-d9f6924fe440a4261e0839c0c4b1c532-101381.jpg" alt="html, wysiwyg, pengeditan, opsi, openurce, editopenurce, pro, kode, teks, kontra, dukungan, editor, berbasis, putusan, bootstrap"></p> <p><strong>Kelebihan:</strong></p> <ul> <li>Ringan, tidak ada perpustakaan</li> <li>Seret-n-lepas</li> <li>Editor ACE di luar kotak</li> <li>Dukungan teknis (Berbayar)</li> </ul> <p><strong>Putusan:</strong><br> Jodit menawarkan yang terbaik dari kedua dunia - editor WYSIWYG visual yang mudah serta mengedit kode mentah. Jika Anda adalah seseorang yang memiliki setidaknya sedikit pengetahuan tentang HTML, Jodit mungkin pilihan terbaik untuk Anda.</p> <p><strong>Dapatkan Jodit Playground</strong></p> <h3>5. Catatan musim panas</h3> <p>Summernote adalah editor open source WYSIWYG super sederhana yang dibangun di atas jQuery dan berdasarkan Bootstrap. Karena ini mendukung Bootstrap, Anda dapat menggunakan semua gaya dan tema yang didukung pada editor Anda dari Bootswatch.</p> <p>Open source editor HTML WYSIWYG itu sendiri memiliki UI yang sangat bersih dan minimal dan Anda bahkan dapat mengedit atau menambahkan opsi pemformatan sesuai kebutuhan Anda. Dengan mode Udara Summernote, Anda dapat menyembunyikan seluruh bilah alat dan mengedit dokumen Anda dengan cepat. Mudah. Itu juga dapat secara otomatis mengkonversi semua gambar ke base64, jadi Anda tidak perlu melakukan penanganan gambar sama sekali.</p> <p>Bagi saya, bagian terbaik dari Summernote adalah tim pengembang pekerja keras di belakangnya yang selalu mendengarkan komunitas dan menambahkan fitur baru. Contohnya termasuk dukungan untuk plugin dan Summernote versi lite atau vanilla yang tidak memerlukan Bootstrap.</p> <p><img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-d48b6067378fbbbed4746fb15a5e64e8-101381.jpg" alt="7 Sumber Terbuka Editor HTML WYSIWYG Terbaik"></p> <p><strong>Kelebihan:</strong></p> <ul> <li>Kurva pembelajaran minimum</li> <li>Mode Udara untuk pengeditan dengan cepat</li> <li>Mendukung Bootstrap 3.x.x hingga 4.x.x</li> <li>Lihat dan edit dalam HTML</li> </ul> <p><strong>Kekurangan:</strong></p> <ul> <li>Membutuhkan Bootstrap</li> </ul> <p><strong>Putusan:</strong><br> Summernote mungkin adalah editor HTML WYSIWYG yang paling kaya fitur tetapi gratis dan open source yang tersedia di pasar dan terus meningkat. Jika Anda bekerja dengan Bootstrap, maka Summernote tidak perlu dipikirkan lagi, tetapi meskipun tidak, Summernote layak untuk diperiksa.</p> <p><strong>Dapatkan Demo Summernote</strong></p> <h3>6. Froala</h3> <p>Froala adalah sumber terbuka editor HTML WYSIWYG yang indah yang ditulis dalam JavaScript. Ini adalah salah satu alat yang lebih populer di daftar ini dan popularitasnya di kalangan pengembang dapat dikaitkan dengan integrasi yang mudah dan desain yang bersih.</p> <p>Froala sendiri adalah editor yang sangat kuat dan banyak sekali plugin yang meningkat dengan cara yang sama. Beberapa di antaranya termasuk editor gambar lanjutan, emotikon, pemeriksa ejaan, dan bahkan mudah untuk membuat plugin Anda sendiri. Semua alat juga dapat diakses dengan editor inline yang sangat nyaman.</p> <p>Seperti TinyMCE, Froala tersedia dalam banyak rasa, tetapi bahkan versi gratisnya memiliki banyak kelebihan. Satu-satunya perbedaan adalah Anda tidak akan mendapatkan kode sumber lengkap dan dukungan teknis.</p> <p><img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-5a89ec944a7b7318dad29d4cbe38303c-101381.jpg" alt="7 Sumber Terbuka Editor HTML WYSIWYG Terbaik"></p> <p><strong>Kelebihan:</strong></p> <ul> <li>Editor yang kuat dan ringan</li> <li>Pengeditan sebaris</li> <li>Sejumlah besar plugin</li> </ul> <p><strong>Kekurangan:</strong></p> <ul> <li>Tidak bagus untuk aplikasi / situs web hybrid seluler</li> </ul> <p><strong>Putusan:</strong><br> Froala cepat dan ringan dengan UI yang indah tetapi masih dapat menghadirkan semua fitur yang mungkin dicari dalam editor HTML WYSIWYG. Jika Anda baik-baik saja tanpa kode sumber dan dukungan, versi gratis akan membantu Anda, kalau tidak Anda tahu apa yang harus dilakukan.</p> <p><strong>Dapatkan Froala</strong></p> <h3>7. CKEditor</h3> <p>CKEditor sangat populer di kalangan pengguna karena merupakan sumber terbuka editor HTML WYSIWYG yang dirancang dengan indah. Muncul dengan lebih dari 21k tes untuk membantu Anda mempelajari HTML dalam tata letak yang ramah. Dokumentasi terperinci tersedia untuk membantu Anda lebih mengasah keterampilan Anda. Beberapa nama besar di industri teknologi mempercayainya.</p> <p>Perhatikan bahwa Anda harus menjaga pemberitahuan hak cipta di setiap file tetap utuh dan tidak menghapus file LICENSE.md yang terletak di folder instalasi CKEditor. Itu bukan kekurangannya, terutama jika Anda mendapatkan begitu banyak nilai sebagai imbalannya.</p> <p>Ada dukungan untuk plugin, @mention, emoji, browser lawas, dan bahkan pelengkapan otomatis yang dapat menghemat banyak waktu.</p> <p><img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-f7cf4bbbed846085854eb05d6236462e-101381.png" alt="Jika Anda memiliki pengalaman sebelumnya dalam pemrograman dan tidak ada waktu untuk belajar, Anda benar-benar dapat melakukannya dengan menggunakan sumber terbuka editor HTML WYSIWYG. Namun, menemukan Editor HTML WYSIWYG yang bagus tidaklah mudah, terutama jika Anda membutuhkannya untuk menjadi sumber terbuka dan gratis."></p> <p><strong>Kelebihan:</strong></p> <ul> <li>Dokumentasi rinci, tes, pertanyaan</li> <li>Kolaborasi dan @sebut</li> <li>Pelengkapan Otomatis</li> </ul> <p><strong>Kekurangan:</strong></p> <ul> <li>Simpan file lisensi</li> </ul> <p><strong>Dapatkan CKEditor</strong></p> <p><strong>Sebutan kehormatan:</strong></p> <p>1. MediumEditor adalah tiruan open source dari editor WYSIWYG sebaris untuk Medium.com. Ini sangat sederhana, ringan dan datang tanpa ketergantungan apa pun. Meskipun tidak sekuat itu, ini bisa berfungsi sebagai alat pengeditan sebaris yang hebat untuk teks atau dokumen terkait teks.</p> <p>2. Paket Pratinjau HTML Atom memungkinkan Anda menambahkan panel pratinjau tempat Anda dapat melihat pratinjau langsung kode HTML Anda, yang dapat sangat membantu pengembang. Meskipun ini jelas bukan untuk pemula, ini adalah paket yang bagus untuk ditambahkan ke alur kerja Anda yang ada jika Anda sudah melakukan pemrograman dalam HTML.</p> <h3>Sumber Terbuka Editor HTML WYSIWYG Terbaik</h3> <p>Meskipun HTML masih merupakan cara yang lebih kuat untuk membangun situs web dan banyak hal yang lebih rumit dimungkinkan dengannya, editor WYSIWYG telah mengamankan tempatnya sendiri. Belajar kode membutuhkan banyak investasi waktu dan energi dan mungkin tidak masuk akal untuk semua orang. Jika Anda memiliki pengalaman sebelumnya dalam pemrograman dan tidak ada waktu untuk belajar, Anda benar-benar dapat melakukannya dengan menggunakan sumber terbuka editor HTML WYSIWYG.</p> <p><strong>Baca juga:</strong> <a href="/7-best-open-source-browser-for-android-2018-100540" target="_blank">7 Browser Open Source Terbaik untuk Android (2018)</a></p>