@serpstat/pagebuilder NPM

Page builder

Dev Documentation

User Documntation

Development

npm install npm run start

Open:

http://localhost:8085/

Add new component

Create new forlder in src/components.
Add index.js

export default function NewComponent(editor) {
}

Add style file for component (optional). Naming by template NewComponent.style.scss.
Add new component to file src/components/index.js

 ...
 require('./NewComponent').default(editor);
}

Usage Serpstat admin panel

For example see file backend/views/pagebuilder_script/pagebuilder_script.php in prodvigator repo.

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<link href="https://unpkg.com/@serpstat/pagebuilder@2.1.39/dist/css/pagebuilderStyles.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs@0.19.5/dist/grapes.min.js"></script>
<script src="https://unpkg.com/@serpstat/pagebuilder@2.1.39/dist/dist/pagebuilder.min.js"></script>

<script>
{
  const openPageBuilderBtn = document.querySelectorAll('.open-in-page-builder');

  function setReadyHtmlCss({ destinationResultHtmlId, html, css }) {
    const el = document.getElementById(destinationResultHtmlId);

    el.value = [
      `<style>${css}</style>`,
      html.replace('<body>', '').replace('</body>', ''),
    ].join('');
  }

  const builderVisibility = {
    hide(pagebilderContainerId) {
      const editorWrapp = document.getElementById(pagebilderContainerId);

      editorWrapp.style.display = 'none';
      document.querySelector('html').style.fontSize = '10px';
    },
    show(pagebilderContainerId) {
      const editorWrapp = document.getElementById(pagebilderContainerId);
      editorWrapp.style.display = 'block';
      editorWrapp.style.width = '100%';
      editorWrapp.style.position = 'fixed';
      editorWrapp.style.zIndex = '10000';
      editorWrapp.style.left = 0;
      editorWrapp.style.top = 0;
      document.querySelector('html').style.fontSize = '16px';
    }
  };

  try {
    for (const btn of openPageBuilderBtn) {
      let gEditor = null;

      function runEditorOnClick({
        storageDocId,
        destinationResultHtmlId,
        pagebilderContainerId,
        storageTextareaSelector,
      }) {
        return runEditor({
          container: `#${pagebilderContainerId}`,
          storageDocId: `${window.location.hostname}_${storageDocId}`,
          dependenciesStyles: [
            'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&amp;subset=latin,cyrillic&amp;display=swap',
            'https://serpstat.com/css/base_global.css',
            'https://serpstat.com/css/dialog.css?518901310',
            'https://unpkg.com/@serpstat/pagebuilder@2.1.39/dist/css/pagebuilder.css'
          ],
          saveAndCloseCallback() {
            const html = gEditor.getHtml({ cleanId: true });
            const css = gEditor.getCss();

            setReadyHtmlCss({
              destinationResultHtmlId, html, css
            });

            builderVisibility.hide(pagebilderContainerId);
          },
          assetManagerConfig: {
            upload: '/site/upload_image',
            uploadName: 'uploadfile',
            multiUpload: false,
            customFetch(url, fetchOpts) {
              return fetch(url, fetchOpts).then(res =>
                ((res.status / 200) | 0) == 1 ?
                  res.json().then(res => {
                    return {
                      data: [res.filelink],
                    }
                  }) :
                  res.text().then(text => Promise.reject(text)
                  )
              );
            }
          },
          storageManager: {
            type: 'textarea-storage',
            options: {
              ['textarea-storage']: {
                selector: storageTextareaSelector,
              }
            }
          }
        });
      }

      btn.addEventListener('click', function () {
        const {
          storageDocId,
          destinationResultHtmlId,
          pagebilderContainerId,
          storageTextareaSelector,
        } = this.dataset;

        if (!gEditor) {
          if (typeof runEditor === 'undefined') {
            const initContent = btn.innerText;
            btn.setAttribute('disable', true);
            btn.innerText = 'Loading builder...';

            const internal = setInterval(() => {
              if (
                typeof runEditor === 'undefined' ||
                typeof grapesjs === 'undefined'
              ) {
                return;
              };

              btn.setAttribute('disable', false);
              btn.innerText = initContent;
              gEditor = runEditorOnClick({
                storageDocId,
                destinationResultHtmlId,
                pagebilderContainerId,
                storageTextareaSelector,
              });
              builderVisibility.show(pagebilderContainerId);

              clearInterval(internal);
            }, 1000);

          } else {
            gEditor = runEditorOnClick({
              storageDocId,
              destinationResultHtmlId,
              pagebilderContainerId,
              storageTextareaSelector,
            });
            builderVisibility.show(pagebilderContainerId);
          }

          return;
        };

        builderVisibility.show(pagebilderContainerId);
      });
    }
  } catch (e) {
    console.error(e);
  }
}
</script>