page-O-builder

Documentation


Let's make it as simple as possible.

Go to the GitHub page and clone or download the repo:

The repo contains all the necessary files and a simple example of how to implement the page-O-builder in your own site.

Basically, that was it.

Everything is explained in more detail below.


Description

There are two basic scenarios:

  • working with the page builder to create or update a page
  • displaying the created page content


Some editors are discussed in more detail at the end.


Working with the page builder to create or update a page


1. Implement all files


In the <head></head> tag:

<!-- CSS for the Page Builder  -->
<link rel="stylesheet" href="./your-path-to-the-file/page-o-builder.editor_v.1.0.0.min.css" />

<!-- optional: fancybox -->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"/>

<!-- optional: FrissBee Audio Player -->
<script src="./your-path-to-the-file/frissbee-audio-player_v.1.0.4.js"></script>

<!-- optional: FrissBee Accordion - use "defer" -->
<script src="./your-path-to-the-file/frissbee-accordion_v.1.0.0.js" defer></script>
<link rel="stylesheet" href="./your-path-to-the-file/frissbee-accordion.css">

<!-- optional: Little Image Viewer -->
<script src="./your-path-to-the-file/little-image-viewer_v.1.2.0.js"></script>
<link rel="stylesheet" href="./your-path-to-the-file/little-image-viewer.css" />


After the <body></body> tag:

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://rawcdn.githack.com/RickStrahl/jquery-resizable/0.35/dist/jquery-resizable.min.js"></script>

<!-- prismJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/line-highlight/prism-line-highlight.min.js"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/components/prism-php.min.js"
    integrity="sha512-6UGCfZS8v5U+CkSBhDy+0cA3hHrcEIlIy2++BAjetYt+pnKGWGzcn+Pynk41SIiyV2Oj0IBOLqWCKS3Oa+v/Aw=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"
    integrity="sha512-QXFMVAusM85vUYDaNgcYeU3rzSlc+bTV4JvkfJhjxSHlQEo+ig53BtnGkvFTiNJh8D+wv6uWAQ2vJaVmxe8d3w=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"
    integrity="sha512-sijCOJblSCXYYmXdwvqV0tak8QJW5iy2yLB1wAbbLc3OOIueqymizRFWUS/mwKctnzPKpNdPJV3aK1zlDMJmXQ=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
></script>

<!-- trumbowyg text editor -->
<script src="./your-path-to-the-file/trumbowyg.v2.28.0.min.js"></script>
<script src="./your-path-to-the-file/trumbowyg.plugins.min.js"></script>
<script>
    $.trumbowyg.svgPath = './your-path-to-the-file/icons.svg';
</script>

<!-- page-o-builder file -->
<script src="./your-path-to-the-file/page-o-builder.editor_v.1.0.0.min.js"></script>

<!-- your own JS file -->
<script src="./your-path-to-the-file/my-script.js"></script>

<script>
  // optional: fancybox
  Fancybox.bind('[data-fancybox]', {
      // Your custom options
      // see: https://fancyapps.com/fancybox/api/options/
   });
</script>


The order is important!


I know that a whole series of files have to be included. 

But...

The implementation of the page-o-builder is quite simple.


2. Implement the <page-o-builder> Element and the output/preview <div></div> Element within the <body></body>


Default - new page (no data)

<!-- Implement the "page-o-builder" tag. Set the attribute "no-data" -->
<page-o-builder container="container" output=".preview-output" no-data></page-o-builder>

<!-- The output / preview HTML element. Note: "display: none" must be set. -->
<div class="preview-output" style="display: none;></div>


Default - edit an existing page (with data)

<!-- Implement the "page-o-builder" tag. -->
<page-o-builder container="container" output=".preview-output"></page-o-builder>

<!-- The output / preview HTML element. Note: "display: none" must be set. -->
<div class="preview-output" style="display: none;></div>


With all optinal editors - new page (no data)

<!-- Implement the "page-o-builder" tag. Set the attribute "no-data"  -->
<page-o-builder container="container" output=".preview-output" is-light-box is-frissbee-player is-accordion is-little-image-viewer no-data></page-o-builder>

<!-- The output / preview HTML element. Note: "display: none" must be set. -->
<div class="preview-output" style="display: none;></div>


With all optinal editors - edit an existing page (with data)

<!-- Implement the "page-o-builder" tag. -->
<page-o-builder container="container" output=".preview-output" is-light-box is-frissbee-player is-accordion is-little-image-viewer></page-o-builder>

<!-- The output / preview HTML element. Note: "display: none" must be set. -->
<div class="preview-output" style="display: none;></div>


Note: The output area for the preview is therefore not integrated in the page-o-builder so that you can implement the integration according to your own ideas.


The attributes


