FYI custom code block for grapesjs works good so far - instructions to add

henryweismann · September 21, 2021, 4:40pm

In grapesjs plugin dir:

npm i grapesjs-custom-code

then
here

mautic/mautic/blob/567ea2c251b7cb075b78c54059b86c0153ea651f/plugins/GrapesJsBuilderBundle/Assets/library/js/builder.service.js

import grapesjs from 'grapesjs';
import grapesjsmjml from 'grapesjs-mjml';
import grapesjsnewsletter from 'grapesjs-preset-newsletter';
import grapesjswebpage from 'grapesjs-preset-webpage';
import grapesjspostcss from 'grapesjs-parser-postcss';
import contentService from 'grapesjs-preset-mautic/dist/content.service';
import grapesjsmautic from 'grapesjs-preset-mautic';
import mjmlService from 'grapesjs-preset-mautic/dist/mjml/mjml.service';
import 'grapesjs-plugin-ckeditor';

// for local dev
// import contentService from '../../../../../../grapesjs-preset-mautic/src/content.service';
// import grapesjsmautic from '../../../../../../grapesjs-preset-mautic/src';
// import mjmlService from '../../../../../../grapesjs-preset-mautic/src/mjml/mjml.service';

import CodeModeButton from './codeMode/codeMode.button';

export default class BuilderService {
  editor;

This file has been truncated. show original

add

import grapesjscustomcode from 'grapesjs-custom-code';

on line 10

then in each

this.editor = grapesjs.init({

add to plugins

like
plugins: [grapesjswebpage, grapesjspostcss, grapesjsmautic, 'gjs-plugin-ckeditor',grapesjscustomcode],

Then build:
npm run build

It should be fine for all types of editors ie webpage, htmlemail and i think mjml

Works like a charm!

Jorgeh · January 25, 2022, 10:30am

Hello, thanks for the details…
I am getting this error, could you help me with it please?

Thanks a lot!

abdulwahab · July 27, 2022, 2:20pm

I am getting errors on “npm run build”. Can you please tell me where I should run this command? I mean in which directory?

abdulwahab · August 1, 2022, 8:51am

@henryweismann it didnot work on npm run build. Where should I run it ? Thanks.

Topic		Replies	Views
Adding custom blocks to GrapesJS builder Product Support mautic-4	7	4708	June 21, 2024
How to extend Mautic GrapesJS to add custom blocks? Mautic 4 Install/Upgrade Support	2	577	December 11, 2023
How grapesjs-preset-mautic can be used in mautic instance? Product Support mautic-4	7	462	November 15, 2022
How to style existing and create custom grapejs blocks? Product Support	7	536	May 22, 2023
How to add "blocks" to grapeJS builder? Development	2	509	January 25, 2022

FYI custom code block for grapesjs works good so far - instructions to add

Related topics