mp html

MP-HTML

Komponen teks kaya applet yang kuat

Pendahuluan Fungsional

• Mendukung penggunaan di beberapa platform applet utama dan uni-app
• Mendukung tag kaya (termasuk table , video , svg , dll.)
• Mendukung efek peristiwa yang kaya (pratinjau otomatis gambar, pemrosesan tautan, dll.)
• Pengaturan dukungan peta placeholder (pemuatan, kesalahan, pratinjau)
• Mendukung fungsi kaya seperti jangkar jangkar lompatan, tekan panjang dan salin
• Mendukung sebagian besar entitas HTML
• Rich Plug-Ins (Pencarian Kata Kunci, Pengeditan Konten, Rumus latex , dll.)
• Efisiensi tinggi, toleransi kesalahan yang kuat dan ringan ( ≈25KB , 9KB gzipped )

Lihat fungsi Pengantar untuk mempelajari lebih lanjut

Cara menggunakan

Platform asli

• Metode npm

  1. Instal Paket Komponen di Direktori Proyek

     npm install mp-html

  2. Periksa使用npm 模块di Alat Pengembang (jika tidak ada opsi, tidak diperlukan) dan klik工具- 构建npm

  3. Tambahkan file json yang perlu menggunakan halaman

     {
       "usingComponents" : {
         "mp-html" : " mp-html "
       }
     }

  4. Tambahkan file wxml yang perlu menggunakan halaman

      < mp-html content =" {{html}} " />

  5. Tambahkan file js yang perlu menggunakan halaman

      Page ( {
       onLoad ( ) {
         this . setData ( {
           html : '<div>Hello World!</div>'
         } )
       }
     } )

• Metode kode sumber

  1. Salin Paket Kode ( dist/platform ) dari platform yang sesuai dalam kode sumber ke direktori components dan ganti namanya menjadi mp-html

  2. Tambahkan file json yang perlu menggunakan halaman

     {
       "usingComponents" : {
         "mp-html" : " /components/mp-html/index "
       }
     }

  Langkah selanjutnya sama seperti di atas

Lihatlah Mulai Cepat untuk Mempelajari Lebih Lanjut

uni-app

• Metode kode sumber

  1. Salin konten di dist/uni-app dalam kode sumber ke direktori Root Proyek dan dapat langsung diperkenalkan melalui pasar plug-in.

  2. Tambahkan file vue yang perlu menggunakan halaman

     < template >
       < view >
         < mp-html :content = " html " />
       </ view >
     </ template >
     < script >
       import mpHtml from ' @/components/mp-html/mp-html '
       export default {
         // HBuilderX 2.5.5+ 可以通过 easycom 自动引入
         components : {
           mpHtml
         },
         data () {
           return {
             html : ' <div>Hello World!</div> '
           }
         }
       }
     </ script >

• Metode npm

  1. Instal Paket Komponen di Direktori Proyek

     npm install mp-html

  2. Tambahkan file vue yang perlu menggunakan halaman

     < template >
       < view >
         < mp-html :content = " html " />
       </ view >
     </ template >
     < script >
       import mpHtml from ' mp-html/dist/uni-app/components/mp-html/mp-html '
       export default {
         // 不可省略
         components : {
           mpHtml
         },
         data () {
           return {
             html : ' <div>Hello World!</div> '
           }
         }
       }
     </ script >

  Saat memperkenalkan proyek yang berjalan menggunakan metode cli melalui npm , Anda perlu mengonfigurasi transpileDependencies di vue.config.js . Untuk detailnya, lihat #330
  Jika digunakan di nvue , salin konten di direktori dist/uni-app/static ke direktori static proyek, jika tidak ia tidak akan berjalan

Lihatlah Mulai Cepat untuk Mempelajari Lebih Lanjut

Properti Komponen

milik	jenis	nilai default	menjelaskan
gaya kontainer	Rangkaian		Gaya kontainer (2.1.0+)
isi	Rangkaian		String html untuk rendering
copy-link	Boolean	BENAR	Apakah akan mengizinkan penyalinan tautan eksternal secara otomatis saat diklik
domain	Rangkaian		Nama domain utama (untuk jahitan tautan)
kesalahan-IMG	Rangkaian		Tautan placeholder saat kesalahan gambar terjadi
malas-muatan	Boolean	PALSU	Apakah akan mengaktifkan pemuatan gambar malas
memuat-IMG	Rangkaian		Tautan placeholder selama pemuatan gambar
PAUSE-Video	Boolean	BENAR	Apakah akan secara otomatis menjeda video lain saat memutar video
Pratinjau-IMG	Boolean	BENAR	Apakah akan membiarkan gambar dipratinjau secara otomatis saat diklik
Table gulir	Boolean	PALSU	Apakah akan menambahkan lapisan gulir ke setiap tabel sehingga dapat menggulir secara horizontal sendirian
dapat dipilih	Boolean	PALSU	Apakah akan mengaktifkan teks lama tekan untuk disalin
set-title	Boolean	BENAR	Apakah akan mengatur konten tag judul ke judul halaman
show-img-menu	Boolean	BENAR	Apakah akan membiarkan gambar ditekan untuk waktu yang lama untuk menampilkan menu
gaya tag	Obyek		Atur gaya default tag
Use-Anchor	Boolean	PALSU	Apakah akan menggunakan tautan jangkar

Lihat properti untuk mempelajari lebih lanjut

