mjml

Grapesjs MJML

Membutuhkan anggur v0.15.9 atau lebih tinggi

Plugin ini memungkinkan penggunaan komponen MJML di dalam lingkungan GrapesJS. Komponen MJML diterjemahkan secara real-time menggunakan kompiler V4 resmi (+ beberapa tiruan untuk membuatnya berjalan di browser), oleh karena itu hasilnya, hampir, sama seperti menggunakan editor Live MJML.

Demo

Komponen MJML yang Didukung (menggunakan parser MJML-browser default): mj-mjml mj-head mj-body mj-group - mj-column mj mj-image mj-text mj-button mj-social mj-wrapper mj-section mj-social-element -divider mj-spacer mJ-st-st-st-fjo-fy mj-divider mj-spacer mJ-st-st-st-fjo-element MJ-divider mj-spacer mJ- mj-style mj-font mj-hero mj-navbar mj-navbar-link mj-raw

Opsi

Pilihan	Keterangan	Bawaan
blocks	Blok mana yang harus ditambahkan	(semua)
block	Tambahkan opsi blok khusus, berdasarkan ID blok.	(blockId) => ({})
codeViewerTheme	Tema penampil kode.	hopscotch
customComponents	Daftar komponen yang akan ditambahkan ke default	[]
importPlaceholder	Template MJML Placeholder untuk Modal Impor	''
imagePlaceholderSrc	Sumber Placeholder Gambar	'https://via.placeholder.com/350x250/78c5d6/fff'
i18n	Objek i18n yang berisi bahasa lebih lanjut info	{}
mjmlParser	Instance MJML-Browser Kustom. Memungkinkan untuk memperluas fungsionalitas MJML atau menambahkan komponen MJML khusus	(input: string | MJMLJsonObject, opt: MJMLParsingOptions) => MJMLParseResults
overwriteExport	Menimpa perintah ekspor default	true
preMjml	String sebelum MJML dalam kode ekspor	''
postMjml	String setelah MJML dalam kode ekspor	''
resetBlocks	Bersihkan semua blok sebelumnya jika benar	true
resetDevices	Bersihkan semua perangkat sebelumnya dan atur yang baru untuk ponsel	true
resetStyleManager	Setel ulang Gaya Manajer dan tambahkan properti baru untuk MJML	true
resetDevices	Bersihkan semua perangkat sebelumnya dan atur yang baru untuk ponsel	true
hideSelector	Sembunyikan Manajer Pemilih Default	true
useXmlParser	Eksperimental: Gunakan Parser XML sebagai ganti HTML. Ini harus memungkinkan mengimpor elemen MJML void (tanpa tag penutup) seperti <mj-image/>	false
columnsPadding	Padding kolom (dengan cara ini lebih mudah untuk memilih kolom)	10px 0
useCustomTheme	Muat tema preset khusus	true

Unduh

• npm i grapesjs-mjml

Penggunaan

 < link href =" path/to/grapes.min.css " rel =" stylesheet " />
< script src =" path/to/grapes.min.js " > </ script >
< script src =" path/to/grapesjs-mjml.min.js " > </ script >

< div id =" gjs " >
  < mjml >
    < mj-body >
      <!-- Your MJML body here -->
      < mj-section >
        < mj-column >
          < mj-text > My Company </ mj-text >
        </ mj-column >
      </ mj-section >
    </ mj-body >
  </ mjml >
</ div >

< script type =" text/javascript " >
  const editor = grapesjs . init ( {
      fromElement : true ,
      container : '#gjs' ,
      plugins : [ 'grapesjs-mjml' ] ,
      pluginsOpts : {
        'grapesjs-mjml' : { /* ...options */ }
      }
  } ) ;
</ script > 

Atau menggunakan impor ESM:

 import 'grapesjs/dist/css/grapes.min.css'
import grapesJS from 'grapesjs'
import grapesJSMJML from 'grapesjs-mjml'

grapesJS . init ( {
   fromElement : true ,
   container : '#gjs' ,
   plugins : [ grapesJSMJML ] ,
   pluginsOpts : {
      [ grapesJSMJML ] : { /* ...options */ }
   } ,
} ) ; 

I18n Penggunaan:

 import 'grapesjs/dist/css/grapes.min.css'
import grapesJS from 'grapesjs'
import nl from 'grapesjs/locale/nl'
import grapesJSMJML from 'grapesjs-mjml'
import mjmlNL from 'grapesjs-mjml/locale/nl'

grapesJS . init ( {
   fromElement : true ,
   container : '#gjs' ,
   i18n : {
      // locale: 'en', // default locale
      // detectLocale: true, // by default, the editor will detect the language
      // localeFallback: 'en', // default fallback
      messages : { nl : nl } ,
   } ,
   plugins : [ grapesJSMJML ] ,
   pluginsOpts : {
      [ grapesJSMJML ] : {
        // Optional options
        i18n : { nl : mjmlNL }
      }
   } ,
} ) ;

Menggunakan build mJML-browser independen

Jika Anda memiliki versi MJML Anda sendiri dengan komponen khusus atau diperpanjang, dimungkinkan untuk mengganti parser MJML default dengan satu kustom dan membuat komponen GrapesJS khusus.

Untuk info lebih lanjut cara membuat komponen MJML, Anda dapat mengunjungi folder komponen atau Anda dapat pergi ke dokumen.

 import 'grapesjs/dist/css/grapes.min.css'
import grapesJS from 'grapesjs'
import grapesJSMJML from 'grapesjs-mjml'
import customMjmlParser from 'custom-mjml-parser' ;

import customImage from 'custom/components/path'

grapesJS . init ( {
   fromElement : true ,
   container : '#gjs' ,
   plugins : [ grapesJSMJML ] ,
   pluginsOpts : {
      [ grapesJSMJML ] : {
        mjmlParser : customMjmlParser ,
        customComponents : [
          customImage ,
        ]
      }
   } ,
} ) ; 

Perkembangan

Klon Repositori

$ git clone https://github.com/GrapesJS/mjml.git
$ cd mjml

Instal

$ npm i

Mulai server dev

$ npm start

Melepaskan

1. Jalankan npm run v:patch untuk menabrak versi di package.json dan buat tag git
2. Dorong tag Commit + New
3. Pergi ke GitHub dan konsep rilis baru
4. Pilih tag baru dan tambahkan beberapa catatan rilis
5. Hit Publish, rilis ini akan secara otomatis menerbitkan ke NPM

Lisensi

BSD 3 Clause