<!-- 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.

The editors

For more information about the editors go here.