grapesjs/preset-newsletter

GrapesJS preset configuration for the newsletter editor.

GrapesJS

GrapesJS is a free and open source Web Builder Framework which helps building HTML templates, faster and easily, to be delivered in sites, newsletters or mobile apps. Mainly, GrapesJS was designed to be used inside a CMS to speed up the creation of dynamic templates. To better understand this concept check the image below

Generally any 'template system', that you'd find in various applications like CMS, is composed by the structure (HTML), style (CSS) and variables, which are then replaced with other templates and contents on server-side and rendered on client.

This demos show examples of what is possible to achieve:
Webpage Demo - http://grapesjs.com/demo.html
Newsletter Demo - http://grapesjs.com/demo-newsletter-editor.html

Table of contents

• Features
• Download
• Usage
• Development
• Documentation
• API
• Testing
• Plugins
• Support
• Changelog
• Contributing
• License

Features

Blocks	Style Manager	Layer Manager

Code Viewer	Asset Manager

• Local and remote storage

• Default built-in commands (basically for creating and managing different components)

Download

• CDNs
  • UNPKG (resolves to the latest version)
    • https://unpkg.com/grapesjs
    • https://unpkg.com/grapesjs/dist/css/grapes.min.css
  • CDNJS (replace X.X.X with the current version)
    • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/grapes.min.js
    • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/css/grapes.min.css
• NPM
  • npm i grapesjs
• GIT
  • git clone https://github.com/GrapesJS/grapesjs.git

For the development purpose you should follow instructions below.

Usage

<link rel="stylesheet" href="path/to/grapes.min.css">
<script src="path/to/grapes.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      components: '<div class="txt-red">Hello world!</div>',
      style: '.txt-red{color: red}',
  });
</script>

For a more practical example I'd suggest looking up the code inside this demo: http://grapesjs.com/demo.html

Development

Clone the repository and install all the necessary dependencies (yarn is highly recommended)

$ git clone https://github.com/GrapesJS/grapesjs.git
$ cd grapesjs
$ yarn

Start the dev server

$ yarn start

