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句