Acara Komponen

nama	Waktu pemicu
memuat	Saat pohon DOM dimuat
siap	Saat gambar dimuat
kesalahan	Saat kesalahan rendering terjadi
imgtap	Saat gambar diklik
linktap	Saat tautan diklik

Lihat acara untuk mempelajari lebih lanjut

API

Beberapa metode api disediakan pada instance komponen untuk panggilan

nama	memengaruhi
di dalam	Batasi kisaran jangkar lompatan hingga tontonan gulir
navigateto	Jangkar jangkar
gettext	Dapatkan konten teks
Getrect	Dapatkan lokasi dan ukuran konten teks yang kaya
setContent	Atur Konten Teks Kaya
Imlist	Dapatkan berbagai gambar
Pausemedia	Pause Audio dan Video Playback (2.2.2+)
setplaybackrate	Atur tingkat pemutaran audio dan video (2.4.0+)

Lihat API untuk mempelajari lebih lanjut

Ekstensi Plugin

Selain fungsi dasar, komponen ini juga menyediakan ekstensi yang kaya dan dapat dipilih sesuai kebutuhan.

nama	memengaruhi
audio	Pemutar musik
dapat diedit	Pengeditan teks yang kaya
emoji	Menganalisis emoji
Menyorot	Sorotan blok kode
penurunan harga	Render Markdown
Mencari	Pencarian Kata Kunci
gaya	Cocokkan gaya dalam tag gaya
TXV-Video	Menggunakan Tencent Video
IMG-Cache	Cache gambar oleh @pentatea
getah	Render rumus lateks oleh @zeng-j
kartu	Tampilan kartu oleh @whoooami

Lihat plugin untuk mempelajari lebih lanjut

Menggunakan kasus

Contoh resmi	Happy Mall	Sungguh hidup yang luar biasa	Cek Metode Makanan	Weima	Baca literatur klasik

Ulasan Sains	Perjalanan Teknologi Programmer	Blog Diandian	Catatan yang sangat baik	365 pertanyaan	Buku bersama di kota yang sama

Sumber Sumber Teknologi	Kode Anda luar biasa	BENAR	Mottoni	Demo Template	Ai Wali

Peringkat di atas tidak ada urutan tertentu, dan kasus penggunaan yang lebih terlihat dikumpulkan (harap tambahkan)

Lisensi dan dukungan

• Lisensi gratis (termasuk penggunaan komersial), menyalin atau memodifikasi lisensi MIT komponen ini
  Penting untuk menjalani pengujian yang cukup sebelum digunakan dalam lingkungan produksi. Anda tidak bertanggung jawab atas kerugian apa pun yang disebabkan oleh bug plug-in (Anda dapat memodifikasi kode sumber sendiri)

• Hubungi kami dan selamat datang untuk bergabung dengan grup komunikasi QQ :
  Grup 1 (penuh): 699734691
  Grup 2 (Penuh): 778239129
  Grup 3: 960265313
  

• mendukung
  

Perbarui log

• v2.5.0 (20240422)

  1. U play acara menambahkan src dan detail informasi lainnya
  2. U preview-img Atribut Dukungan Pengaturan untuk all untuk Mengaktifkan Detail Pratinjau base64 Gambar
  3. U editable plug-in menambahkan mode sederhana (klik teks untuk mengeditnya secara langsung)
  4. U latex plug-in mendukung detail formula tingkat blok
  5. F Memperbaiki masalah kehilangan latar belakang dalam beberapa kasus tabel.
  6. F Memperbaiki beberapa masalah yang tidak dapat ditampilkan svg secara rinci
  7. F Memperbaiki masalah bahwa gaya tidak dapat dikenali dalam paket uni-app h5 dan app berakhir.
  8. F Memperbaiki masalah tampilan yang salah di plug-in latex dalam beberapa kasus.
  9. F Memperbaiki masalah bahwa tabel plugin editable tidak dapat dihapus
  10. F Memperbaiki masalah Paket uni-app Plug-in editable vue3 h5 Mengklik Kesalahan Gambar
  11. F Memperbaiki masalah di mana paket uni-app Plugin editable mengklik di atas meja tanpa bilah menu

• v2.4.3 (20240121)

  1. Detail plugin kartu A oleh @whoooami
  2. F Memperbaiki masalah yang mungkin tidak foreignobject dalam detail svg
  3. F Memperbaiki masalah tampilan yang salah dalam kasus sel gabungan di tabel bagian dari detail
  4. F Memperbaiki masalah pengaturan object-fit dalam tag img untuk tidak valid
  5. F Memperbaiki masalah bahwa rumus plug-in latex akan membungkus detail garis
  6. F Memperbaiki masalah yang mengklik audio tidak dapat diedit ketika paket uni-app editable dan plug-in audio dibagikan. Detail oleh @whoooami
  7. F Memperbaiki masalah bahwa applet alipay telah mengatur gambar lebar dan tinggi yang dapat ditampilkan secara tidak normal.
  8. F Memperbaiki masalah bahwa paket uni-app WeChat Applet akan melaporkan kesalahan dalam replace of undefined dalam beberapa kasus.
  9. F Memperbaiki masalah bahwa paket uni-app Kuaishou Mini Program tidak menampilkan detail

  Panduan Pembaruan dapat dilihat dari metode peningkatan 1.x

Lihat log pembaruan untuk mempelajari lebih lanjut