Once the development server is started you should be able to reach the demo page (eg. http://localhost:8080)

Documentation

Check the getting started guide here: Documentation

API

API References could be found here: API-Reference

Testing

$ yarn test

Plugins

Official Plugins | Community Plugins

Wrappers

• @grapesjs/react - GrapesJS wrapper for React that allows you to build custom and declarative UI for your editor.

Extensions

• grapesjs-plugin-export - Export GrapesJS templates in a zip archive
• grapesjs-plugin-filestack - Add Filestack uploader in Asset Manager
• grapesjs-plugin-ckeditor - Replaces the built-in RTE with CKEditor
• grapesjs-tui-image-editor - GrapesJS TOAST UI Image Editor
• grapesjs-blocks-basic - Basic set of blocks
• grapesjs-plugin-forms - Set of form components and blocks
• grapesjs-navbar - Simple navbar component
• grapesjs-component-countdown - Simple countdown component
• grapesjs-style-gradient - Add gradient type input to the Style Manager
• grapesjs-style-filter - Add filter type input to the Style Manager
• grapesjs-style-bg - Full-stack background style property type, with the possibility to add images, colors, and gradients
• grapesjs-blocks-flexbox - Add the flexbox block
• grapesjs-lory-slider - Slider component by using lory
• grapesjs-tabs - Simple tabs component
• grapesjs-tooltip - Simple, CSS only, tooltip component for GrapesJS
• grapesjs-custom-code - Embed custom code
• grapesjs-touch - Enable touch support
• grapesjs-indexeddb - Storage wrapper for IndexedDB
• grapesjs-firestore - Storage wrapper for Cloud Firestore
• grapesjs-parser-postcss - Custom CSS parser for GrapesJS by using PostCSS
• grapesjs-typed - Typed component made by wrapping Typed.js library
• grapesjs-ui-suggest-classes - Enable auto-complete of classes in the SelectorManager UI
• grapesjs-fonts - Custom Fonts plugin, adds a UI to manage fonts in websites
• grapesjs-symbols - Symbols plugin to reuse elements in a website and accross pages
• grapesjs-click - Grab and drop blocks and components with click (no more drag-and-drop)
• grapesjs-float - Anchor a floating element next to another element (selected component, ...)

Presets

• grapesjs-preset-webpage - Webpage Builder
• grapesjs-preset-newsletter - Newsletter Builder
• grapesjs-mjml - Newsletter Builder with MJML components

Find out more about plugins here: Creating plugins

Support

If you like the project and you wish to see it grow, please consider supporting us with a donation of your choice or become a backer/sponsor via Open Collective

Thanks to BrowserStack for providing us browser testing services

License

BSD 3-clause

preset-newsletter's Issues

[Question]: Adding 'Extra' to styleManager

Hi, I've been using the newsletter preset version of GrapesJS and I would like to add the built in transforms options to the styleManager. I've added them to the inititialization (shown below trucated) but I can't get the Extra section to show in the side panel.

styleManager: {
                    sectors: [{
                    name: 'General',
                    buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'],
                    properties: [{
                        name: 'Alignment',
                        property: 'float',
                        type: 'radio',
                        defaults: 'none',
                        list: [
                            { value: 'none', className: 'fa fa-times' },
                            { value: 'left', className: 'fa fa-align-left' },
                            { value: 'right', className: 'fa fa-align-right' }
                        ],
                    },
                    { property: 'position', type: 'select' }
                    ],
                },
                . . .
                 {
                        name: 'Extra',
                        open: false,
                        buildProps: ['transform'],
                        properties: [{
                            property: 'transform',
                            properties: [
                                { name: 'Rotate X', property: 'transform-rotate-x' },
                                { name: 'Rotate Y', property: 'transform-rotate-y' },
                                { name: 'Rotate Z', property: 'transform-rotate-z' },
                                { name: 'Scale X', property: 'transform-scale-x' },
                                { name: 'Scale Y', property: 'transform-scale-y' },
                                { name: 'Scale Z', property: 'transform-scale-z' }
                            ],
                        }]
                    }
                ]
            }

The following logging shows all the styleManagers including the Extras.
console.log("StyleManager is : ", editor.StyleManager.getConfig());
I'm guessing I'm missing something but can't see in the documentation what that could be. I've also looked at the full GrapesJS demo but still can't seem to get it to show in the side panel, The Dimensions, Typography and Decorations sectors show fine though.
Any guidance on this issue would be great.
Thanks

Create minimalist Panel left sidebar

Hi grapesjs Team

Is it possible to create a quick access left panel sidebar with the most popular blocks(text,image,2column,etc), this way is always visible because selecting any component on cavas hides it, if so, how could the same drag n drop behaviour be replicated in this new custom panel with buttons

Regards

Creation link-block with social image

I used the plugin-social but it does not work well because the images of the various social is a fontawesome, in the various email clients does not work, the images are not displayed. What would be the way to make a link-block with the images of the main social networks?

Thanks in advance

Re-order of the panels button.

Hi,. I use this grapesjs-present-newsletter preset. Is there a possible to organize its panels button possition?

Just like i want to merge the undo and redo button on the other buttons on the right side.?

Adds ability to send parameters to juice library for `get-inlined-html` command

@artf ,

I would like to have the ability to send some parameters when running the get-inlined-html command to the juice library and ,also, when the user clicks on the View Code send the parameters; openExportCommand in this case

I created this PR: #31

Take a look, please!

Any feedback, is appreciate

Responsive emails with the ability to import HTML

Hello @artf, and first of all, thank you for a great job on GrapesJS!

I would like to hear your opinion on the following case:
As a user I would like not only to create a responsive email (which is accomplished with the help of grapes-mjml), but also to be able to import an HTML tempate (this one is archieved by this plugin). But unfortunately I cannot have both of these features.

As far as I know there is no way to convert HTML to MJML, so import HTML in grapes-mjml is not really doable (please correct me if I'm wrong). Then, is there a way to create responsive columns in newsletter plugin? Maybe you plan to support conditional tags or have a workaround here?

Thanks in advance,
Maryia

References to Ajaxable and Toastr JS

The index.html for this plugin references a ./js/toastr.min.js and a ./private/ajaxable.min.js file that are not present. I could swear these were present in previous iterations.. are they created on install/build or just missing from the repo?

Background color does not get apply in Mozilla

this issue also exists in newsletter demo, open demo url in any latest version of Mozila then select any container, from right decoration section try to change background color, it does not work, same scenario working fine in Chrome.
https://grapesjs.com/demo-newsletter-editor.html

this scenario works with older version of grapesjs i.e. 0.10.7 but not with newer version.

Uneditable text with Link

This piece of HTML code (taken live from example email template) is not editable via wysiwyg editor, except for the link text.

This is caused by inserting a link into a text most likely.

<div class="c2421" style="box-sizing: border-box; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;">
  MADE BY 
  <a class="link" href="https://github.com/artf" style="box-sizing: border-box; color: rgb(217, 131, 166);">ARTUR
    ARSENIEV</a>
  <p style="box-sizing: border-box;">
  </p>
</div>

Disable some blocks

Is it possible in the options to disable or replace some blocks ?

thks

Doubts regarding React integration

Hi Guys

I've been trying to integrate Grapes in my current React Project.
I'm finding it a bit tedious to get an onChange event to get any of the changes made within the editor.
I'm using the newsletter preset.

My current config looks something like this

editor = grapesjs.init({ height: '100%', assetManager: { assets: images, upload: 0, uploadText: 'Uploading is not available in this demo' }, container: '#gjs', fromElement: true, plugins: ['gjs-preset-newsletter'] })

Thanks.

Removing 'View Code' button from panel trigger exception

Removing the 'View Code' button from the Options panel caused an exception.

var editor = grapesjs.init({ container : '#gjs', plugins: ['gjs-preset-newsletter'] }); editor.Panels.removeButton('options', 'export-template');

The error is as follows:
Uncaught TypeError: Cannot read property 'set' of null at child.<anonymous> (grapesjs-preset-newsletter.min.js:15) at triggerEvents (grapes.js:4740) at triggerApi (grapes.js:4728) at eventsApi (grapes.js:4527) at child.Events.trigger (grapes.js:4718) at grapes.js:37610

Create and Edit Template into Database

This is my code to Create a new template and insert the inline html with style into the database :

       var editor = grapesjs.init
           ({
              height: '100%',
              container : '#gjs',
              plugins: ['gjs-preset-newsletter'],
          storageManager: {
              id:'',
              type: 'remote',
              autosave: false,
              urlStore: '<?php base_url(); ?>/dragdropeditor/dragdrop/add',
              contentTypeJson: true,
              },
          });

          editor.Panels.addButton('options', [{
               id: 'save',
                    className: 'fa fa-floppy-o icon-blank',
                    command: function (editor, sender) {
                        if (sender)
                            sender.set('active', 0);
                          var html = editor.runCommand('gjs-get-inlined-html');
                          var storageManager = editor.StorageManager;
                          storageManager.store({"template-data":html})
                         // editor.store();
                          alert('Draft');

                        editor.on('storage:store', function (e) {
                          
                            console.log('CompleteHTML: ', html);
                        });
                    },

                    attributes: {title: 'Save Template'}
                }]);        

I am able to insert the template-data into database in this manner :

created_at	id	template-name	template-data
2017-10-05 12:13:09	3	first	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

My edit template code :

var id = '<?php echo $this->uri->segment('3'); ?>';

     var editor = grapesjs.init
           ({
             height: '100%',
              container : '#gjs',
              plugins: ['gjs-preset-newsletter'],
          storageManager: {
              type: 'remote',
              autosave: false,
              urlStore: '<?php echo base_url(); ?>dragdropeditor/dragdrop/add',
              urlLoad: '<?php echo base_url(); ?>dragdropeditor/dragdrop/fetch/'+id,
              contentTypeJson: true,
              },
          });

          editor.Panels.addButton
          ('options',
            [{
              id: 'save-db',
              className: 'fa fa-floppy-o',
              command: 'save-db',
              attributes: {title: 'Draft'}
            }]
          );

        editor.Commands.add
        ('save-db',
        {
            run: function(editor, sender)
            {
              sender && sender.set('active'); // turn off the button
              editor.store();
              alert('Draft');    
            }
        });

Wonder why its not loading it into urlLoad

@artf @sonnylloyd

Simple Image Component

Thank you for this great tool. Just want to know how can I make the image uploader work? Currently i don't have any idea how to do it?

PreHeader

Hi,
I need the ability to create a preheader for my emails.
I want to know if you think this is something feasible to develop from grapes and what do you consider could be the best way to do it.

fd

Is this project has regular updates? Because I need to customize more on UI and hide some functionalities. Will you guys expose those things out? or I might fork the repo and customize my self?

Customize existing blocks & buttons

How can I customize existing blocks and buttons that are added together with newsletter plugin ?? I need to add gettext translations for those.

[Bug]: "gjs-get-inlined-html" command missing from 0.2.19

editor.Commands.has('gjs-get-inlined-html') returns false.
editor.Commands.has('gjs-open-import-template') and editor.Commands.has('gjs-toggle-images') correctly return true.
As a consequence, it's currently impossible to get the inlined html to send.
grapesjs 0.14.27
grapesjs-preset-newsletter 0.2.19

Better way to create images links

Hi,

New question, can you add a better way to create an image link? For now, you need to add a link block and drag and drop an image in it and then click on the img element, click on the top arrow to return to the link block to update the link attributes... That's not user firendly. Maybe you can use the rich text editor to make it easier?

Thank you

Problems on Create Blocks Categories

Hi Art!

I'm trying to make blocks under categories to organize the presentation to my users. I would like to set two categories:

1 - With default set of blocks
2 - An another with my own custom blocks.

I've tried:

var blockManager = editor.BlockManager;
    
    blockManager.add('name-block', {
        label: '{% trans "Nome" %}',
        content: '<p>{% templatetag openvariable %}name{% templatetag closevariable %}</p>',
        category: 'Campos',
        attributes: {
            title: '{% trans "Nome" %}',
            class: 'gjs-fonts gjs-custom-field'
        }
    });

editor.on('load', function() {
        //Insert loading code here
        blockManager.getAll().reset();
        
    });

But no effect at my view:

I would like to do something like that:

But on newsletter preset it is appearing not possible. Any clue on solve that?

Thanks a lot!

Save Template Code in Database

I need to save created templates in database.

Can anyone atleast tell me how to call html code so i can save?

Need to stop behavior ; Extra default style added to each tag , and commentize none HTML tags like </#list>

Hi

Explanation
Am using news-letter-preset its cooool

Problem
I have un desired behavior

More Info About The Problem
Check below two links and try do export can you tell the difference here is a screen shot :)

with gjs-preset-newsletter plugin https://jsfiddle.net/shareefhiasat/Lup78L17/5/

with gjs-blocks-basic plugin https://jsfiddle.net/shareefhiasat/4q3kxthj/1/

So What ?
Its the same fiddle ; the only difference is the plugin

What is Expected
I expect no extra attributes like style to be added to the tag in my content

UPDATE

I could stop the style from appearing but there is extra double quotations now check this
( How like this by commenting css , ( i have no idea what is the impact of this so please advise ) )

Now Another Problem

These double quotations is wrong in free marker syntax render in back end .

@artf can you advise thanks

In Short
Original code that must stay as is
<#assign currentDate=. now></#assign>

Becomes

<#assign currentDate="." now="">

And this is wrong , throws exception , not correct syntax !

UPDATE

After alot of more tries, i decided to try adding it as component now its ok
after i commented this line
https://github.com/artf/grapesjs-preset-newsletter/blob/601ad471b29c2ffb08bc07ad9c8ecc0b6064dd21/src/openExportCommand.js#L44

And replace with

codeViewer.setContent(tmpl);

But still there is a problem which is </#list> dose not appear on screen or source of HTML why.

https://jsfiddle.net/3xhqkc96/12/

@rgcarrasqueira @santiph @artf

Emails not rendering well in clients

Hi,

I'm trying to use this library to create some emails and send them, so I use the combinaison of grapesjs + this preset and send the output of the command gjs-get-inlined-html. But when I open it in Outlook or Gmail, the email is very different. I even tried to copy the demo newsletter and the result was not satisfying.

Should I add something else than the ouput of the command gjs-get-inlined-html to get a well rendered email in all major clients ?

Thanks in advance.

MJML support

Hi,

Can you support MJML?
https://github.com/mjmlio/mjml

It seems that you do not support HTML templates generated by MJML.
I can't save my HTML templates generated by MJML.

Thanks,

gjs-get-inlined-html fails to update

The issue is that gjs-get-inlined-html command fails to update the hidden input to save the email template, it shows still "old" code despite the changes I've made to the template via editor.

Below you'll find a piece of the code that I'm using to save the templates in a modal provided by this editor.

  cmd.add('save-template', {
    run(editor, sender) {
      sender.set('active', 0);
      const modalContent = modal.getContentEl();
      const mdlDialog = document.querySelector('.gjs-mdl-dialog');

      // wyciaga zle tutaj
      const cmdGetCode = cmd.get('gjs-get-inlined-html');
      contentEl.value = cmdGetCode.run(editor);
      console.log(contentEl.value)
      if (qs('id')) {
        $.get(`/${ue.currentAppKey}/emails/api/template/${qs('id')}/`, (res) => {
          templateName.value = res.name;
          templateDesc.value = res.description;
        });
      }
      mdlDialog.className += ` ${mdlClass}`;
      saveTemplate.style.display = 'block';
      modal.setTitle(gettext('Save template'));
      modal.setContent('');
      modal.setContent(saveTemplate);
      modal.open();
      modal.getModel().once('change:open', () => {
        mdlDialog.className = mdlDialog.className.replace(mdlClass, '');
        // clean status
      });
    },
  });

My best shot is that it fails on this piece of code

contentEl.value = cmdGetCode.run(editor);

It supposed to update the hidden input in my form, but the code is still with old values, so whenever I'll save the template, it will be the old one.

Import button submits form

While Grapes editor is a part of bigger form, button "Import" on modal executes submit, because by deafult in HTML5, tag without type="button" is a submit.

I used preventDefault() in btnImp.onclick function, it solves the problem.

Alternatively, attribute type="button" in document.createElement("button") should also work.

Link image

First, great work! Second, how do I link an image? Right now I export my template, manually link images and the import. Thanks!

how to store html and inline css

i want to store html and inline css in some variable, how can i do it in newsletter
and one more thing how can i align image to center, its not working.
Thanks @artf
Please help me for solving this issue @artf

Where's the newsletter CSS CDN?

In your usage example for the newsletter plugin, you show:

<link href="path/to/grapes.min.css" rel="stylesheet"/>
<link href="path/to/grapesjs-preset-newsletter.css" rel="stylesheet"/>

But you only have one CDN link for the js:

https://unpkg.com/grapesjs-preset-newsletter

So there isn't a CDN for grapesjs-preset-newsletter.css? Or do I just not understand how unpkg works?

Style tag.

How can I add Style tag with Media queries to a custom component?

Do not remove HTML comment

Whene you put some content to edit with grapesjs, the editor remove all HTML comment like
<!--[if !mso]><!-- --> so it's impossible to create good responsive template.

Can you fix that behavior ?

newsletter plugin run build error

Hello,
I've cloned and installed the newsletter plugin It works as expected with npm start. I cannot seem to npm run build due to the following error.

ERROR in ./dist/grapesjs-preset-newsletter.min.js from UglifyJs
Invalid assignment [./dist/grapesjs-preset-newsletter.min.js:86,164]
npm ERR! Linux 3.10.0-042stab132.1
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "run" "build"
npm ERR! node v6.14.1
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: cross-env WEBPACK_ENV=prod && npm run v:patch && webpack && npm run build:css
npm ERR! Exit status 2

Plase upload a copy of grape.min.js whithout minified

Plase upload a copy of grape.min.js whithout minified the human sintax spell grape.js for version grapesjs - 0.10.7, best regards

[Feature]Make the option importPlaceholder to accept functions as well

in openImportCommand, there is this line:
codeViewer.setContent(opt.importPlaceholder || '');

In order to set the content import placeholder dynamically, it would be useful to check if it is a function then return the result of the function, otherwise use it as a variable.
So it could be:

var importPlaceholder = (typeof opt.importPlaceholder === 'function') ? opt.importPlaceholder() : opt.importPlaceholder;
codeViewer.setContent(importPlaceholder || '');

Unable to open the index.html

Hi all

After I execute npm start it shows

$ npm start

[email protected] start C:\Users\a233243\grapesjs-preset-newsletter
cross-env WEBPACK_ENV=dev ./node_modules/.bin/webpack-dev-server --progress --colors & npm run build:css -- -w

10% building modules 1/1 modules 0 active
Project is running at http://localhost:8080/
webpack output is served from /
Hash: bbf63f4da00946016442
Version: webpack 3.11.0
Time: 5037ms

But when I go to http://localhost:8080//index.html it shows just a blank page. What can I do?

Get export with inline css

Hi,
So I am trying to get the html with inline css so save to db.

(using this command to get the data)

{
         id: "save-template",
         run: function(editor, senderBtn) {
                 // Deactivate button
                 senderBtn.set("active", false);
                 var html = editor.getHtml();
                 var css = editor.getCss();
                 var exportHtml = // something to get the inline css                     
                 mail.saveTemplate(html, css); // my save function
          },
          stop: function(editor, sender) {
                  // do something
                 }
         }

Since there's not that much documentation I am not really sure how to access this.
Any help would be appreciated :)