The <page-o-builder></page-o-builder> Element has the following attributes:

  • container 
    • =>  for YOUR container CSS wrapper class
  • output 
    • => class name or id of the output / preview HTML element.
  • no-data 
    • => When a new page is created (meaning no data is loaded) this attribute must be set. No value is required. If data is loaded, this attribute must be removed.
  • is-light-box 
    • => If the fancybox is implemented, this attribute must be specified. No value is required.
  • is-frissbee-player 
    • => If the FrissBee Audio Player is implemented, this attribute must be specified. No value is required.
  • is-accordion 
    • => If the FrissBee Accordion is implemented, this attribute must be specified. No value is required.
  • is-little-image-viewer 
    • => If the Little Image Viewer is implemented, this attribute must be specified. No value is required.


3. The database


The data of a created page must be stored persistently in a database.

The page-O-builder needs 2 columns in a database table:

  • for the editor data (contentEditor) and
  • for the data of the page (contentPage)


There is an example database in the GitHub repo.


4. Save the data in the Database


To save the data, you get the data via the getContent() function as object: { contentEditor: <data-object>, contentPage: <data-string> }.

Example:

const pageBuilder = document.querySelector('page-o-builder');
const data = pageBuilder.getContent();

console.log('Content Editor', data.contentEditor);
console.log('Content Page', data.contentPage);

// YOUR function to save a new page
insertData(JSON.stringify(data.contentEditor), data.contentPage);

// YOUR function to save an existing page
saveData(JSON.stringify(data.contentEditor), data.contentPage, idContent);


5. Edit an existing page


To edit a page stored in the database, the data must be queried from the database and then transferred to the page-o-builder.

How you query the data is entirely up to you. There is a sample in the GitHub repo.

You can transfer the data to the page-o-builder with the setContentEditor() function.

Example:

const pageBuilder = document.querySelector('page-o-builder');

const contentEditor = yourFunctionToGetThe_contentEditor_DataFromTheDatabase();

pageBuilder.setContentEditor(contentEditor);


The contentPage data does not need to be transferred to the page-o-builder, as the page-o-builder generates it from the contentEditor data.


Displaying the created page content


1. Implement all files


In the <head></head> tag:

<!-- the page-o-builder JavaScript file - use "defer" - HERE THE "page-o-builder.show.page" FILE (not the "page-o-builder.editor" file) -->
<script src="assets/js/page-o-builder.show-page_v.1.0.0.js" defer></script>

<!-- optional: fancybox -->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"/>

<!-- optional: FrissBee Audio Player -->
<script src="./assets/js/frissbee-audio-player_v.1.0.4.js"></script>

<!-- optional: FrissBee Accordion - use "defer" -->
<script src="./assets/js/frissbee-accordion_v.1.0.0.js" defer></script>
<link rel="stylesheet" href="assets/css/frissbee-accordion.css">

<!-- optional: Little Image Viewer -->
<script src="./assets/js/little-image-viewer_v.1.2.0.js"></script>
<link rel="stylesheet" href="./assets/css/little-image-viewer.css" />


After the <body></body> tag:

<script>
    // optional: fancybox
    Fancybox.bind('[data-fancybox]', {
        // Your custom options
        // see: https://fancyapps.com/fancybox/api/options/
      });
  </script>


2. Displaying the page


It is entirely up to you to query the contentPage data from the database and display it on the page.

There is a PHP example in the GitHub repo. Customize it according to your wishes.


The contentEditor data is of course not required.


A few words about some of the editors


Text editor


The page-o-builder uses the Trumbowyg WYSIWYG text editor.

If you only want to use the basic options of the text editor, leave out the trumbowyg.plugins.min.js file.

More information about the Trumbowyg editor can be found here.


Image editor


With the image editor you have three options:

  • Insert image
  • Insert image that can also be used as a link
  • Show image in a lightbox when you click on it

The fancybox is used for the lightbox.

You can find more information about the fancybox, including the configuration, here.

Without configuration, the fancybox is used in full mode, i.e. the way it is usually used anyway.

The implementation of the lightbox is optional.


If the FancyBox is used, the is-light-box attribute must be set in the <page-o-builder> element.

Example:

<page-o-builder container="container" output=".preview-output" is-light-box></page-o-builder>


FrissBee Player


The FrissBee Audio Player can be used to have more options when integrating an audio file than with the standard audio player.

More information about the FrissBee Audio Player can be found here.

The implementation of the FrissBee Player is optional.


If the FrissBee Player is used, the is-frissbee-player attribute must be set in the <page-o-builder> element.

Example:

<page-o-builder container="container" output=".preview-output" is-frissbee-player></page-o-builder>



Accordion Editor


The accordion can be styled with CSS if you want a different design than the standard design.

For more information see this link.

The implementation of the Accordion Editor is optional.


If the Accordion Editor is used, the is-accordion attribute must be set in the <page-o-builder> element.

Example:

<page-o-builder container="container" output=".preview-output" is-accordion></page-o-builder>



Image Viewer Editor


The Image Viewer Editor contains the Little Image Viewer.

The Little Image Viewer is an image slider. It can be styled with CSS.

For more information see this link.

The implementation of the Image Viewer Editor is optional.


If the AImage Viewer Editor is used, the is-little-image-viewer attribute must be set in the <page-o-builder> element.

Example:

<page-o-builder container="container" output=".preview-output" is-little-image-viewer></page-o-builder>