mjml

穀物MJML

需要葡萄js v0.15.9或更高

該插件可在葡萄js環境中使用MJML組件。 MJML組件是使用官方V4編譯器實時渲染的（+一些模擬以使其在瀏覽器中運行），因此，結果幾乎與使用MJML Live Editor相同。

演示

Supported MJML components (using default mjml-browser parser): mj-mjml mj-head mj-body mj-wrapper mj-group mj-section mj-column mj-text mj-image mj-button mj-social mj-social-element mj-divider mj-spacer mj-style mj-font mj-hero mj-navbar mj-navbar-link mj-raw

選項

選項	描述	預設
blocks	要添加哪些塊	（全部）
block	基於塊ID添加自定義塊選項。	(blockId) => ({})
codeViewerTheme	代碼查看器主題。	hopscotch
customComponents	將添加到默認一個的組件列表	[]
importPlaceholder	導入模式的佔位符MJML模板	''
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。這應該允許導入void 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-browser構建

如果您擁有帶有自定義或擴展組件的MJML版本的版本，則可以使用自定義的ONE覆蓋MJML Parser並創建自定義的葡萄感組件。

有關如何創建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

啟動開發服務器

$ npm start

釋放

1. 運行npm run v:patch to package.json中的版本並創建一個git標籤
2. 推動提交 +新標籤
3. 去Github並起草新版本
4. 選擇新標籤並添加一些發行說明
5. 點擊發布，該版本將自動發佈到NPM

執照

BSD 3句