VoiceboxGrapesJS 1.2.0

There is a newer version of this package available.
See the version list below for details. 
dotnet add package VoiceboxGrapesJS --version 1.2.0                

                    
                

            
NuGet\Install-Package VoiceboxGrapesJS -Version 1.2.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="VoiceboxGrapesJS" Version="1.2.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
paket add VoiceboxGrapesJS --version 1.2.0                

                    
                

            
#r "nuget: VoiceboxGrapesJS, 1.2.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
// 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 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 it

$ npm i

Start the dev server

$ npm start

Build in /dist

$ npm run build

License

BSD 3-Clause

There are no supported framework assets in this package.

Learn more about Target Frameworks and .NET Standard.

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 783 2/26/2019
1.3.5 705 2/6/2019
1.3.4 694 1/25/2019
1.3.3 670 1/25/2019
1.3.2 672 1/25/2019
1.3.1 669 1/24/2019
1.3.0 691 1/22/2019
1.2.0 798 12/27/2018
1.1.94 708 12/26/2018
1.1.93 725 12/12/2018
1.1.92 742 12/12/2018
1.1.91 726 12/12/2018
1.1.90 703 12/12/2018
1.1.85 646 12/11/2018
1.1.84 728 12/10/2018
1.1.83 685 12/4/2018
1.1.82 704 11/21/2018
1.1.81 692 11/20/2018
1.1.80 703 11/20/2018
1.1.75 665 11/13/2018
1.1.71 733 10/31/2018
1.1.70 729 10/16/2018
1.1.68 722 10/3/2018
1.1.67 744 10/3/2018
1.1.66 716 10/3/2018
1.1.64 734 10/3/2018
1.1.63 764 10/2/2018
1.1.60 750 9/18/2018
1.1.55 748 9/3/2018
1.1.54 807 8/3/2018
1.1.53 791 8/2/2018
1.1.52 824 7/31/2018
1.1.51 784 7/25/2018
1.1.50 779 7/25/2018
1.1.43 825 7/24/2018
1.1.42 947 7/12/2018
1.1.41 904 7/12/2018
1.1.40 915 7/12/2018
1.1.36 922 7/11/2018
1.1.35 898 7/10/2018
1.1.34 894 7/6/2018
1.1.33 884 7/4/2018
1.1.32 809 6/27/2018
1.1.31 913 6/27/2018
1.1.30 821 6/26/2018
1.1.29 894 6/26/2018
1.1.28 812 6/26/2018
1.1.27 906 6/26/2018
1.1.26 876 6/26/2018
1.1.25 939 6/25/2018
1.1.24 919 6/25/2018
1.1.23 976 6/22/2018
1.1.22 877 6/22/2018
1.1.21 904 6/14/2018
1.1.20 877 6/13/2018
1.1.19 907 6/12/2018
1.1.18 825 6/7/2018
1.1.17 920 6/7/2018
1.1.16 924 6/7/2018
1.1.15 957 6/6/2018
1.1.14 915 6/5/2018
1.1.13 915 6/5/2018
1.1.12 919 5/28/2018
1.1.11 990 5/17/2018
1.1.10 972 5/17/2018
1.1.9 937 5/16/2018
1.1.8 943 5/16/2018
1.1.7 956 5/15/2018
1.1.6 832 5/11/2018
1.1.5 911 5/10/2018
1.1.4 875 5/10/2018
1.1.3 876 5/7/2018
1.1.2 1,066 4/27/2018
1.1.1 932 4/19/2018
1.1.0 898 4/19/2018
1.0.9 914 4/12/2018
1.0.8 908 4/12/2018
1.0.7 881 4/11/2018
1.0.6 926 3/19/2018
1.0.5 942 3/16/2018
1.0.4 1,015 3/15/2018
1.0.3 980 3/15/2018
1.0.2 969 3/15/2018
1.0.1 935 3/14/2018
1.0.0 956 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.