WordPress Gutenberg Like WYSIWYG Block Editor – Pexego

Preview:

Description:

Pexego is a JavaScript-powered WYSIWYG text editor that can be used as a page builder. Inspired by WordPress Gutenberg block editor.

How to use it:

1. Import Pexego’s stylesheet.

<link href="css/pexego.css" rel="stylesheet" />

2. Add the Pexego editor and controls to the page.

<div class="article-tools">
  <a href="#" class="pexego-section-controls-button" data-are-controls-active="1"><img class="img-svg m-r-05" src="img/svg/gear.svg" alt="Display controls">Close Controls</a>
  <a href="#" class="pexego-preview m-l-05" data-is-preview-active=""><img class="img-svg m-r-05" src="img/svg/arrows-out-simple.svg" alt="Preview">Preview</a>
</div>
<article class="pexego-container"></article>
<div class="pexego-container-output null"></div>
<div class="pexego-output"></div>

3. Add blocks to the editor.

<div class="pexego-add-sections">
  <div class="pexego-add-section-group">
    <button class="pexego-add-section pexego-add-section-paragraph"><img class="img-svg m-r-05" src="img/svg/article.svg" alt="Add paragraph">Add paragraph</button>
    <input class="null" type="file" id="pexego-add-image-input" name="pexego-add-image-input" multiple="" accept="image/*">
    <label class="pexego-add-section-image pexego-add-section" for="pexego-add-image-input">
      <img class="img-svg m-r-05" src="img/svg/image.svg" alt="Add Image">Add Image
    </label>
    <button class="pexego-add-section pexego-add-section-video"><img class="img-svg m-r-05" src="img/svg/youtube-logo.svg" alt="Add YouTube video">Add YouTuve video</button>
  </div>
  <div class="pexego-add-section-group">
    <button class="pexego-add-section pexego-add-section-title"><img class="img-svg m-r-05" src="img/svg/text-t.svg" alt="Add Title">Add Title</button>
    <button class="pexego-add-section pexego-add-section-subtitle"><img class="img-svg m-r-05" src="img/svg/text-t.svg" alt="Add Subtitle">Add Subtitle</button>
  </div>
</div>

4. Import the Pexego’s JavaScript.

<script type="module" src="js/pexego.js"></script>

5. The JavaScript to enable the editor.

