Senior Web Developer

Running multiple instances of GrapesJs on one page

After many months of building a CMS and swapping an editor our several times due to not meeting business needs we finally settled on GrapesJs as it allowed flexibility for Developers, Designers and non technical people.

Once of the situations needed the content to be split so we had to make the move to have multiple editors on one page. If you're got different requirements for each editor you will need to create and object for plugins and plugin options before you run the loop to create the instances

let plugins = {
  0: {
    plugins: {},
    options: {}
  1: {
    plugins: {},
    options: {}
let editors = [];
document.querySelectorAll('.gjs').forEach((element, index) => {
  const editor = grapesjs.init({
    // Indicate where to init the editor. You can also pass an HTMLElement
    container: element,
    // Get the content for the canvas directly from the element
    // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
    fromElement: true,
    // Size of the editor
    height: '300px',
    width: 'auto',
    // Disable the storage manager for the moment
    storageManager: false,
    plugins: plugins[index].plugins,
    pluginOptions: plugins[index].options


That's all you should need to do for having multiple instances on one page.

Published: 3 months ago

© 2019 - 2021 Ben Cleverly; | Powered by Wink