mjml

Grapesjs MJML

يتطلب Grapesjs v0.15.9 أو أعلى

يتيح هذا البرنامج المساعد استخدام مكونات MJML داخل بيئة Grapesjs. يتم تقديم مكونات MJML في الوقت الفعلي باستخدام برنامج التحويل البرمجي V4 الرسمي (+ بعض الهوسات لجعلها تعمل في المتصفح) ، وبالتالي فإن النتيجة هي نفسها تقريبًا باستخدام محرر MJML Live.

العرض التوضيحي

مكونات MJML المدعومة mj-column باستخدام Parser الافتراضي mj-image mj-text mj-font ): mj-mjml mj-navbar mj-head mj-wrapper mj-body mj-divider mj-section mj-hero mj-spacer mj-social mj-style mj-social-element mj-button mj-group mj-navbar-link mj-raw

خيارات

خيار	وصف	تقصير
blocks	الذي يحرك لإضافة	(الجميع)
block	أضف خيارات كتلة مخصصة ، بناءً على معرف الكتلة.	(blockId) => ({})
codeViewerTheme	موضوع عارض الرمز.	hopscotch
customComponents	قائمة المكونات التي ستتم إضافتها إلى الافتراضي	[]
importPlaceholder	قالب MJML العنصر النائب لمعدل الاستيراد	''
imagePlaceholderSrc	مصدر العنصر النائب	'https://via.placeholder.com/350x250/78c5d6/fff'
i18n	كائن i18n يحتوي على لغة مزيد من المعلومات	{}
mjmlParser	مثيل مخصص MJML-BREWSER. يسمح بتمديد وظيفة 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 }
      }
   } ,
} ) ;

باستخدام بناء متصفح MJML المستقل

في حال ، لديك نسختك الخاصة من MJML مع مكونات مخصصة أو ممتدة ، من الممكن تجاوز محلل MJML الافتراضي مع واحد مخصص وإنشاء مكونات GrapesJS مخصصة.

لمزيد من المعلومات كيفية إنشاء مكون 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. Run npm run v:patch لتصوير الإصدار في package.json وقم بإنشاء علامة git
2. ادفع الالتزام + العلامة الجديدة
3. انتقل إلى جيثب وصياغة إصدار جديد
4. حدد العلامة الجديدة وأضف بعض ملاحظات الإصدار
5. ضرب النشر ، سيتم نشر الإصدار تلقائيًا إلى NPM

رخصة

BSD 3 طبقة