How to use grapesjs - 10 common examples

public firstUpdated() {
    this._editor = gjs.init({
      // Indicate where to init the editor. You can also pass an HTMLElement
      container: this.shadowRoot!.querySelector('#gjs'),
      // Get the content for the canvas directly from the element
      // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
      components: this._initialValue,
      // Size of the editor
      height: '300px',
      width: 'auto',
      // Disable the storage manager for the moment
      storageManager: { type: null },
      // Avoid any default panel
      panels: { defaults: [] },

      rte: {
        actions: ['bold', 'italic', 'underline', 'strikethrough']
      },

import grapesjs from 'grapesjs';

export default grapesjs.plugins.add('gjs-plugin-filestack', (editor, opts = {}) => {
  let c = opts;
  let config = editor.getConfig();
  let pfx = config.stylePrefix || '';
  let btnEl;

  let defaults = {
    // Filestack's API key
    key: '',

    // Custom button element which triggers Filestack modal
    btnEl: '',

    // Text for the button in case the custom one is not provided
    btnText: 'Add images',

    // Filestack's options

import grapesjs from 'grapesjs';
import pluginNavbar from 'grapesjs-navbar';
import pluginCountdown from 'grapesjs-component-countdown';
import pluginExport from 'grapesjs-plugin-export';
import pluginAviary from 'grapesjs-aviary';
import pluginFilestack from 'grapesjs-plugin-filestack';

import commands from './commands';
import blocks from './blocks';
import components from './components';
import traits from './traits';
import panels from './panels';
import styles from './styles';

export default grapesjs.plugins.add('gjs-mavo', (editor, opts = {}) => {
  let config = opts;

  let defaults = {
    // Which blocks to add
    //basic: 'column1', 'column2', 'column3', 'column3-7', 'text', 'link', 'image', 'video', 'map'
    //extra: 'link-block', 'quote', 'text-basic'
    //form: 'form', 'input', 'textarea', 'select', 'button', 'label', 'checkbox', 'radio'
    blocks: ['column1', 'column2', 'column3', 'column3-7', 'divider', 'text', 'link', 'image', 'video', 'map', 'link-block', 'quote', 'text-basic', 'form', 'input', 'textarea', 'select', 'button', 'label', 'checkbox', 'radio'],
    
    // Modal import title
    modalImportTitle: 'Import',

    // Modal import button text
    modalImportButton: 'Import',

    // Import description inside import modal

import grapesjs from 'grapesjs';

const stopPropagation = e => e.stopPropagation();

export default grapesjs.plugins.add('gjs-plugin-ckeditor', (editor, opts = {}) => {
  let c = opts;

  let defaults = {
    // CKEditor options
    options: {},

    // On which side of the element to position the toolbar
    // Available options: 'left|center|right'
    position: 'left',
  };

  // Load defaults
  for (let name in defaults) {
    if (!(name in c))
      c[name] = defaults[name];
  }

import grapesjs from 'grapesjs';
import loadCommands from './commands';
import loadTraits from './traits';
import loadComponents from './components';
import loadBlocks from './blocks';
import loadDevices from './devices';

export default grapesjs.plugins.add('grapesjs-blocks-bootstrap4', (editor, opts = {}) => {

  window.editor = editor;

  const opts_blocks = opts.blocks || {};
  const opts_labels = opts.labels || {};
  const opts_categories = opts.blockCategories || {};
  delete opts['blocks'];
  delete opts['labels'];
  delete opts['blockCategories'];

  const default_blocks = {
    default: true,
    text: true,
    link: true,
    image: true,
    // LAYOUT

import 'grapesjs/dist/css/grapes.min.css';
import grapesjs from 'grapesjs';

import 'grapesjs-mjml';

import 'grapesjs-preset-newsletter';
import 'grapesjs-preset-newsletter/dist/grapesjs-preset-newsletter.css';

import "./sandboxed-grapesjs.scss";

import axios from './axios';
import {GrapesJSSourceType} from "./sandboxed-grapesjs-shared";
import {withComponentMixins} from "./decorator-helpers";


grapesjs.plugins.add('mailtrain-remove-buttons', (editor, opts = {}) => {
    // This needs to be done in on-load and after gjs plugin because grapesjs-preset-newsletter tries to set titles to all buttons (including those we remove)
    // see https://github.com/artf/grapesjs-preset-newsletter/blob/e0a91636973a5a1481e9d7929e57a8869b1db72e/src/index.js#L248
    editor.on('load', () => {
        const panelManager = editor.Panels;
        panelManager.removeButton('options','fullscreen');
        panelManager.removeButton('options','export-template');
    });
});


@withComponentMixins([
    withTranslation
])
export class GrapesJSSandbox extends Component {
    constructor(props) {
        super(props);

componentDidMount() {
    createjs.Ticker.framerate = 13

    const editor = grapesjs.init({
      container: this.ref.current,

      components: '',
      fromElement: false,

      height: '100vh',
      width: 'auto',

      autorender: 0,

      storageManager: {
        id: '',
        type: 'redux',
        stepsBeforeSave: 0
      },

componentDidMount () {
    const editor = grapesjs.init({
      container: this.editor.current,

      components: '',
      fromElement: false,

      height: '100vh',
      width: 'auto',

      autorender: 0,

      storageManager: {
        id: '',
        type: 'redux',
        stepsBeforeSave: 1
      },

initBuilder: function() {
            this.builder = GrapesJS.init(_.extend(
                {}
                , {
                    avoidInlineStyle: 1,
                    container: this.getContainer()
                }
                , this._prepareBuilderOptions()));

            mediator.trigger('grapesjs:created', this.builder);

            this.builderDelegateEvents();

            GrapesJSModules.call('components', {
                builder: this.builder
            });
        },

useEffect(() => {
      if (!editor) {

        let plugins = [
          gjsBasicBlocks,
          ...props.plugins
        ];
        if (webpage) {
          plugins = [...plugins, gjsPresetWebpage];
        }
        if (newsletter) {
          plugins = [...plugins, gjsPresetNewsletter];
        }

        const e = GrapesJS.init({
          blockManager,
          container: `#${id}`,
          fromElement: true,
          plugins,
          storageManager
        });

        const defaultType = e.DomComponents.getType('default');
        const defaultModel = defaultType.model;
        const defaultView = defaultType.view;
        components.forEach((component: GComponent) => {
          e.DomComponents.addType(component.type, {
            model: defaultModel.extend(
              {
                defaults: Object.assign({}, defaultModel.prototype.defaults)
              },