Skip to content

Townsheriff/grapesjs-preset-newsletter-v2

 
 

Repository files navigation

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: http://grapesjs.com/demo-newsletter-editor.html

GrapesJS


Summary

  • 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
  • Plugin
    • Name: gjs-preset-newsletter
    • Options:
      • modalTitleImport Title for the import modal, default: 'Import template'
      • modalLabelImport Label for the import modal, default: ''
      • modalLabelExport Label for the export modal, default: ''
      • modalBtnImport Label for the import button, default: 'Import'
      • importPlaceholder Template as a placeholder inside import modal, default: ''
      • inlineCss If true, inlines CSS on export, default: true
      • cellStyle Default style used inside blocks tds, default: { padding: 0, margin: 0, 'vertical-align': 'top' }
      • tableStyle Default style used for blocks tables, default: { height: '150px', margin: '0 auto 10px auto', padding: '5px 5px 5px 5px', width: '100%' }

Usage

$ npm i grapesjs-preset-newsletter-v2
import grapesjs from "grapesjs";
import newsLetter from "grapesjs-preset-newsletter-v2";

grapesjs.plugins.add("gjs-preset-newsletter", newsLetter);

const editor = grapesjs.init({
  container: "#editor",
  plugins: ["gjs-preset-newsletter"],
  pluginsOpts: {
    "gjs-preset-newsletter": {
      inlineCss: false,
    },
  },
});

Development

Clone the repository

$ git clone https://github.com/artf/grapesjs-preset-newsletter-v2.git
$ cd grapesjs-preset-newsletter-v2
$ npm i
$ npm link
$ npm run dev

In main project:

$ npm link grapesjs-preset-newsletter-v2

License

BSD 3-Clause

About

GrapesJS preset configuration for the newsletter editor http://grapesjs.com

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 75.0%
  • SCSS 13.4%
  • CSS 11.6%