Terdapat dua jenis editor kod – Editor berasaskan teks ringkas dan WYSIWYG (apa yang anda lihat ialah apa yang anda dapat). Dalam artikel kami sebelum ini, kami membincangkan beberapa Editor HTML Sumber Terbuka terbaik di mana anda menaip kod secara manual. Walaupun tiada isu dengan penyunting HTML berasaskan teks, ia juga tidak begitu lama. Dan di situlah sumber terbuka editor HTML WYSIWYG masuk. Editor HTML WYSIWYG menyediakan pilihan berasaskan visual untuk membina tapak web tanpa pengetahuan pengaturcaraan (ingat Iklan Wix , itu wizzy-sig)
Editor HTML WYSIWYG mempunyai beberapa kelebihan berbanding editor berasaskan teks. Sebagai permulaan, anda boleh membina tapak web dengan editor WYSIWYG walaupun anda tidak tahu cara membuat kod. Apa yang anda perlu lakukan ialah seret dan lepas item dalam editor dan sebaik sahaja anda selesai, hanya salin kod. Walau bagaimanapun, mencari editor HTML WYSIWYG sumber terbuka yang baik boleh menjadi tugas yang sukar. Di sinilah kami masuk.
Baca Juga: 50+ Apl Android Sumber Terbuka Apabila Anda Ingin Menolak Google
Editor HTML WYSIWYG Terbaik Sumber Terbuka
1. Pell
Pell mungkin editor WYSIWYG terkecil dan paling mudah yang pernah anda temui. Ia benar-benar bersaiz 1.38 kb!
Ia menawarkan semua fungsi dan format asas seperti tajuk, tebal, condong, senarai, petikan, pautan dan imej. Tindakan lain yang tersedia termasuk lekukan, superskrip, subskrip dan nama dan saiz fon. Selepas anda selesai menulis dan memformat dengan Pell, ia akan mengeluarkan keseluruhan kod HTML yang kemudian anda boleh salin dan tampal pada tapak web atau halaman anda dan anda boleh pergi.
Kelebihan:
- WYSIWYG terkecil dan paling ringan
- Tiada tanggungan
- Mudah disesuaikan
Keburukan:
- Tiada penyuntingan HTML yang mewah
- Imej hanya melalui pautan
Keputusan:
Memandangkan saiznya, Pell membuat pakej yang menarik. Tetapi jujurlah, anda hanya boleh menyiapkan fail HTML asas dengan pilihan penyuntingan yang terhad. Jadi, jika anda seorang yang mencari editor WYSIWYG yang pantas dan ringan yang merupakan sumber terbuka untuk beberapa kerja yang sangat asas, pasti lihat Pell.
Dapatkan Pell
2. OpenWYSIWYG
OpenWYSIWYG ialah editor HTML teks kaya silang pelayar yang dikodkan sepenuhnya dalam JavaScript. Dengan hanya menyalin-menampal beberapa baris kod, anda boleh menukar mana-mana menjadi editor HTML WYSIWYG OpenWYSIWYG yang teguh.<p> <p>UI dan pilihan penyuntingan dengan menu lungsur adalah hampir serupa dengan mana-mana editor teks dan anda akan berasa seperti di rumah sendiri. Selain daripada semua pilihan pemformatan asas, OpenWYSIWYG mempunyai pemilih warna yang dipertingkatkan dengan 216 warna web untuk dipilih dan alat pemformatan jadual yang berkuasa dengan setiap pilihan yang boleh anda fikirkan.</p> <p>Satu lagi perkara hebat tentang OpenWYSIWYG ialah bahawa bersama-sama dengan semua pilihan visual, anda masih boleh <strong>melihat kod HTML mentah</strong> dan membuat pelarasan terus dalam kod tersebut. Berguna apabila anda ingin mempelajari atau menyegarkan semula kemahiran pengekodan anda.</p> <p><img loading="lazy" /p> <ul> <li>Tidak dikemas kini dalam beberapa tahun</li> </ul> <p><strong>Keputusan:</strong><br> Ditulis dalam JavaScript, OpenWYSIWYG HTML editor sumber terbuka harus berfungsi dengan mana-mana bahasa pengaturcaraan web lain. Jika anda sedang mencari sesuatu yang lebih berkuasa sedikit daripada Pell untuk digabungkan dalam aplikasi web anda, ini adalah pilihan yang bagus.</p> <p><strong><a href="http://www.openwebware.com/ demo" target="_blank" rel="noopener noreferrer">Dapatkan OpenWYSIWYG</a></strong></p> <h3>3. TinyMCE (Edisi Komuniti)</h3> <p>Editor HTML WYSIWYG sumber terbuka seterusnya dalam senarai kami ialah TinyMCE. Ia juga ditulis sepenuhnya dalam JavaScript dan menawarkan UI dan pengalaman seperti kebanyakan pemproses perkataan. Itu menjadikannya lebih mesra pengguna.</p> <p>TinyMCE<a href="https://www.tiny.cloud/pricing/" target="_blank" rel="noopener noreferrer"> bukan percuma</a>, tetapi Edisi Komuniti adalah percuma dan satu sumber terbuka. Ia disertakan dengan semua pilihan penyuntingan asas seperti memformat teks, senarai, jadual dan juga beberapa pilihan penyuntingan imej.</p> <p>Pembangun telah mengekalkan harga model premium mengikut bilangan pengguna. Beberapa ciri premium termasuk sokongan Google Drive dan Microsoft Azure, sambungan, penyemak ejaan dan pautan serta sokongan teknikal.</p> <p><img loading="lazy" class=" penci-lazy border aligncenter wp-image- 34916 saiz penuh" src="https://techwiser.com/wp-content/uploads/2018/07/TinyMCE.jpg" data-src="https://techwiser. UI mesra pengguna dan pelbagai ciri, adalah pakej lengkap. Jika anda hanya mahukan editor HTML WYSIWYG yang paling kaya dengan ciri sumber terbuka dan tidak mengapa dengan membelanjakan sedikit wang, TinyMCE ialah cara untuk pergi. Selain itu, mereka menawarkan percubaan percuma selama sebulan untuk model Pro mereka yang boleh anda lihat pada bila-bila masa.</p> <p><strong><a href="https://www.tiny.cloud/docs/demo/full -featured/" target="_blank" rel="noopener noreferrer">Dapatkan TinyMCE Demo</a></strong></p> <h3>4. Jodit</h3> <p>Jodit ialah satu lagi editor sumber terbuka WYSIWYG HTML yang pantas dan ringan yang boleh anda benamkan dalam kod anda dan mula mengedit halaman anda. Ia agak ringan pada saiz sekitar 100 KB dan telah ditulis sepenuhnya dalam TypeScript. Itulah sebabnya anda tidak memerlukan sebarang kebergantungan atau perpustakaan untuk menjalankannya.</p> <p>Ia disertakan dengan antara muka seret-n-lepaskan untuk imej itu juga. Anda juga boleh melampirkan video YouTube atau Vimeo melalui pautan atau membenamkannya. Perkara terbaik yang saya suka tentang Jodit ialah ia disertakan dengan <strong>editor ACE</strong> di luar kotak dan dengan satu butang, anda boleh bertukar antara kod sebenar dan mod pratonton.</p> <p ><img loading="lazy" class=" penci-lazy border aligncenter wp-image-34917 size-full" src="https://techwiser.com/wp-content/uploads/2018/07/Jodit.jpg" data-src="https://techwiser.com/wp-content/uploads/2018/07/Jodit.jpg" alt="Antara muka pengguna Jodit" lebar="677" height="394" data-srcset="https ://techwiser.com/wp-content/uploads/2018/07/Jodit.jpg 677w, https://techwiser.com/wp-content/uploads/2018/07/Jodit-300x175. jpg 300w" sizes="(max-width: 677px) 100vw, 677px"></p> <div class="e85e5af91879d860f8283fd1fb4949d1" data-index="2" style="float: none; jidar:0px 0 0px 0; text-align:center;"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-3072677420592088" data-ad-slot ="1324909417"></ins> </div> <p><strong>Kebaikan:</strong></p> <ul> <li>Ringan, tiada perpustakaan</li> <li>Seret-n- lepaskan</li> <li>Editor ACE keluar dari kotak</li> <li>Sokongan teknikal (Berbayar)</li> </ul> <p><strong>Keputusan:</strong><br> Jodit menawarkan yang terbaik dari kedua-dua dunia – editor WYSIWYG visual yang mudah serta mengedit kod mentah. Jika anda seorang yang mempunyai sekurang-kurangnya sedikit pengetahuan dalam HTML, Jodit mungkin pilihan terbaik untuk anda.</p> <p><a href="https://xdsoft.net/jodit/play.html" target= "_blank" rel="noopener noreferrer"><strong>Dapatkan Taman Permainan Jodit</strong></a></p> <h3>5. Summernote</h3> <p>Summernote ialah sumber terbuka editor WYSIWYG yang sangat mudah dibina pada jQuery dan berdasarkan Bootstrap. Memandangkan ia menyokong Bootstrap, anda boleh menggunakan semua gaya dan tema yang disokong pada editor anda daripada Bootswatch.</p> <p>Sumber terbuka editor HTML WYSIWYG itu sendiri mempunyai UI yang sangat bersih dan minimum malah anda boleh mengedit atau menambah pemformatan pilihan mengikut keperluan anda. Dengan mod Udara Summernote, anda boleh menyembunyikan keseluruhan bar alat dan mengedit dokumen anda dengan cepat. mudah. Ia juga boleh menukar semua imej secara automatik kepada base64, jadi anda tidak perlu melakukan pengendalian imej sama sekali.</p> <p>Bagi saya, bahagian terbaik tentang Summernote ialah pasukan pembangun yang bekerja keras di belakangnya yang sentiasa mendengarnya komuniti dan menambah ciri baharu. Contohnya termasuk sokongan untuk pemalam dan versi ringkas atau vanila Summernote yang tidak memerlukan Bootstrap.</p> <p><img loading="lazy" class=" penci-lazy border aligncenter wp-image-34918 size-full " src="https://techwiser.com/wp-content/uploads/2018/07/Summernote.jpg" data-src="https://techwiser.com/wp-content/uploads/2018/07/Summernote .jpg" alt="Summernote visual editor" width="677" height="441" data-srcset="https://techwiser.com/wp-content/uploads/2018/07/Summernote.jpg 677w, Summernote layak untuk diperiksa.</p> <p><strong><a href="https://summernote.org/" target="_blank" rel="noopener noreferrer">Dapatkan Demo Summernote</a> </strong></p> <h3>6. Froala</h3> <p>Froala ialah editor HTML WYSIWYG yang cantik sumber terbuka yang ditulis dalam JavaScript. Ia adalah salah satu alat yang lebih popular dalam senarai ini dan popularitinya dengan pembangun boleh dikaitkan dengan penyepaduan yang mudah dan reka bentuk yang bersih.</p> <p>Froala ialah editor yang sangat berkuasa itu sendiri dan pelbagai jenis pemalam hanya mempunyai meningkat sama. Sesetengah daripada mereka termasuk penyunting imej lanjutan, emotikon, penyemak ejaan, malah mudah untuk mencipta pemalam anda sendiri. Semua alatan juga boleh diakses dengan editor sebaris yang sangat mudah.</p> <p> Seperti TinyMCE, <a href="https://www.froala.com/wysiwyg-editor/pricing">Froala tersedia dalam banyak perisa</a>, tetapi versi percuma juga mempunyai banyak pilihan. Satu-satunya perbezaan ialah anda tidak akan mendapat kod sumber penuh dan sokongan teknikal.</p> <p><img loading="lazy" class=" penci-lazy border aligncenter wp-image-34919 size-full" src="https://techwiser.com/wp-content/uploads/2018/07/Froala.jpg" data-src="https://techwiser.com/wp-content/uploads/2018/07/Froala. jpg" alt="Sumber terbuka editor HTML Froala WYSIWYG" lebar="677" ketinggian="394" data-srcset="https://techwiser.com/wp-content/uploads/2018/07/Froala.jpg 677w, https://techwiser.com/wp-content/uploads/2018/07/Froala-300x175.jpg 300w" sizes="(max-width: ><strong>Dapatkan Froala</strong></a></p> <h3>7. CKEditor</h3> <p>CKEditor sangat popular dengan pengguna kerana menjadi sumber terbuka penyunting HTML WYSIWYG yang direka dengan cantik. Ia disertakan dengan lebih 21k ujian untuk membantu anda mempelajari HTML dalam reka letak yang mesra. Dokumentasi terperinci ada untuk membantu anda mengasah lagi kemahiran anda. Beberapa nama terbesar dalam industri teknologi mempercayainya.</p> <p>Perhatikan bahawa anda perlu mengekalkan notis hak cipta dalam setiap fail dan tidak memadamkan fail LICENSE.md yang terdapat dalam folder pemasangan CKEditor. Itu bukan kelemahan, terutamanya apabila anda mendapat begitu banyak nilai sebagai balasan.</p> <p>Terdapat sokongan untuk pemalam, @mention, emoji, penyemak imbas lama dan juga autolengkap yang boleh menjimatkan banyak masa.</ p> <p><img loading="malas" p><strong>Kebaikan:</strong></p> <ul> <li>Dokumentasi terperinci, ujian, soalan</li> <li>Bekerjasama dan @sebut</li> <li>Autolengkap</li> </ul> <p><strong>Keburukan:</strong></p> <ul> <li>Simpan fail lesen</li> </ul> <p><strong><a href="https: //ckeditor.com/" target="_blank" rel="noopener noreferrer">Dapatkan CKEditor</a></strong></p> <p><strong>Sebutan kehormat:</strong></p> <p>1. <a href="https://github.com/yabwe/medium-editor" target="_blank" rel="noopener noreferrer">MediumEditor</a> ialah klon sumber terbuka editor WYSIWYG sebaris untuk Medium.com . Ia adalah mudah mati, ringan dan datang tanpa sebarang pergantungan. Walaupun ia tidak begitu berkuasa, ia boleh berfungsi sebagai alat penyuntingan sebaris yang hebat untuk dokumen berkaitan teks atau teks.</p> <p>2. <a href="https://atom.io/packages/atom-html-preview" target="_blank" rel="noopener noreferrer">Pratonton HTML</a> Atom membolehkan anda menambah anak tetingkap pratonton di mana anda boleh mempunyai pratonton langsung kod HTML anda, yang boleh sangat membantu pembangun. Walaupun ini pastinya bukan untuk pemula, ia merupakan pakej yang bagus untuk ditambahkan pada aliran kerja sedia ada anda jika anda sudah melakukan pengaturcaraan dalam HTML.</p> <h3>Sumber Terbuka Editor HTML WYSIWYG Terbaik</h3> <p>Sementara HTML masih ada cara yang lebih berkuasa untuk membina tapak web dan perkara yang lebih rumit boleh dilakukan dengannya, Editor WYSIWYG telah mendapatkan tempat mereka sendiri. Belajar kod memerlukan banyak pelaburan masa dan tenaga dan mungkin tidak masuk akal untuk semua orang. Jika anda mempunyai pengalaman terdahulu dalam pengaturcaraan dan tiada masa untuk belajar, anda benar-benar boleh melarikan diri dengan menggunakan sumber terbuka editor HTML WYSIWYG.</p> <p><strong>Baca Juga:</strong> <a href="https ://techwiser.com/open-source-browser-for-android/">7 Penyemak Imbas Sumber Terbuka Terbaik untuk Android (2018)</a></p> <div class="e85e5af91879d860f8283fd1fb4949d1" data-index="3 " style="float: none; margin:0px 0 0px 0; text-align:center;"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="cecair" data-ad-client=" ca-pub-3072677420592088" data-ad-slot="2804037256"></ins> </div> <div style="font-size: 0px; ketinggian: 0px; ketinggian garis: 0px; margin: 0; padding: 0; jelas: kedua-duanya;"></div> <div class="penci-single-link-pages"> </div>