import {classes} from "./pexego.js";
document.querySelectorAll('.pexego-section-controls-button').forEach(bu => {
  bu.addEventListener('click', e => {
    e.preventDefault();
    const areControlsActive = bu.dataset.areControlsActive.length > 0;
    if (areControlsActive) {
      bu.innerHTML = '<img class="img-svg m-r-05" src="/img/svg/gear.svg" alt="Display controls">Display Controls';
      document.querySelectorAll('.' + classes.sectionControls).forEach(c => {
        c.classList.add(classes.displayNone);
      });
      document.querySelectorAll('.' + classes.actionBar).forEach(ab => {
        ab.classList.add(classes.displayNone)
      });
      document.querySelectorAll('.' + classes.sectionWrapper).forEach(sw => {
        sw.classList.remove(classes.sectionWrapperBorder)
      });
      document.querySelectorAll('.' + classes.sectionWrapperType).forEach(t => {
        t.classList.add(classes.displayNone)
      });
    } else {
      bu.innerHTML = '<img class="img-svg m-r-05" src="/img/svg/gear.svg" alt="Display controls">Close Controls';
      document.querySelectorAll('.' + classes.sectionControls).forEach(c => {
        c.classList.remove(classes.displayNone);
      });
      document.querySelectorAll('.' + classes.actionBar).forEach(ab => {
        ab.classList.remove(classes.displayNone)
      });
      document.querySelectorAll('.' + classes.sectionWrapper).forEach(sw => {
        sw.classList.add(classes.sectionWrapperBorder)
      });
      document.querySelectorAll('.' + classes.sectionWrapperType).forEach(t => {
        t.classList.remove(classes.displayNone)
      });
    }
    bu.dataset.areControlsActive = areControlsActive ? '' : '1';
  });
});
document.querySelectorAll('.pexego-preview').forEach(bu => {
  bu.addEventListener('click', e => {
    e.preventDefault();
    const isPreviewActive = bu.dataset.isPreviewActive.length > 0;
    if (isPreviewActive) {
      bu.innerHTML = '<img class="img-svg m-r-05" src="/img/svg/arrows-out-simple.svg" alt="Preview">Preview';
      document.querySelector('.pexego-section-controls-button')
        .classList.remove(classes.displayNone);
      document.querySelector('header').classList.remove(classes.displayNone);
      document.querySelector('.pexego-add-sections').classList.remove(classes.displayNone);
      document.querySelectorAll('.' + classes.contentImageCaption).forEach(ic => {
          ic.classList.remove(classes.displayNone);
      });
      document.querySelectorAll(
        '.' + classes.contentParagraph + ', ' +
        '.' + classes.contentTitle + ', ' +
        '.' + classes.contentSubtitle + ', ' +
        '.' + classes.contentImageCaption
      ).forEach(el => el.contentEditable = 'true');
      document.querySelectorAll('.' + classes.actionBar).forEach(ab => {
        ab.classList.remove(classes.displayNone)
      });
      document.querySelectorAll('.' + classes.sectionControls).forEach(ab => {
        ab.classList.remove(classes.displayNone)
      });
      const controlsButton = document.querySelector('.pexego-section-controls-button');
      controlsButton.innerHTML =
        '<img class="img-svg m-r-05" src="/img/svg/gear.svg" alt="Display controls">Close Controls';
      controlsButton.dataset.areControlsActive = '1';
      document.querySelectorAll('.' + classes.sectionWrapper).forEach(sw => {
        sw.classList.add(classes.sectionWrapperBorder)
      });
      document.querySelectorAll('.' + classes.sectionWrapperType).forEach(ty => {
        ty.classList.remove(classes.displayNone);
      });
    } else {
      bu.innerHTML = '<img class="img-svg m-r-05" src="/img/svg/arrows-in-simple.svg" alt="Preview">Close Preview';
      document.querySelector('.pexego-section-controls-button').classList.add(classes.displayNone);
      document.querySelector('header').classList.add(classes.displayNone);
      document.querySelector('.pexego-add-sections').classList.add(classes.displayNone);
      document.querySelectorAll('.' + classes.contentImageCaption).forEach(ic => {
        if (!ic.textContent.trim().length) {
          ic.classList.add(classes.displayNone);
        }
      });
      document.querySelectorAll(
        '.' + classes.contentParagraph + ', ' +
        '.' + classes.contentTitle + ', ' +
        '.' + classes.contentSubtitle + ', ' +
        '.' + classes.contentImageCaption
      ).forEach(el => el.contentEditable = 'false');
      document.querySelectorAll('.' + classes.actionBar).forEach(ab => {
        ab.classList.add(classes.displayNone)
      });
      document.querySelectorAll('.' + classes.sectionControls).forEach(ab => {
        ab.classList.add(classes.displayNone)
      });
      const controlsButton = document.querySelector('.pexego-section-controls-button');
      controlsButton.innerHTML =
        '<img class="img-svg m-r-05" src="/img/svg/gear.svg" alt="Display controls">Display Controls';
      controlsButton.dataset.areControlsActive = '';
      document.querySelectorAll('.' + classes.sectionWrapper).forEach(sw => {
        sw.classList.remove(classes.sectionWrapperBorder)
      });
      document.querySelectorAll('.' + classes.sectionWrapperType).forEach(ty => {
        ty.classList.add(classes.displayNone);
      });
    }
    bu.dataset.isPreviewActive = isPreviewActive ? '' : '1';
  });
});

Changelog:

01/09/2024

• A couple of tweaks and a minor refactor

02/11/2022

• Add a new paragraph automatically when a new image/video is added

02/09/2022

• Remove unused SVGs and CSS