grapesjs-preset-newsletter

This preset configures GrapesJS to be used as a Newsletter Builder with some unique features and blocks composed specifically for being rendered correctly inside all major email clients.
Demo

The demo might include external plugins, you can check the full demo code here.

Summary

• Plugin name: grapesjs-preset-newsletter
• Commands

gjs-get-inlined-html Get html with inlined CSS gjs-open-import-template Opens a modal for the import gjs-toggle-images Enable/Disable images

• Blocks

sect100 A section with 1 100% cell inside sect50 A section with 2 50% cells inside sect30 A section with 3 33.3333% cells inside sect37 A section with 2 cells inside: 30% and 70% button Simple button divider Divider block text Simple text component text-sect A block with 2 text components, respectively for the heading and paragraph image Simple image component quote Text component for quotes grid-items Block of 2 components in row list-items List of 2 components

Options

| Option | Description | Default | | - | - | - | | blocks | Which blocks to add | All available blocks | |block| Add custom block options, based on block id|(blockId) => ({})| |cmdOpenImport| Import command id |gjs-open-import-template| |cmdTglImages| Toggle images command id |gjs-toggle-images| |cmdInlineHtml| Get inlined HTML command id |gjs-get-inlined-html| |modalTitleImport| Title for the import modal |Import template| |modalTitleExport| Title for the export modal |Export template| |modalLabelExport| Label for the export modal |''| |modalLabelImport| Label for the import modal |''| |modalBtnImport| Label for the import button |Import| |importPlaceholder| Template as a placeholder inside import modal |''| |inlineCss| If true, inlines CSS on export |true| |updateStyleManager| Update Style Manager with more reliable style properties to use for newsletters |true| |showStylesOnChange| Show the Style Manager on component change |true| |showBlocksOnLoad| Show the Block Manager on load |true| |codeViewerTheme| Code viewer theme |hopscotch| |juiceOpts| Custom options for the juice HTML inliner |{}| |textCleanCanvas| Confirm text before clearing the canvas |Are you sure you want to clear the canvas?| |useCustomTheme| Load custom preset theme |true| |cellStyle| Default style used inside blocks tds |{ padding: 0, margin: 0, 'vertical-align': 'top' }| |tableStyle| Default style used for blocks tables |{ height: '150px', margin: '0 auto 10px auto', padding: '5px 5px 5px 5px', width: '100%' }|

Download

• CDN

https://unpkg.com/grapesjs-preset-newsletter

• NPM

npm i grapesjs-preset-newsletter

• GIT

git clone https://github.com/grapesjs/preset-newsletter.git

Usage

Directly in the browser

<link href="path/to/grapes.min.css" rel="stylesheet"/>
<script src="path/to/grapes.min.js"></script>
<script src="path/to/grapesjs-preset-newsletter.min.js"></script>

<div id="gjs"></div>

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

Modern javascript

import grapesjs from 'grapesjs';
import plugin from 'grapesjs-preset-newsletter';

const editor = grapesjs.init({
  container : '#gjs',
  // ...
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: { /* options */ }
  }
  // or
  plugins: [
    editor => plugin(editor, { /* options */ }),
  ],
});

Development

Clone the repository

$ git clone https://github.com/grapesjs/preset-newsletter.git
$ cd preset-newsletter

Install it

$ npm i

Start the dev server

$ npm start

Build before the commit. This will also increase the patch level version of the package

$ npm run build

License

BSD 3-Clause