how to call the gjs-get-inlined-html command

Please help me figure out how to call the gjs-get-inlined-html command.

Breaks when building with Angular6 in production Model

The plugins works fine locally when it is built with no optimisations in angular i.e. through following command

ng build --configuration staging --buildOptimizer=false --optimization=false

However when I attempt to build my project with simple ng build --configuration, it breaks at https://github.com/artf/grapesjs-preset-newsletter/blob/master/src/commands.js#L10 giving exception that r is not function r being tglImagesCommand

Has anybody experienced this with angular?

Done

Add border top, bottom, left, right individually to Decorations.

There no option to add border top, bottom, left, right individually to cell, so i try to add new one by this way
editor.StyleManager.addProperty('Decorations', { name: 'Border right', property: 'border-right', type: 'composite', properties: [{ name: 'Width', type: 'integer', units: ['px', 'em', 'rem'], property: 'border-right-width', },{ name: 'Style', type: 'select', property: 'border-right-style', options: [ {value: 'none'}, {value: 'solid'}, {value: 'dotted'}, {value: 'dashed'}, {value: 'double'}, {value: 'groove'}, {value: 'ridge'}, {value: 'inset'}, {value: 'outset'} ] }, { name: 'Color', type: 'color', property: 'border-right-color', }] });
But it does not appear. How can i fix it?

