editorjs html

Editorjs-html

Utilitas untuk parse editorjs membersihkan data ke html.

• Gunakan dengan JavaScript/TypeScript biasa, Bereaksi, Angular, Vue atau mesin/kerangka kerja templating pilihan Anda.
• Cepat, efisien dan ringan.
• Sepenuhnya dapat disesuaikan dengan inti.
• Mendukung blok editorjs dasar yang dapat disesuaikan juga.
• Luas untuk menguraikan blok Anda sendiri.

Apa yang baru di v4?

• Menulis ulang lengkap, dependensi terbaru dengan perubahan API minimal.
• Fungsi parseStrict() dan validate() dihapus.
• Mode ketat dapat dikonfigurasi melalui opsi.
• Kesalahan konsol Jika fungsi parser untuk blok tidak tersedia. Mode ketat melempar kesalahan.
• Kode lebih mudah dibaca, modular. Ini akan membuatnya lebih mudah untuk berkontribusi dan melacak perubahan.
• Jenis definisi yang langsung diambil dari editor.js, sehingga pengembangan menjadi lebih mudah.
• Pengujian unit dengan bercanda.

Instalasi

Tuan rumah diri, versi yang dikompilasi.

• Browser - get /.build/edjshtml.browser.js

• NodeJS - get /.build/edjshtml.node.js

• Untuk browser & node - get /.build/edjshtml.js

NPM

npm install editorjs-html

CDN

• https://cdn.jsdelivr.net/npm/[email protected]/.build/edjshtml.js
• (Browser Only Build): https://cdn.jsdelivr.net/npm/[email protected]/.build/edjshtml.browser.js

Penggunaan

Browser

  const edjsParser = edjsHTML ( ) ;
  let html = edjsParser . parse ( editorjs_clean_data ) ;
  console . log ( html ) ;

NodeJS

  const edjsHTML = require ( "editorjs-html" ) ;
  const edjsParser = edjsHTML ( ) ;
  const html = edjsParser . parse ( editorjs_clean_data ) ;

  console . log ( html ) ; 

Pembaruan

Lihat rilis

Dokumen

Tipe blok yang didukung

• Header (H1-H6)
• Daftar (dipesan & tidak dipesan)
• Daftar bersarang
• Gambar
• Pembatas
• Ayat
• Mengutip
• Kode
• Menanamkan

Parse seluruh objek data editorjs

  const edjsParser = edjsHTML ( ) ;
  const HTML = edjsParser . parse ( editorjs_data ) ;
  // returns array of html strings per block
  console . log ( HTML ) ; 

Parse Seluruh Objek Data EditorJ (Mode Ketat)

  const edjsParser = edjsHTML ( ) ;
  const HTML = edjsParser . parse ( editorjs_data ) ;
  // returns an error
  if ( HTML instanceof Error ) throw HTML ;

  // in case of success, returns an array of strings
  console . log ( HTML ) ; 

Parse blok data bersih tunggal

  const edjsParser = edjsHTML ( ) ;
  const blockHTML = edjsParser . parseBlock ( editorjs_data_block ) ;
  // returns string of html for this block
  console . log ( blockHTML ) ; 

Mode ketat

  const edjsParser = edjsHTML ( { } , { strict : true } ) ;
  // returns the list of missing parser functions
  const blockHTML = edjsParser . parse ( editorjs_data ) ;
  console . log ( blockHTML ) ;

Perpanjang untuk blok khusus

editorjs-html mendukung memperluas dan mengesampingkan fungsi parser untuk blok.

  // Example Custom or Unrecognised Block
  {
    type : "custom" ,
    data : {
      text : "Hello World"
    }
 } 

  // Parse this block in editorjs-html
  function customParser ( block ) {
    return `<custom-tag> ${ block . data . text } </custom-tag>` ;
  }

  const plugins = {
    // The keyname must match with the type of block you want to parse with this funcion
    custom : customParser
    // ... add more or overwrite
  }

  const edjsParser =  edjsHTML ( plugins ) ; 

Kontribusi

Harap tambahkan masalah, atau buka PR untuk bug, ulasan, atau saran apa pun.

Fungsi parser baru

1. Untuk fungsi parser tambahan, silakan tambahkan ke parsers/block-name . Periksa fungsi yang ada untuk saran.
2. Uji semuanya berfungsi dengan baik, dengan pnpm test && pnpm build .
3. Buka PR, untuk ditinjau.
4. Tambahkan tes di direktori tests . Pastikan tes Anda lulus dengan cakupan yang sesuai.

Saran & Rekomendasi

Saya ingin mendapatkan umpan balik dan saran Anda. Anda juga dapat memberi tahu saya, jika Anda memerlukan dukungan untuk blok editorjs lagi.

Mendukung

Jika Anda menemukan ini bermanfaat, pertimbangkan untuk memberi repositori ini bintang. Anda juga dapat membelikan saya kopi di sini

Lisensi

Lisensi Publik MIT

Pengarang

@Pavittarx