Home

Awesome

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.

<p align="center"><img src="http://grapesjs.com/img/grapesjs-preset-newsletter.jpg" alt="GrapesJS" width="500" align="center"/></p> <br/>

Summary

Options

OptionDescriptionDefault
blocksWhich blocks to addAll available blocks
blockAdd custom block options, based on block id(blockId) => ({})
cmdOpenImportImport command idgjs-open-import-template
cmdTglImagesToggle images command idgjs-toggle-images
cmdInlineHtmlGet inlined HTML command idgjs-get-inlined-html
modalTitleImportTitle for the import modalImport template
modalTitleExportTitle for the export modalExport template
modalLabelExportLabel for the export modal''
modalLabelImportLabel for the import modal''
modalBtnImportLabel for the import buttonImport
importPlaceholderTemplate as a placeholder inside import modal''
inlineCssIf true, inlines CSS on exporttrue
updateStyleManagerUpdate Style Manager with more reliable style properties to use for newsletterstrue
showStylesOnChangeShow the Style Manager on component changetrue
showBlocksOnLoadShow the Block Manager on loadtrue
codeViewerThemeCode viewer themehopscotch
juiceOptsCustom options for the juice HTML inliner{}
textCleanCanvasConfirm text before clearing the canvasAre you sure you want to clear the canvas?
useCustomThemeLoad custom preset themetrue
cellStyleDefault style used inside blocks tds{ padding: 0, margin: 0, 'vertical-align': 'top' }
tableStyleDefault style used for blocks tables{ height: '150px', margin: '0 auto 10px auto', padding: '5px 5px 5px 5px', width: '100%' }

Download

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