Nah, WYSIWYG atau Apa yang Anda lihat adalah apa yang Anda dapatkan adalah editor yang memungkinkan Anda melihat pratinjau hasil akhir sebelum antarmuka atau dokumen ditayangkan. Dengan kata sederhana, editor WYSIWYG langsung menampilkan konten langsung di web dengan cara yang sama seperti di pratinjau. Jadi, pengeditan apa pun yang Anda buat pada konten web Anda akan terlihat sama saat menghasilkan keluaran tamat.
Bukankah itu luar biasa?
Ya, dan inilah alasan popularitasnya yang meningkat. Ada banyak editor WYSIWYG yang tersedia di pasaran yang dapat berguna dalam membuat halaman web dinamis, blog, dan sebagainya.
Selain itu, banyak editor WYSIWYG tingkat lanjut memungkinkan Anda mengunggah gambar, mem-flash file film ke server web, dan sebagainya.
Anda mungkin bertanya-tanya: Mengapa saya harus menggunakan Editor WYSIWYG?
Editor WYSIWYG adalah salah satu alat yang paling baik untuk pemula. Mereka membantu membuat halaman web dengan cepat dan menempatkannya di internet tanpa pengetahuan coding. Tidak masalah jika Anda tidak tahu kode HTML sama sekali; Anda masih dapat membuat situs web yang menarik secara visual tanpa kesulitan.
Untuk memahami ini, mari kita lihat beberapa manfaat yang ditawarkannya dibandingkan editor teks standar.
Manfaat Editor WYSIWYG
- Navigasi kode yang lebih baik
Jika Anda telah menggunakan editor berbasis teks pengkodean tradisional, Anda harus menyadari pencarian melalui baris kode untuk menemukan hal yang diinginkan. Meski bukan masalah besar, terkadang mengganggu saat mengedit template.
Editor WYSIWYG tidak memiliki masalah seperti itu. Anda dapat menggunakan fitur navigasi editor untuk menemukan elemen tertentu dengan cepat di halaman Anda. Anda juga dapat membuat perubahan yang sesuai. Beberapa editor WYSIWYG tingkat lanjut seperti Froala hadir dengan fitur pratinjau instan yang memungkinkan Anda melihat bagaimana perubahan akan memengaruhi hasil akhir.
- Salin/Tempel dari MS Word/OpenOffice Writer
Editor WYSIWYG memungkinkan Anda untuk menyalin dan menempelkan teks dari MS Word/OpenOffice Writer ke situs web Anda. Beberapa editor tingkat lanjut seperti Froala memungkinkan Anda untuk menyalin/menempel dari Microsoft Word dan Excel.
Fitur ini akan menghemat banyak waktu, terutama ketika Anda harus menyalin potongan teks dan gambar yang panjang. Hal yang membedakan adalah apakah teks yang ditempel cocok dengan format situs atau tidak, karena situs WordPress tidak menggunakan spasi kosong untuk paragraf.
- Pemformatan otomatis
Apa yang membuat editor HTML WYSIWYG lebih baik daripada editor berbasis teks pengkodean tradisional adalah kemampuan mereka untuk secara otomatis memformat kode, memastikan bahwa semua tag ada di tempatnya. Ini akan mencegah Anda mengacaukan sesi pengeditan yang membosankan untuk membersihkan kesalahan.
- Tidak ada kendala bahasa
Editor HTML WYSIWYG memungkinkan Anda untuk mengerjakan konten Anda dalam bahasa apa pun yang Anda butuhkan. Artinya, jika situs web Anda berbasis di Rusia dan diterjemahkan ke dalam bahasa Rusia, Anda dapat menulis langsung ke sistem manajemen konten Anda. Anda tidak perlu khawatir tentang konten yang ditampilkan di Rusia.
Catatan: Beberapa editor HTML WYSIWYG tingkat lanjut seperti Froala hanya berfungsi dalam bahasa apa pun (termasuk bahasa Asia Timur). Inilah sebabnya mengapa ini digunakan di seluruh dunia dalam lebih dari 100 negara.
- Judul kreatif dengan mudah
Dengan editor HTML WYSIWYG, Anda tidak perlu khawatir menulis kode pemformatan. Anda dapat dengan cepat menulis judul yang menarik dengan mengklik tombol. Selain itu, Anda akan mendapatkan kemungkinan tak terbatas untuk bereksperimen dengan heading. Ini akan menghemat waktu dan biaya Anda .
- Bantuan markup
Editor HTML WYSIWYG memungkinkan Anda membuat konten tanpa pengetahuan coding yang luas. Ini memberi Anda representasi visual dari konten. Ini memungkinkan Anda untuk membuat perubahan pada halaman berdasarkan estetika dan tata letak daripada terlibat dalam kendala teknis. Ini akan memberi Anda lebih banyak waktu untuk mengerjakan desain daripada terlibat dalam pengkodean.
- Hyperlink yang mulus
Tidak ada yang menandingi editor HTML WYSIWYG dalam hal hyperlink antar halaman. Editor berbasis teks pengkodean tradisional menuntut ketepatan dengan penempatan tautan. Jika tautan tidak ditempatkan cukup dekat dengan target yang diinginkan, kemungkinan kecil pembaca Anda akan memperhatikannya. Akibatnya, tidak ada tindakan yang diinginkan yang akan dilakukan dari pengguna akhir. Tetapi dengan editor HTML WYSIWYG, menyorot teks yang diikuti dengan klik akan berhasil.
- Perubahan yang cepat
Pada hari-hari sebelumnya, tidak ada editor tingkat lanjut, jadi Anda harus membuat beberapa perubahan dalam kode, dan kemudian Anda harus mempublikasikannya di server untuk melihat hasil akhirnya. Tetapi dengan editor WYSIWYG, Anda tidak perlu melalui kerumitan ini. Yang perlu Anda lakukan adalah membuat perubahan dalam sistem manajemen konten, dan Anda dapat langsung melihat perubahan setelah Anda menyimpannya.
- Performa tinggi
Editor WYSIWYG dirancang khusus untuk mengingat kinerja. Beberapa editor seperti Froala bahkan dapat bertahan dari pengujian yang paling ketat dan menawarkan kinerja yang mulus bahkan selama tugas-tugas berat. Itu cukup mampu untuk menginisialisasi dalam kurang dari 40ms . Bersinar cepat, bukan?
- Aksesibilitas
Dalam hal aksesibilitas, banyak editor teks standar gagal mengatasi kebutuhan yang berkembang. Ringan editor seperti Froala menawarkan pengeditan teks kaya dalam berbagai kondisi. Ini sesuai dengan Bagian 508, WCAG 2.0, dan WAI-ARIA untuk menawarkan akses tak terkalahkan dalam berbagai skenario.
Setelah melalui manfaat tersebut, Anda pasti cukup penasaran untuk mencobanya bukan?
Nah, siapa yang menghentikan Anda? Tambahkan saja ke situs Anda dan lihat sendiri hasilnya.
Bagaimana Menambahkan Editor WYSIWYG ke Situs Anda?
Nah, ketika datang untuk menambahkan editor WYSIWYG ke situs Anda, ada banyak opsi untuk hal yang sama. Panduan ini tentang menambahkan Editor Froala WYSIWYG ke situs Anda.
Anda mungkin bertanya-tanya mengapa Froala?
Sebagai editor ramah pengembang, ia menawarkan Anda kemampuan untuk memperluas kemampuannya lebih jauh. Froala hadir dengan lebih dari 30 plugin keluar dari kotak. Hal yang baik tentang Froala adalah pengoptimalan yang memungkinkan Anda menggunakannya di berbagai platform seperti desktop, laptop, tablet, dan sebagainya. Selain itu, tidak masalah apakah Anda menggunakan platform Android atau iOS; Froala kompatibel dengan keduanya.
Tapi, hal yang membuatnya unik adalah integrasi yang mudah. Anda dapat mengintegrasikannya dengan WordPress, reaksi, atau teknologi frontend apa pun tanpa kesulitan.
Mari tambahkan ke situs Anda dengan mengikuti beberapa langkah mudah.
Langkah 1: Instal
Ketika datang untuk menginstal editor Froala, ada banyak jalan untuk melakukannya. Di sini NPM digunakan. Ini adalah salah satu opsi terbaik dan termudah untuk digunakan.
Untuk NPM, ketikkan perintah yang diberikan di bawah ini.
| npm instal froala-editor |
Setelah proses instalasi selesai, sematkan kode yang diberikan di bawah ini ke dalam file HTML Anda.
Catatan: Anda juga dapat menggunakan CDN sebagai alternatif.
Langkah 2: Buat
Anda dapat memulai editor Froala pada elemen DOM apa pun, tetapi disarankan untuk menggunakan a DIV elemen.
Tambahkan yang kosong
elemen yang akan diubah menjadi editor teks kaya.
Langkah 3: Inisialisasi
Inisialisasi editor Froala pada elemen kosong yang dibuat sebelumnya.
| var editor = new FroalaEditor(‘#contoh’) |
Langkah 4: Tampilkan Konten
Sertakan file CSS yang diberikan di bawah ini untuk mempertahankan tampilan HTML yang diedit di luar editor teks kaya.
< tautan href=”../css/froala_style.min.css” rel=”stylesheet” type=”text/css” /> |
Jangan lupa untuk meletakkan konten yang diedit di dalam elemen dengan fr-tampilan.
|
Inilah HTML yang diedit dengan editor teks kaya Froala.
|
Berikut adalah contoh formulir lengkap yang menunjukkan integrasi editor HTML Froala WYSIWYG dengan sebuah situs.
dan html
| < > < tautan kepala > < tautan href=”https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css” rel=”stylesheet” type=”text/css” /> < naskah naskah type=”text/javascript” src=”https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js”> naskah naskah > tautan kepala > |
Begini tampilan akhirnya. Anda sekarang dapat menggunakannya untuk mengedit atau membuat jenis konten kaya yang Anda inginkan. Cukup ketik atau sisipkan teks dan lakukan operasi untuk melihat sendiri hasilnya. Anda juga dapat mengambil bantuan dari dokumentasi . Ini akan memberi Anda pendekatan yang mudah untuk menggunakan Froala secara maksimal.
Baik teks atau grafik, Froala memungkinkan Anda mengedit konten lebih tepat dibandingkan dengan editor teks standar. Ini memungkinkan Anda untuk bereksperimen dengan tata letak, warna, dan pemformatan konten tanpa memerlukan keterampilan pengkodean. Inilah sebabnya mengapa orang-orang dari seluruh dunia memilih editor ini. Lalu mengapa tidak menjadi salah satu di antara mereka dan menggunakan kesempatan yang menguntungkan Anda.
Takeaway Terakhir
Ada banyak editor WYSIWYG yang tersedia di pasar untuk dipilih, tetapi yang paling penting adalah kemudahan penerapan dan penggunaannya. Froala adalah salah satu editor HTML WYSIWYG generasi berikutnya yang telah mendapatkan banyak popularitas karena menawarkan keduanya di satu tempat. Panduan ini telah menunjukkan kepada Anda integrasi editor HTML Froala WYSIWYG dengan situs. Yang perlu Anda lakukan adalah menerapkan langkah-langkah yang diberikan dalam urutan yang sama untuk menikmati manfaat editor WYSIWYG tingkat lanjut.
