VoiceboxGrapesJS 1.2.0
See the version list below for details.
dotnet add package VoiceboxGrapesJS --version 1.2.0
NuGet\Install-Package VoiceboxGrapesJS -Version 1.2.0
<PackageReference Include="VoiceboxGrapesJS" Version="1.2.0" />
paket add VoiceboxGrapesJS --version 1.2.0
#r "nuget: VoiceboxGrapesJS, 1.2.0"
// Install VoiceboxGrapesJS as a Cake Addin
#addin nuget:?package=VoiceboxGrapesJS&version=1.2.0
// Install VoiceboxGrapesJS as a Cake Tool
#tool nuget:?package=VoiceboxGrapesJS&version=1.2.0
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
<p align="center"><img src="http://grapesjs.com/img/grapesjs-preset-newsletter.jpg" alt="GrapesJS" width="500" align="center"/></p> <br/>
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:
Download
Download using one of the options:
npm i grapesjs-preset-newsletter
oryarn add grapesjs-preset-newsletter
- Latest release link https://github.com/artf/grapesjs-preset-newsletter/releases/latest
- CDN
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 it
$ npm i
Start the dev server
$ npm start
Build in /dist
$ npm run build
License
BSD 3-Clause
Learn more about Target Frameworks and .NET Standard.
-
- SampleDependency (>= 1.0.0)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last updated |
---|---|---|
1.3.6 | 732 | 2/26/2019 |
1.3.5 | 670 | 2/6/2019 |
1.3.4 | 654 | 1/25/2019 |
1.3.3 | 631 | 1/25/2019 |
1.3.2 | 637 | 1/25/2019 |
1.3.1 | 631 | 1/24/2019 |
1.3.0 | 651 | 1/22/2019 |
1.2.0 | 758 | 12/27/2018 |
1.1.94 | 670 | 12/26/2018 |
1.1.93 | 687 | 12/12/2018 |
1.1.92 | 699 | 12/12/2018 |
1.1.91 | 688 | 12/12/2018 |
1.1.90 | 670 | 12/12/2018 |
1.1.85 | 608 | 12/11/2018 |
1.1.84 | 689 | 12/10/2018 |
1.1.83 | 644 | 12/4/2018 |
1.1.82 | 662 | 11/21/2018 |
1.1.81 | 650 | 11/20/2018 |
1.1.80 | 662 | 11/20/2018 |
1.1.75 | 627 | 11/13/2018 |
1.1.71 | 687 | 10/31/2018 |
1.1.70 | 682 | 10/16/2018 |
1.1.68 | 676 | 10/3/2018 |
1.1.67 | 697 | 10/3/2018 |
1.1.66 | 672 | 10/3/2018 |
1.1.64 | 686 | 10/3/2018 |
1.1.63 | 731 | 10/2/2018 |
1.1.60 | 703 | 9/18/2018 |
1.1.55 | 703 | 9/3/2018 |
1.1.54 | 770 | 8/3/2018 |
1.1.53 | 753 | 8/2/2018 |
1.1.52 | 781 | 7/31/2018 |
1.1.51 | 748 | 7/25/2018 |
1.1.50 | 754 | 7/25/2018 |
1.1.43 | 789 | 7/24/2018 |
1.1.42 | 910 | 7/12/2018 |
1.1.41 | 870 | 7/12/2018 |
1.1.40 | 877 | 7/12/2018 |
1.1.36 | 885 | 7/11/2018 |
1.1.35 | 862 | 7/10/2018 |
1.1.34 | 857 | 7/6/2018 |
1.1.33 | 848 | 7/4/2018 |
1.1.32 | 771 | 6/27/2018 |
1.1.31 | 875 | 6/27/2018 |
1.1.30 | 786 | 6/26/2018 |
1.1.29 | 860 | 6/26/2018 |
1.1.28 | 776 | 6/26/2018 |
1.1.27 | 872 | 6/26/2018 |
1.1.26 | 839 | 6/26/2018 |
1.1.25 | 899 | 6/25/2018 |
1.1.24 | 881 | 6/25/2018 |
1.1.23 | 939 | 6/22/2018 |
1.1.22 | 839 | 6/22/2018 |
1.1.21 | 863 | 6/14/2018 |
1.1.20 | 837 | 6/13/2018 |
1.1.19 | 872 | 6/12/2018 |
1.1.18 | 782 | 6/7/2018 |
1.1.17 | 884 | 6/7/2018 |
1.1.16 | 885 | 6/7/2018 |
1.1.15 | 918 | 6/6/2018 |
1.1.14 | 879 | 6/5/2018 |
1.1.13 | 881 | 6/5/2018 |
1.1.12 | 879 | 5/28/2018 |
1.1.11 | 951 | 5/17/2018 |
1.1.10 | 933 | 5/17/2018 |
1.1.9 | 902 | 5/16/2018 |
1.1.8 | 904 | 5/16/2018 |
1.1.7 | 922 | 5/15/2018 |
1.1.6 | 798 | 5/11/2018 |
1.1.5 | 862 | 5/10/2018 |
1.1.4 | 834 | 5/10/2018 |
1.1.3 | 841 | 5/7/2018 |
1.1.2 | 1,023 | 4/27/2018 |
1.1.1 | 896 | 4/19/2018 |
1.1.0 | 863 | 4/19/2018 |
1.0.9 | 873 | 4/12/2018 |
1.0.8 | 868 | 4/12/2018 |
1.0.7 | 846 | 4/11/2018 |
1.0.6 | 890 | 3/19/2018 |
1.0.5 | 905 | 3/16/2018 |
1.0.4 | 976 | 3/15/2018 |
1.0.3 | 943 | 3/15/2018 |
1.0.2 | 934 | 3/15/2018 |
1.0.1 | 897 | 3/14/2018 |
1.0.0 | 920 | 3/14/2018 |
GrapesJS standard blocks for text area and images. Integration with VoiceBox media server. New use button for selection of src for image. Responsive sections. Conditional content for blocks.