mjml

องุ่น mjml

ต้องใช้องุ่น V0.15.9 หรือสูงกว่า

ปลั๊กอินนี้ช่วยให้การใช้งานส่วนประกอบ MJML ภายในสภาพแวดล้อมองุ่น ส่วนประกอบ MJML จะแสดงผลแบบเรียลไทม์โดยใช้คอมไพเลอร์ V4 อย่างเป็นทางการ (+ mocks บางตัวเพื่อให้ทำงานในเบราว์เซอร์) ดังนั้นผลลัพธ์ก็เกือบจะเหมือนกับการใช้ตัวแก้ไข MJML Live

การสาธิต

ส่วนประกอบ MJML ที่รองรับ (ใช้ตัวแยกวิเคราะห์ MJML-BROWSER เริ่มต้น): mj-mjml mj-head MJ mj-wrapper mj-body mj-group Wrapper mj-section mj-column mj-button mj-text mj-divider mj-spacer mj-font mj-social-element mj-hero mj-image mj-style mj-navbar mj-social mj-navbar-link mj-raw

ตัวเลือก

ตัวเลือก	คำอธิบาย	ค่าเริ่มต้น
blocks	บล็อกใดที่จะเพิ่ม	(ทั้งหมด)
block	เพิ่มตัวเลือกบล็อกที่กำหนดเองตาม ID บล็อก	(blockId) => ({})
codeViewerTheme	ชุดรูปแบบการดูรหัส	hopscotch
customComponents	รายการส่วนประกอบที่จะเพิ่มลงในค่าเริ่มต้น	[]
importPlaceholder	เทมเพลต MJML Placeholder สำหรับการนำเข้า Modal	''
imagePlaceholderSrc	แหล่งที่มาของตัวยึดภาพ	'https://via.placeholder.com/350x250/78c5d6/fff'
i18n	วัตถุ i18n ที่มีภาษาข้อมูลเพิ่มเติม	{}
mjmlParser	อินสแตนซ์ MJML-Browser ที่กำหนดเอง อนุญาตให้ขยายฟังก์ชัน MJML หรือเพิ่มส่วนประกอบ MJML ที่กำหนดเอง	(input: string | MJMLJsonObject, opt: MJMLParsingOptions) => MJMLParseResults
overwriteExport	เขียนทับคำสั่งส่งออกเริ่มต้น	true
preMjml	สตริงก่อน MJML ในรหัสการส่งออก	''
postMjml	สตริงหลังจาก MJML ในรหัสการส่งออก	''
resetBlocks	ทำความสะอาดบล็อกก่อนหน้าทั้งหมดหากเป็นจริง	true
resetDevices	ทำความสะอาดอุปกรณ์ก่อนหน้าทั้งหมดและตั้งค่าอุปกรณ์ใหม่สำหรับมือถือ	true
resetStyleManager	รีเซ็ตตัวจัดการสไตล์และเพิ่มคุณสมบัติใหม่สำหรับ MJML	true
resetDevices	ทำความสะอาดอุปกรณ์ก่อนหน้าทั้งหมดและตั้งค่าอุปกรณ์ใหม่สำหรับมือถือ	true
hideSelector	ซ่อนตัวจัดการตัวเลือกเริ่มต้น	true
useXmlParser	การทดลอง: ใช้ตัวแยกวิเคราะห์ XML แทน HTML สิ่งนี้ควรอนุญาตการนำเข้าองค์ประกอบ MJML เป็นโมฆะ (โดยไม่ต้องปิดแท็ก) เช่น <mj-image/>	false
columnsPadding	การขยายคอลัมน์ (วิธีนี้ง่ายกว่าในการเลือกคอลัมน์)	10px 0
useCustomTheme	โหลดธีมที่กำหนดเองที่กำหนดเอง	true

การดาวน์โหลด

• npm i grapesjs-mjml

การใช้งาน

 < 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 > 

หรือใช้ 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:

 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 }
      }
   } ,
} ) ;

การใช้ Build MJML-Browser อิสระ

ในกรณีที่คุณมี MJML เวอร์ชันของคุณเองที่มีส่วนประกอบที่กำหนดเองหรือขยายคุณเป็นไปได้ที่จะแทนที่ตัวแยกวิเคราะห์ MJML เริ่มต้นด้วย Custom One และสร้างส่วนประกอบองุ่นที่กำหนดเอง

สำหรับข้อมูลเพิ่มเติมวิธีการสร้างส่วนประกอบ MJML คุณสามารถเยี่ยมชมโฟลเดอร์ส่วนประกอบหรือคุณสามารถไปที่เอกสาร

 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 ,
        ]
      }
   } ,
} ) ; 

การพัฒนา

โคลนที่เก็บ

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

ติดตั้ง

$ npm i

เริ่มเซิร์ฟเวอร์ dev

$ npm start

การปล่อย

1. เรียกใช้ npm run v:patch to bump รุ่นใน package.json และสร้างแท็ก Git
2. ผลักดันแท็ก + ใหม่
3. ไปที่ GitHub และร่างรุ่นใหม่
4. เลือกแท็กใหม่และเพิ่มบันทึกย่อบางส่วน
5. กดเผยแพร่การเผยแพร่จะเผยแพร่ไปยัง NPM โดยอัตโนมัติ

ใบอนุญาต

BSD 3 ข้อ