@adabra/ui-libs-grapesjs-mjml 中文文档教程

Question

GrapesJS MJML

此插件允许在 GrapesJS 环境中使用 MJML 组件。 MJML 组件使用官方编译器实时渲染，因此结果几乎与使用 MJML Live Editor。

演示

支持的组件： mj-容器 mj 部分 mj-列 mj-文本 mj图像 mj 按钮 mj-社交 mj-分频器 mj-spacer

Options

|选项|说明|默认| |-|-|- |categoryLabel|块的类别|''| |importPlaceholder|导入占位符 MJML|''| |modalTitleImport|导入模式的标题|Import MJML| |modalBtnImport|测试导入按钮|Import| |modalLabelImport|导入模态的说明|''| |modalTitleExport|导出模式的标题|Export MJML| |modalLabelExport|导出模态的说明|''| |overwriteExport|覆盖默认导出命令|true| |preMjml|导出代码中MJML前的字符串|''| |postMjml|导出代码中MJML后面的字符串|''| |resetBlocks|如果为真，则清除所有之前的块|true| |resetDevices|清除所有以前的设备并为移动设备设置一个新设备|true|, |resetStyleManager|重置样式管理器并为 MJML 添加新属性|true|，

Download

• npm i grapesjs-mjml

Usage

<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">
  <!-- Your MJML body here -->
  <mj-container>
        <mj-section>
          <mj-column>
            <mj-text>My Company</mj-text>
          </mj-column>
        </mj-section>
  <mj-container>
</div>

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

Development

克隆存储库

$ git clone https://github.com/artf/grapesjs-mjml.git
$ cd grapesjs-mjml

安装它

$ npm i

插件通过 peerDependencies 依赖 GrapesJS所以你必须手动安装它

$ npm i grapesjs --no-save

启动开发服务器

$ npm start

或者，你可以在不同的目录中克隆 grapesjs 存储库，npm link 它并将其用作 grapesjs 依赖项。 这使您可以同时从源代码运行 grapesjs-mjml 和 grapesjs。

安装 grapesjs 并在其中运行 webpack watcher：

$ git clone https://github.com/artf/grapesjs
$ cd grapesjs
$ npm install
$ npm link
$ webpack --watch

安装 grapesjs-mjml，从上方链接 grapesjs 存储库并启动开发服务器：

$ git clone https://github.com/artf/grapesjs-mjml
$ npm install
$ npm link grapesjs
$ npm run

License

BSD 3-Clause