tiny editor

editor kecil

Editor teks kaya HTML kecil yang ditulis dalam vanilla javascript

Sasaran

Buat pustaka kurang dari 5 kb (terkompresi) yang memungkinkan elemen HTML untuk digunakan sebagai editor teks yang kaya dalam vanilla javascript tua yang sederhana.

Mendukung

Jika Anda menggunakan dan menyukai perpustakaan ini, jangan ragu untuk mendukung proyek open source saya.

Cara menginstal

 npm install tiny-editor

atau muat file bundel langsung di akhir dokumen HTML Anda.

 <script src="https://unpkg.com/tiny-editor/dist/bundle.js"></script>

Cara menggunakan

1. Referensi Perpustakaan Editor di Dokumen HTML Anda
2. Tambahkan Atribut data-tiny-editor ke Elemen HTML yang ingin Anda ubah menjadi editor

Cara membuat editor secara dinamis

Gunakan window.__tinyEditor.transformToEditor() yang dianggap sebagai argumen pertama elemen DOM (biasanya <div> ) yang ingin Anda ubah menjadi editor. Lihat /public/index.html sebagai contoh.

Cara mengekstrak teks yang diformat

Dengarkan acara input pada elemen html editor.

 document
  .querySelectorAll('[data-tiny-editor]')
  .forEach(editor =>
    editor.addEventListener('input', e => console.log(e.target.innerHTML)
  )
);

Cara menyesuaikan

Ada berbagai opsi yang dapat digunakan untuk menyesuaikan bagaimana editor kecil akan diberikan. Secara default, setiap opsi diaktifkan. Anda dapat menonaktifkan opsi menggunakan atribut data.

Misalnya, Anda dapat menghapus tombol Format BOLD menggunakan atribut berikut:

 <div data-tiny-editor data-bold="no"></div>

Opsi

• data-formatblock="no" : Hapus daftar drop-down Styles
• data-bold="no" : Hapus tombol tebal
• data-italic="no" :: Hapus tombol miring
• data-underline="no" : Hapus tombol underline
• data-fontname="no" : Hapus daftar drop down font
• data-forecolor="no" :: hapus tombol warna teks
• data-justifyleft="no" : Hapus tombol Align kiri
• data-justifycenter="no" : Lepaskan tombol Align Center
• data-justifyright="no" : Hapus tombol Align yang tepat
• data-insertorderedlist="no" : Hapus tombol daftar bernomor
• data-insertunorderedlist="no" : Hapus tombol Daftar Bullet
• data-outdent="no" : Hapus tombol penurunan indent
• data-indent="no" : Hapus tombol Indent peningkatan
• data-remove-format="no" : Hapus tombol Formating Clear
• data-autofocus="no" : Hapus autofokus dari editor

Browser yang didukung

Browser modern (Chrome, Firefox, Edge, ...) didukung. Editor kecil tidak bekerja di Internet Explorer.