Pengkodean

Cara Menambahkan Editor WYSIWYG ke Situs Anda – Panduan Lengkap

Daftar Isi sembunyikan 1 Anda mungkin bertanya-tanya: Mengapa saya harus menggunakan Editor WYSIWYG? 2 Manfaat Editor WYSIWYG 3...

Ditulis oleh Daniel Roncaglia · 6 min baca >
cara menambahkan editor WYSIWYG ke situs Anda

Ya, 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 lakukan pada konten web Anda akan terlihat sama saat menghasilkan hasil akhir.

Bukankah itu luar biasa?

Memang benar, dan inilah alasan popularitasnya meningkat. Ada banyak sekali editor WYSIWYG yang tersedia di pasaran yang dapat berguna dalam membuat halaman web dinamis, blog, dan lain sebagainya.

Selain itu, banyak editor WYSIWYG tingkat lanjut yang memungkinkan Anda mengunggah gambar, file film flash ke server web, dan sebagainya.

Anda mungkin bertanya-tanya: Mengapa saya harus menggunakan Editor WYSIWYG?

Editor WYSIWYG adalah salah satu alat terbaik untuk pemula. Mereka membantu membuat halaman web dengan cepat dan menaruhnya di internet tanpa pengetahuan pengkodean apa pun. Tidak masalah jika Anda tidak tahu coding HTML sama sekali; Anda tetap dapat membuat situs web yang menarik secara visual tanpa kesulitan apa pun.

Untuk memahami hal 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 berhati-hati dalam menelusuri baris-baris kode untuk menemukan hal yang diinginkan. Meski bukan masalah besar, namun terkadang mengganggu saat mengedit template.

Editor WYSIWYG tidak mengalami masalah seperti itu. Anda dapat menggunakan fitur navigasi editor untuk menemukan elemen tertentu dengan cepat di halaman Anda. Anda juga dapat melakukan perubahan yang sesuai. Beberapa editor WYSIWYG tingkat lanjut menyukainya Frola 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 menyalin dan menempelkan teks dari MS Word/OpenOffice Writer ke situs web Anda. Beberapa editor tingkat lanjut seperti Froala memungkinkan Anda menyalin/menempel dari Microsoft Word dan Excel.

Fitur ini akan menghemat banyak waktu, terutama ketika Anda harus menyalin teks dan gambar dalam jumlah besar. Yang membedakan adalah apakah teks yang ditempel sesuai 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 kemampuannya untuk memformat kode secara otomatis, 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 mengerjakan konten dalam bahasa apa pun yang Anda perlukan. 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 dengan konten yang ditampilkan di Rusia.

Catatan: Beberapa editor HTML WYSIWYG tingkat lanjut seperti Froala dapat bekerja dalam bahasa apa pun (termasuk bahasa Asia Timur). Inilah sebabnya mengapa ini digunakan di seluruh dunia lebih dari 100 negara.

  • Judul kreatif dengan mudah 

Dengan editor HTML WYSIWYG, Anda tidak perlu khawatir tentang menulis kode pemformatan. Anda dapat dengan cepat menulis judul yang menarik hanya 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 pengkodean yang luas. Ini memberi Anda representasi visual dari konten. Hal ini memungkinkan Anda 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 coding.

  • Hyperlink yang mulus

Tidak ada tandingannya dengan editor HTML WYSIWYG dalam hal ini hyperlink antar halaman. Editor berbasis teks pengkodean tradisional menuntut ketepatan dalam penempatan tautan. Jika tautan tidak ditempatkan cukup dekat dengan target yang dituju, kecil kemungkinan pembaca Anda akan menyadarinya. Akibatnya, tidak ada tindakan yang diinginkan yang dilakukan oleh pengguna. Namun dengan editor HTML WYSIWYG, menyorot teks diikuti dengan satu klik sudah cukup.

  • Perubahan yang cepat

Di masa lalu, tidak ada editor tingkat lanjut, jadi Anda harus membuat beberapa perubahan pada kode, lalu Anda harus mempublikasikannya di server untuk melihat hasil akhirnya. Namun dengan editor WYSIWYG, Anda tidak perlu mengalami kerumitan ini. Yang perlu Anda lakukan hanyalah membuat perubahan pada sistem manajemen konten, dan Anda dapat langsung melihat perubahannya setelah Anda menyimpannya.

  • Kinerja tinggi

