grapesjs-preset-newsletter

WebJar for grapesjs-preset-newsletter

License

License

BSD 3-Clause
Categories

Categories

JavaScript Languages Github Development Tools Version Controls
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

github-com-artf-grapesjs-preset-newsletter
Last Version

Last Version

0.2.20
Release Date

Release Date

Type

Type

jar
Description

Description

grapesjs-preset-newsletter
WebJar for grapesjs-preset-newsletter
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/artf/grapesjs-preset-newsletter

Download github-com-artf-grapesjs-preset-newsletter

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/github-com-artf-grapesjs-preset-newsletter/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>github-com-artf-grapesjs-preset-newsletter</artifactId>
    <version>0.2.20</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-artf-grapesjs-preset-newsletter/
implementation 'org.webjars.npm:github-com-artf-grapesjs-preset-newsletter:0.2.20'
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-artf-grapesjs-preset-newsletter/
implementation ("org.webjars.npm:github-com-artf-grapesjs-preset-newsletter:0.2.20")
'org.webjars.npm:github-com-artf-grapesjs-preset-newsletter:jar:0.2.20'
<dependency org="org.webjars.npm" name="github-com-artf-grapesjs-preset-newsletter" rev="0.2.20">
  <artifact name="github-com-artf-grapesjs-preset-newsletter" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='github-com-artf-grapesjs-preset-newsletter', version='0.2.20')
)
libraryDependencies += "org.webjars.npm" % "github-com-artf-grapesjs-preset-newsletter" % "0.2.20"
[org.webjars.npm/github-com-artf-grapesjs-preset-newsletter "0.2.20"]

Dependencies

compile (1)

Group / Artifact Type Version
org.webjars.npm : juice jar [4.1.1,5)

Project Modules

There are no modules declared in this project.

GrapesJS Newsletter Preset

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%' }

Download

Download using one of the options:

Usage

<link href="path/to/grapes.min.css" rel="stylesheet"/>
<link href="path/to/grapesjs-preset-newsletter.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: ['gjs-preset-newsletter'],
      pluginsOpts: {
        'gjs-preset-newsletter': {
          modalTitleImport: 'Import template',
          // ... other options
        }
      }
  });
</script>

Development

Clone the repository

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

Install dependencies

$ npm i

The plugin relies on GrapesJS via peerDependencies, so you have to install it manually (without adding it to package.json)

$ npm i grapesjs --no-save

Start the dev server

$ npm start

License

BSD 3-Clause

Versions

Version
0.2.20