Store the html and inline css in Editor.Store()

I am trying to store the html and inline css , can you please in how to pass it to editor.store() function.
@artf

editor.Commands.add`
        ('save-db',
        {
            run: function(editor, sender)
            {
              sender && sender.set('active'); // turn off the button
              var html = editor.runCommand('gjs-get-inlined-html');
              editor.store();
              alert('Draft');
              console.log(html);

              editor.on('storage:store', function(e) {
                    console.log('Stored ', e);
              });         
            }
        });

Please recheck my code. @sonnylloyd @artf
I want to store inline html

var html = editor.runCommand('gjs-get-inlined-html');

into mysql database using
editor.store() function

How to run import command on another event?

I'm using the new GrapeJS which let me append the panels to other elements, so I have my menu where all the actions are happening but I can't find out how to run the import command on another element using editor.runCommand('name') or something else.

How can I achieve this?

Grapes skin overridden

When using both GrapesJs and grapesjs-preset-newsletter styles, $mainColor set in grapes' variables is being overridden

https://github.com/artf/grapesjs-preset-newsletter/blob/master/src/style/main.scss#L72
I've created #14 to fix it

Link element(or Link block) , I cant find how/where to set href

Hi @artf can you please have a minute to look at this issue.

Problem : i cant set the href for news letter preset

Steps to reproduce:
Please follow the steps:

1. go to the demo http://grapesjs.com/demo-newsletter-editor.html of newsletter preset.
2. try add link element block
3. click on it and try to set or change the link , ! just dimension/Typography/Decorations

Regards

Tool tips for main functions are broken

The tooltips for StyleManager, BlockManager, LayerManager, Component Manager, seem not to be working with this preset. They are broken in the demo as well.

Also, with my implementation, I'm not getting the fancy tooltips, just plain black-on-grey ones.

Am I doing something wrong?

How does one build a newsletter from scratch?

I'm trying to implement this for non-technical end users to make their own email newsletters, but I don't get how to make something that looks like the demo. How does the container and width get set up? Am I supposed to initialize this with some kind of boilerplate template? How is this supposed to work?

Also, the newsletter mentions testing with PutsMail? Is that an option I can enable?

Thanks for any assistance.

Can we use external css link

I use this plugin with grapesjs.but I cannot external css link when importing html content.Inline css is working but external link such as bootstrap is not working.

Unable to add a link on a button

Hey guys,

I'm getting some errors when I try to add a link on a button. The error is reproducible on the demo https://grapesjs.com/demo-newsletter-editor.html

Please advice,

Thx

Icon for block

When I create block, I want to have an ability to add an Icon for my block :

blockManager.add('page-id', {
      category: 'Basic',
      label: 'Page',
      content: '<section class="bdg-sect"></section>',
       attributes: {
              class: 'gjs-fonts gjs-custom-field'
        } 
});
 

Question: Combining blocks and style manager on a panel

I am trying to build a custom "simple-edit panel" and I am trying to combine a few (custom) blocks on the panel and also some buttons.

First of all. I've tried to read the documentation (for the main project) but maybe I am missing something or its not there yet..

I have "removed" the class tree view and my idea is to take that spot and build a custom menu in its place. Not sure the best way to go about this. I did some tests first just filling the views-container panel but my guess is this is not the best way to do this.

Any help would be appreciated :)