Editor WYSIWYG dirancang khusus untuk mempertimbangkan kinerja. Beberapa editor seperti Froala bahkan dapat bertahan dalam pengujian yang paling ketat dan menawarkan kinerja yang lancar bahkan selama tugas berat. Itu cukup mampu untuk menginisialisasi kurang dari 40ms. Sangat cepat, bukan?

  • Aksesibilitas

Dalam hal aksesibilitas, banyak editor teks standar gagal memenuhi kebutuhan yang terus meningkat. Ringan editor seperti Froala menawarkan pengeditan teks kaya dalam berbagai kondisi. Hal ini sesuai dengan Bagian 508, WCAG 2.0, dan WAI-ARIA untuk menawarkan akses yang tidak ada duanya dalam berbagai skenario.

Setelah melihat manfaat-manfaat tersebut, Anda pasti penasaran untuk mencobanya bukan?

Nah, siapa yang menghentikanmu? Tambahkan saja ke situs Anda dan lihat sendiri hasilnya.

Bagaimana Cara Menambahkan Editor WYSIWYG ke situs Anda?

Nah, ketika ingin menambahkan editor WYSIWYG ke situs Anda, ada banyak opsi yang sama. Panduan ini tentang menambahkan a Editor Froala WYSIWYG ke situs Anda.

cara menambahkan editor WYSIWYG ke situs Anda
cara menambahkan editor WYSIWYG ke situs Anda

Anda mungkin bertanya-tanya mengapa Froala?

Sebagai editor yang ramah pengembang, ia menawarkan Anda kemampuan untuk memperluas kemampuannya lebih jauh. Froala datang bersama lebih dari 30 plugin keluar dari kotak. Hal yang baik tentang Froala adalah pengoptimalannya 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.

Namun yang membuatnya unik adalah integrasinya yang mudah. Anda dapat mengintegrasikannya dengan WordPress, React, atau teknologi frontend apa pun tanpa kesulitan apa pun.

Mari tambahkan ke situs Anda dengan mengikuti beberapa langkah mudah.

Langkah 1: Instal

Saat menginstal editor Froala, ada banyak jalan untuk melakukannya. Di sini NPM digunakan. Ini adalah salah satu opsi terbaik dan termudah untuk dilakukan.

Untuk NPM, ketik 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, namun 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 menjaga tampilan HTML yang diedit di luar editor teks kaya.


<link href=”../css/froala_style.min.css” rel=”stylesheet” type=”teks/css” />

Jangan lupa untuk meletakkan konten yang telah diedit di dalam elemen dengan tampilan fr.


  Inilah HTML yang diedit dengan editor teks kaya Froala.

Berikut adalah contoh formulir lengkap yang menunjukkan integrasi editor HTML Froala WYSIWYG dengan sebuah situs.

e

<html>
<kepala>
<link href=”https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css” rel=”stylesheet” type=”teks/css” />
<naskah type=”text/javascript” src=”https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js”></naskah>


</kepala>
<tubuh>
<div id=”contoh”></div>
<div kelas=”pandangan-fr”>
  Inilah HTML yang diedit dengan editor teks kaya Froala.
</div>
</tubuh>
<naskah>
var editor = new FroalaEditor('#contoh')
</naskah>
</html>

Begini tampilan akhirnya formulir itu. Anda sekarang dapat menggunakannya untuk mengedit atau membuat jenis konten kaya yang Anda inginkan. Cukup ketik atau masukkan teks dan lakukan operasi untuk melihat sendiri hasilnya. Anda juga dapat mengambil bantuan dokumentasi. Ini akan memberi Anda pendekatan mudah untuk menggunakan Froala secara maksimal.

Baik teks maupun grafis, Froala memungkinkan Anda mengedit konten dengan lebih presisi dibandingkan dengan editor teks standar. Ini memungkinkan Anda bereksperimen dengan tata letak, warna, dan format konten tanpa memerlukan keahlian coding. Inilah sebabnya mengapa orang-orang dari seluruh dunia memilih editor ini. Lalu mengapa tidak menjadi salah satu di antara mereka dan gunakan kesempatan ini untuk kepentingan Anda.

Takeaway Terakhir

Ada banyak editor WYSIWYG yang tersedia di pasar untuk dipilih, namun yang paling penting adalah kemudahan penerapan dan penggunaannya. Frola adalah salah satu editor HTML WYSIWYG generasi berikutnya yang mendapatkan banyak popularitas karena menawarkan keduanya di satu tempat. Panduan ini 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.

Tinggalkan Balasan

Translate »