1.0.20 • Published 2 years ago
grapesjs-preset-newsletter-v2 v1.0.20
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
Summary
- Commands
gjs-get-inlined-html
Get html with inlined CSSgjs-open-import-template
Opens a modal for the importgjs-toggle-images
Enable/Disable images
- Blocks
sect100
A section with 1 100% cell insidesect50
A section with 2 50% cells insidesect30
A section with 3 33.3333% cells insidesect37
A section with 2 cells inside: 30% and 70%button
Simple buttondivider
Divider blocktext
Simple text componenttext-sect
A block with 2 text components, respectively for the heading and paragraphimage
Simple image componentquote
Text component for quotesgrid-items
Block of 2 components in rowlist-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
Iftrue
, inlines CSS on export, default:true
cellStyle
Default style used inside blockstd
s, 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%' }
- Name:
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
1.0.20
2 years ago
1.0.19
2 years ago
1.0.18
2 years ago
1.0.17
2 years ago
1.0.16
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.1
2 years ago