### Install Export to PDF via npm

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/plugins/exportpdf/README.md

Run this command in your terminal to install the plugin package.

```bash
npm i ckeditor4-plugin-exportpdf
```

--------------------------------

### Verify CKEditor Installation

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/README.md

Access the sample index page to confirm that the CKEditor installation is functioning correctly.

```text
http://<your site>/<CKEditor installation path>/samples/index.html
```

```text
http://www.example.com/ckeditor/samples/index.html
```

--------------------------------

### Install via Composer

Source: https://github.com/hansschouten/phpagebuilder/blob/master/README.md

Run this command in your terminal to add PHPagebuilder as a dependency.

```bash
composer require hansschouten/phpagebuilder
```

--------------------------------

### Full XHTML Compliant Editor Configuration

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/xhtmlstyle.html

A comprehensive configuration example defining styles, font settings, colors, indentation, and justification classes for full XHTML compliance.

```javascript
CKEDITOR.replace( 'editor1', { 
	/* 
	 * Style sheet for the contents 
	 */ 
	contentsCss: 'assets/outputxhtml/outputxhtml.css', 
	/* 
	 * Special allowed content rules for spans used by 
	 * font face, size, and color buttons. 
	 * 
	 * Note: all rules have been written separately so 
	 * it was possible to specify required classes. 
	 */ 
	extraAllowedContent: 'span(!FontColor1);span(!FontColor2);span(!FontColor3);' + 'span(!FontColor1BG);span(!FontColor2BG);span(!FontColor3BG);' + 'span(!FontComic);span(!FontCourier);span(!FontTimes);' + 'span(!FontSmaller);span(!FontLarger);span(!FontSmall);span(!FontBig);span(!FontDouble)', 
	/* 
	 * Core styles. 
	 */ 
	coreStyles_bold: { element: 'span', attributes: { 'class': 'Bold' } }, 
	coreStyles_italic: { element: 'span', attributes: { 'class': 'Italic' } }, 
	coreStyles_underline: { element: 'span', attributes: { 'class': 'Underline' } }, 
	coreStyles_strike: { element: 'span', attributes: { 'class': 'StrikeThrough' }, overrides: 'strike' }, 
	coreStyles_subscript: { element: 'span', attributes: { 'class': 'Subscript' }, overrides: 'sub' }, 
	coreStyles_superscript: { element: 'span', attributes: { 'class': 'Superscript' }, overrides: 'sup' }, 
	/* 
	 * Font face. 
	 */ 
	// List of fonts available in the toolbar combo. Each font definition is 
	// separated by a semi-colon (;). We are using class names here, so each font 
	// is defined by {Combo Label}/{Class Name}. 
	font_names: 'Comic Sans MS/FontComic;Courier New/FontCourier;Times New Roman/FontTimes', 
	// Define the way font elements will be applied to the document. The "span" 
	// element will be used. When a font is selected, the font name defined in the 
	// above list is passed to this definition with the name "Font", being it 
	// injected in the "class" attribute. 
	// We must also instruct the editor to replace span elements that are used to 
	// set the font (Overrides). 
	font_style: { element: 'span', attributes: { 'class': '#(family)' }, overrides: [ { element: 'span', attributes: { 'class': /^Font(?:Comic|Courier|Times)$/ } } ] }, 
	/* 
	 * Font sizes. 
	 */ 
	fontSize_sizes: 'Smaller/FontSmaller;Larger/FontLarger;8pt/FontSmall;14pt/FontBig;Double Size/FontDouble', 
	fontSize_style: { element: 'span', attributes: { 'class': '#(size)' }, overrides: [ { element: 'span', attributes: { 'class': /^Font(?:Smaller|Larger|Small|Big|Double)$/ } } ] } , 
	/* 
	 * Font colors. 
	 */ 
	colorButton_enableMore: false, 
	colorButton_colors: 'FontColor1/FF9900,FontColor2/0066CC,FontColor3/F00', 
	colorButton_foreStyle: { element: 'span', attributes: { 'class': '#(color)' }, overrides: [ { element: 'span', attributes: { 'class': /^FontColor(?:1|2|3)$/ } } ] }, 
	colorButton_backStyle: { element: 'span', attributes: { 'class': '#(color)BG' }, overrides: [ { element: 'span', attributes: { 'class': /^FontColor(?:1|2|3)BG$/ } } ] }, 
	/* 
	 * Indentation. 
	 */ 
	indentClasses: [ 'Indent1', 'Indent2', 'Indent3' ], 
	/* 
	 * Paragraph justification. 
	 */ 
	justifyClasses: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyFull' ], 
	/* 
	 * Styles combo. 
	 */ 
	stylesSet: [ { name: 'Strong Emphasis', element: 'strong' }, { name: 'Emphasis', element: 'em' }, { name: 'Computer Code', element: 'code' }, { name: 'Keyboard Phrase', element: 'kbd' }, { name: 'Sample Text', element: 'samp' }, { name: 'Variable', element: 'var' }, { name: 'Deleted Text', element: 'del' }, { name: 'Inserted Text', element: 'ins' }, { name: 'Cited Work', element: 'cite' }, { name: 'Inline Quotation', element: 'q' } ] });
```

--------------------------------

### Basic XHTML Configuration Snippet

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/xhtmlstyle.html

A minimal example showing how to initialize CKEditor with custom core styles for bold and italic text using span elements.

```javascript
CKEDITOR.replace( '_textarea_id_', {
	contentsCss: 'assets/outputxhtml.css',

	coreStyles_bold: {
		element: 'span',
		attributes: { 'class': 'Bold' }
	},
	coreStyles_italic: {
		element: 'span',
		attributes: { 'class': 'Italic' }
	},

	...
});
```

--------------------------------

### Register External Plugin

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/plugins/exportpdf/README.md

Use the addExternal method to register the plugin when installed via npm.

```javascript
CKEDITOR.plugins.addExternal( 'exportpdf', './node_modules/ckeditor4-plugin-exportpdf/' );
```

--------------------------------

### Set programmatic data in CKEditor

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/datafiltering.html

Example of inserting HTML content into the editor programmatically.

```javascript
editor.setData( '<p>Hello world!</p>' );
```

--------------------------------

### Enable inline editing via contenteditable

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/inlineall.html

Example of the HTML attribute required to trigger automatic CKEditor instance creation.

```html
<div contenteditable="true" > ... </div>
```

--------------------------------

### Initialize Sticky Toolbar and Help Modal

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/toolbarconfigurator/index.html

Configures sticky positioning for the editor container and sets up the help modal interaction, including browser-specific compatibility checks for IE8.

```javascript
placeholder.setStyle( 'width', element.element.getSize( 'width' ) + 'px' ); placeholder.setStyle( 'height', element.element.getSize( 'height' ) + 'px' ); placeholder.setStyle( 'margin-bottom', element.element.getComputedStyle( 'margin-bottom' ) ); placeholder.setStyle( 'display', element.element.getComputedStyle( 'display' ) ); placeholder.insertAfter( element.element ); this.staticContainer.append( element.element ); this.active.push( element ); } element.isFixed = !element.isFixed; }, shouldBeFixed: function( element ) { if ( element.preventFunc && element.preventFunc() ) { return false; } // If element is already fixed we are checking it's placeholder. var related = ( element.isFixed ? element.placeholder : element.element ), clientRect = related.$.getBoundingClientRect(), staticHeight = this.staticContainer.getSize('height' ), elemHeight = element.element.getSize( 'height' ); if ( element.isFixed ) { return ( clientRect.top + elemHeight < staticHeight ); } else { return ( clientRect.top < staticHeight ); } } }; positionSticky.init(); CKEDITOR.document.getWindow().on( 'scroll', CKEDITOR.tools.eventsBuffer( 100, positionSticky.checkAll, positionSticky ).input ); // Make the toolbar sticky. positionSticky.watch( CKEDITOR.document.findOne( '.editors-container' ) ); // Help button and help-content. ( function() { var helpButton = CKEDITOR.document.getById( 'help' ), helpContent = CKEDITOR.document.getById( 'help-content' ); // Don't show help button on IE8 because it's unsupported by Pico Modal. if ( CKEDITOR.env.ie && CKEDITOR.env.version == 8 ) { helpButton.hide(); } else { // Display help modal when the button is clicked. helpButton.on( 'click', function( evt ) { SF.modal( { // Clone modal content from DOM. content: helpContent.getHtml(), afterCreate: function( modal ) { // Enable modal content button to close the modal. new CKEDITOR.dom.element( modal.modalElem() ).findOne( '.help-content-close' ).once( 'click', modal.close ); } } ).show(); } ); } } )(); } )();
```

--------------------------------

### Initialize without Composer

Source: https://github.com/hansschouten/phpagebuilder/blob/master/README.md

Use this code to manually register the autoloader and initialize the builder if not using Composer.

```php
$installationFolder = __DIR__ . '/phpagebuilder';
require_once $installationFolder . '/src/Core/helpers.php';
spl_autoload_register('phpb_autoload');

$config = require __DIR__ . '/config.php';

$builder = new PHPageBuilder\PHPageBuilder($config);
$builder->handleRequest();
```

--------------------------------

### Initialize CKEditor sample

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/index.html

Function call used to initialize the editor instance on the sample page.

```javascript
initSample();
```

--------------------------------

### Append CKEditor to a Specific Element

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/appendto.html

Example of appending an editor instance to a div with the ID 'section1' using default configuration.

```javascript
// This call can be placed at any point after the // DOM element to append CKEditor to or inside the <head><script> // in a window.onload event handler. // Append a CKEditor instance using the default configuration and the // provided content to the <div> element of ID "section1". CKEDITOR.appendTo( 'section1', null, '<p>This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p>' );
```

--------------------------------

### Handle Instance Ready Event

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/api.html

Listens for the instanceReady event to perform UI updates once the editor has finished initialization.

```javascript
CKEDITOR.on( 'instanceReady', function( ev ) {
	// Show the editor name and description in the browser status bar.
	document.getElementById( 'eMessage' ).innerHTML = 'Instance <code>' + ev.editor.name + '</code> loaded.';
	// Show this sample buttons.
	document.getElementById( 'eButtons' ).style.display = 'block';
});
```

--------------------------------

### Initialize with Composer

Source: https://github.com/hansschouten/phpagebuilder/blob/master/README.md

Use this code to initialize the builder when using Composer autoloading.

```php
require_once __DIR__ . '/vendor/autoload.php';

$config = require __DIR__ . '/config.php';

$builder = new PHPageBuilder\PHPageBuilder($config);
$builder->handleRequest();
```

--------------------------------

### Initialize Export PDF Token Fetching Test

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/plugins/exportpdf/tests/manual/tokenfetching.html

Initializes the CKEditor instance with the default manual test configuration and sets up an event listener to display the fetched token.

```javascript
exportPdfUtils.initManualTest(); var editor = CKEDITOR.replace( 'editor', exportPdfUtils.getDefaultConfig( 'manual' ) ); editor.on( 'instanceReady', function() { if ( !CKEDITOR.config.exportPdf_tokenUrl ) { bender.ignore(); } } ); editor.on( 'exportPdf', function( evt ) { var value = CKEDITOR.document.findOne( '#tokenValue' ); value.setHtml( evt.data.token ); }, null, null, 17 );
```

--------------------------------

### Initialize CKEditor with ExportPDF

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/plugins/exportpdf/tests/manual/paperformat.html

Initializes the manual test environment and configures two CKEditor instances with different paper format settings.

```javascript
exportPdfUtils.initManualTest(); CKEDITOR.replace( 'editor1', exportPdfUtils.getDefaultConfig( 'manual' ) ); CKEDITOR.replace( 'editor2', exportPdfUtils.getDefaultConfig( 'manual', { exportPdf_options: { format: 'A6' } } ) );
```

--------------------------------

### Basic HTML 4.01 Configuration

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/htmlwriter/outputhtml.html

A minimal configuration snippet demonstrating how to override core styles to use legacy HTML elements.

```javascript
CKEDITOR.replace( '_textarea_id_', {
	coreStyles_bold: { element: 'b' },
	coreStyles_italic: { element: 'i' },

	fontSize_style: {
		element: 'font',
		attributes: { 'size': '#(size)' }
	}

	...
});
```

--------------------------------

### Initialize CKEditor 4 and Export PDF Preview

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/plugins/exportpdf/tests/manual/integration.html

Initializes the editor with default configuration and sets up an event listener to render the exported PDF content into a preview iframe.

```javascript
exportPdfUtils.initManualTest(); var editor = CKEDITOR.replace( 'editor', exportPdfUtils.getDefaultConfig( 'manual', { width: 840, height: 400 } ) ); editor.on( 'exportPdf', function( evt ) { var oldIframe = document.querySelector( '#preview iframe' ), html; if ( oldIframe && oldIframe.parentNode ) { oldIframe.parentNode.removeChild( oldIframe ); } // Align iframe HTML with the one on the endpoint side by adding explicit encoding and DOCTYPE. html = '<!DOCTYPE html><html><head><style>' + evt.data.css + '</style><meta charset="UTF-8"></head><body>' + evt.data.html + '</body></html>'; var iframe = document.createElement( 'iframe' ); document.querySelector( '#preview' ).appendChild( iframe ); iframe.contentWindow.document.open(); iframe.contentWindow.document.write( html ); iframe.contentWindow.document.close(); }, null, null, 16 );
```

--------------------------------

### Initialize CKEditor with jQuery

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/jquery.html

Include the required jQuery and CKEditor scripts before the adapter script to enable the ckeditor() method.

```html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/ckedit../../ckeditor.js"></script>
<script src="/ckeditor/adapters/jquery.js"></script>
```

--------------------------------

### Initialize and Switch Editor Language

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/uilanguages.html

Handles the creation and destruction of editor instances to apply a new language code dynamically.

```javascript
// Set the number of languages. document.getElementById( 'count' ).innerHTML = window.CKEDITOR_LANGS.length; var editor; function createEditor( languageCode ) { if ( editor ) editor.destroy(); // Replace the <textarea id="editor"> with an CKEditor // instance, using default configurations. editor = CKEDITOR.replace( 'editor1', { language: languageCode, on: { instanceReady: function() { // Wait for the editor to be ready to set // the language combo. var languages = document.getElementById( 'languages' ); languages.value = this.langCode; languages.disabled = false; } } }); } // At page startup, load the default language: createEditor( '' );
```

--------------------------------

### Initialize CKEditor 4 Export PDF Async Test

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/plugins/exportpdf/tests/manual/notificationsasync.html

Initializes the manual test environment and configures two CKEditor instances with asynchronous export PDF event listeners.

```javascript
exportPdfUtils.initManualTest(); var editor1 = CKEDITOR.replace( 'editor1', exportPdfUtils.getDefaultConfig( 'manual' ) ); editor1.on( 'exportPdf', function( evt ) { if ( !evt.data.asyncDone ) { setTimeout( function() { evt.data.html = '<p>Content filtered!</p>'; evt.data.asyncDone = true; editor1.fire( 'exportPdf', evt.data ); }, 2000 ); evt.cancel(); } else { delete evt.data.asyncDone; } }, null, null, 1 ); var editor2 = CKEDITOR.replace( 'editor2', exportPdfUtils.getDefaultConfig( 'manual' ) ); editor2.on( 'exportPdf', function( evt ) { if ( !evt.data.asyncDone ) { setTimeout( function() { evt.data.html = '<p>Content filtered!</p>'; evt.data.asyncDone = true; editor2.fire( 'exportPdf', evt.data ); }, 2000 ); evt.cancel(); } else { delete evt.data.asyncDone; } }, null, null, 17 );
```

--------------------------------

### Dynamic CKEditor Initialization

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/enterkey/enterkey.html

A script used in the sample to destroy and recreate the editor instance based on user-selected configuration values.

```javascript
var editor;
function changeEnter() {
	// If we already have an editor, let's destroy it first.
	if ( editor ) editor.destroy( true );

	// Create the editor again, with the appropriate settings.
	editor = CKEDITOR.replace( 'editor1', {
		extraPlugins: 'enterkey',
		enterMode: Number( document.getElementById( 'xEnter' ).value ),
		shiftEnterMode: Number( document.getElementById( 'xShiftEnter' ).value )
	});
}
window.onload = changeEnter;
```

--------------------------------

### Initialize HTML5 elements for IE

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/toolbarconfigurator/index.html

Ensures compatibility for older versions of Internet Explorer by enabling HTML5 elements.

```javascript
if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 ) CKEDITOR.tools.enableHtml5Elements( document );
```

--------------------------------

### Initialize CKEditor Instance

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/dialog/dialog.html

Replaces a textarea element with a CKEditor instance using a specified configuration.

```javascript
CKEDITOR.replace( 'editor2', config );
```

--------------------------------

### Initialize Two CKEditor Instances for Export PDF Testing

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/plugins/exportpdf/tests/manual/tokentwoeditorscorrect.html

Initializes two CKEditor instances and attaches event listeners to capture and display export tokens for each editor.

```javascript
exportPdfUtils.initManualTest(); var editor1 = CKEDITOR.replace( 'editor1', exportPdfUtils.getDefaultConfig( 'manual', { height: 100 } ) ), editor2 = CKEDITOR.replace( 'editor2', exportPdfUtils.getDefaultConfig( 'manual', { height: 100 } ) ); editor1.on( 'instanceReady', function() { if ( !CKEDITOR.config.exportPdf_tokenUrl ) { bender.ignore(); } } ); editor1.on( 'exportPdf', function( evt ) { var value = CKEDITOR.document.findOne( '#tokenValue1' ); value.setHtml( evt.data.token ); evt.cancel(); }, null, null, 17 ); editor2.on( 'exportPdf', function( evt ) { var value = CKEDITOR.document.findOne( '#tokenValue2' ); value.setHtml( evt.data.token ); evt.cancel(); }, null, null, 17 );
```

--------------------------------

### Initialize CKEditor with Export PDF

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/plugins/exportpdf/tests/manual/wrongendpoint.html

Initializes two CKEditor instances with the exportpdf plugin and a custom service endpoint.

```javascript
exportPdfUtils.initManualTest(); CKEDITOR.replace( 'editor1', exportPdfUtils.getDefaultConfig( 'manual', { extraPlugins: 'exportpdf', exportPdf_service: 'https://cksource.com' } ) ); CKEDITOR.replace( 'editor2', exportPdfUtils.getDefaultConfig( 'manual', { removePlugins: 'notification', exportPdf_service: 'https://cksource.com' } ) );
```

--------------------------------

### Initialize CKEditor 4 ExportPDF Manual Tests

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/plugins/exportpdf/tests/manual/stylesheets.html

Initializes three different editor instances with the ExportPDF plugin and custom Bootstrap stylesheets.

```javascript
exportPdfUtils.initManualTest(); CKEDITOR.replace( 'editor1', exportPdfUtils.getDefaultConfig( 'manual', { exportPdf_stylesheets: [ 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' ], extraPlugins: 'wysiwygarea,exportpdf', allowedContent: true } ) ); CKEDITOR.replace( 'editor2', exportPdfUtils.getDefaultConfig( 'manual', { exportPdf_stylesheets: [ 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' ], extraPlugins: 'divarea,exportpdf', allowedContent: true } ) ); CKEDITOR.inline( 'editor3', exportPdfUtils.getDefaultConfig( 'manual', { exportPdf_stylesheets: [ 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' ], extraPlugins: 'floatingspace,exportpdf', allowedContent: true } ) );
```

--------------------------------

### Initialize CKEditor 4 with Export PDF and EasyImage

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/plugins/exportpdf/tests/manual/integrations/easyimage.html

Initializes the editor with specific cloud service configurations for EasyImage and Export PDF. It includes event listeners to handle token validation and display.

```javascript
exportPdfUtils.initManualTest(); var editor = CKEDITOR.replace( 'editor', exportPdfUtils.getDefaultConfig( 'manual', { extraPlugins: 'easyimage,exportpdf', cloudServices_uploadUrl: 'https://33333.cke-cs.com/easyimage/upload/', cloudServices_tokenUrl: 'https://33333.cke-cs.com/token/dev/ijrDsqFix838Gh3wGO3F77FSW94BwcLXprJ4APSp3XQ26xsUHTi0jcb1hoBt' } ) ); editor.on( 'instanceReady', function() { if ( !CKEDITOR.config.exportPdf_tokenUrl ) { bender.ignore(); } } ); editor.on( 'exportPdf', function( evt ) { var value = CKEDITOR.document.findOne( '#tokenValue' ); value.setHtml( evt.data.token ); }, null, null, 17 );
```

--------------------------------

### Initialize CKEditor with Magicline

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/magicline/magicline.html

Configures an editor instance with the magicline plugin enabled and ACF disabled to allow complex content.

```javascript
// This call can be placed at any point after the // <textarea>, or inside a <head><script> in a // window.onload event handler. CKEDITOR.replace( 'editor1', { extraPlugins: 'magicline', // Ensure that magicline plugin, which is required for this sample, is loaded. allowedContent: true // Switch off the ACF, so very complex content created to // show magicline's power isn't filtered. } );
```

--------------------------------

### Sticky Toolbar Positioning Logic

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/toolbarconfigurator/index.html

A custom implementation to simulate position:sticky behavior for toolbar elements within the configurator.

```javascript
// // Position:sticky for the toolbar.
// // Will make elements behave like they were styled with position:sticky.
var positionSticky = { // Store object: { // element: CKEDITOR.dom.element, // Element which will float. // placeholder: CKEDITOR.dom.element, // Placeholder which is place to prevent page bounce. // isFixed: boolean // Whether element float now. // } watched: [], active: [], staticContainer: null, init: function() { var element = CKEDITOR.dom.element.createFromHtml( '<div class="staticContainer">' + '<div class="grid-container" >' + '<div class="grid-width-100">' + '<div class="inner"></div>' + '</div>' + '</div>' + '</div>' ); this.staticContainer = element.findOne( '.inner' ); CKEDITOR.document.getBody().append( element ); }, watch: function( element, preventFunc ) { this.watched.push( { element: element, placeholder: new CKEDITOR.dom.element( 'div' ), isFixed: false, preventFunc: preventFunc } ); }, checkAll: function() { for ( var i = 0; i < this.watched.length; i++ ) { this.check( this.watched[ i ] ); } }, check: function( element ) { var isFixed = element.isFixed; var shouldBeFixed = this.shouldBeFixed( element ); // Nothing to be done. if ( isFixed === shouldBeFixed ) { return; } var placeholder = element.placeholder; if ( isFixed ) { // Unfixing. element.element.insertBefore( placeholder ); placeholder.remove(); element.element.removeStyle( 'margin' ); this.active.splice( CKEDITOR.tools.indexOf( this.active, element ), 1 ); } else { // Fixing.
```

--------------------------------

### Initialize CKEditor Instance

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/api.html

Replaces a textarea element with a CKEditor instance and configures event listeners for focus, blur, and plugin loading.

```javascript
CKEDITOR.replace( 'editor1', {
	on: {
		focus: onFocus,
		blur: onBlur,
		// Check for availability of corresponding plugins.
		pluginsLoaded: function( evt ) {
			var doc = CKEDITOR.document,
				ed = evt.editor;
			if ( !ed.getCommand( 'bold' ) )
				doc.getById( 'exec-bold' ).hide();
			if ( !ed.getCommand( 'link' ) )
				doc.getById( 'exec-link' ).hide();
		}
	}
});
```

--------------------------------

### Initialize CKEditor with Magicline

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/magicline/magicline.html

Configures the CKEditor instance to include the magicline plugin and sets custom styling for the insertion line.

```javascript
// This call can be placed at any point after the // <textarea>, or inside a <head><script> in a // window.onload event handler. CKEDITOR.replace( 'editor2', { extraPlugins: 'magicline', // Ensure that magicline plugin, which is required for this sample, is loaded. magicline_color: 'blue', // Blue line allowedContent: true // Switch off the ACF, so very complex content created to // show magicline's power isn't filtered. });
```

--------------------------------

### Configure Toolbar Configurator UI

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/toolbarconfigurator/index.html

Handles the initialization of the configurator mode, event listeners for hash changes, and UI updates for the toolbar editor.

```javascript
( function() { 'use strict'; var mode = ( window.location.hash.substr( 1 ) === 'advanced' ) ? 'advanced' : 'basic', configuratorSection = CKEDITOR.document.findOne( 'main > .grid-container.configurator' ), basicInstruction = CKEDITOR.document.findOne( '#help-content .basic' ), advancedInstruction = CKEDITOR.document.findOne( '#help-content .advanced' ), // Configurator mode switcher. modeSwitchBasic = CKEDITOR.document.getById( 'radio-basic' ), modeSwitchAdvanced = CKEDITOR.document.getById( 'radio-advanced' ); // Initial setup function updateSwitcher() { if ( mode === 'advanced' ) { modeSwitchAdvanced.$.checked = true; } else { modeSwitchBasic.$.checked = true; } } updateSwitcher(); CKEDITOR.document.getWindow().on( 'hashchange', function( e ) { var hash = window.location.hash.substr( 1 ); if ( !( hash === 'advanced' || hash === 'basic' ) ) { return; } mode = hash; onToolbarsDone( mode ); } ); CKEDITOR.document.getWindow().on( 'resize', function() { updateToolbar( ( mode === 'basic' ? toolbarModifier : toolbarTextModifier )[ 'editorInstance' ] ); } ); function onRefresh( modifier ) { modifier = modifier || this; if ( mode === 'basic' && modifier instanceof ToolbarConfigurator.ToolbarTextModifier ) { return; } // CodeMirror container becomes visible, so we need to refresh and to avoid rendering problems. if ( mode === 'advanced' && modifier instanceof ToolbarConfigurator.ToolbarTextModifier ) { modifier.codeContainer.refresh(); } updateToolbar( modifier.editorInstance ); } function updateToolbar( editor ) { var editorContainer = editor.container; // Not always editor is loaded.
```

--------------------------------

### Initialize CKEditor 4 Export PDF Manual Tests

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/plugins/exportpdf/tests/manual/notifications.html

Initializes the Export PDF plugin for manual testing and configures two editor instances with different notification settings.

```javascript
exportPdfUtils.initManualTest(); CKEDITOR.replace( 'editor1', exportPdfUtils.getDefaultConfig( 'manual', { extraPlugins: 'exportpdf' } ) ); CKEDITOR.replace( 'editor2', exportPdfUtils.getDefaultConfig( 'manual', { removePlugins: 'notification' } ) );
```

--------------------------------

### Configure License Key

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/plugins/exportpdf/README.md

Set the exportPdf_tokenUrl configuration to apply your commercial license and remove watermarks.

```javascript
CKEDITOR.replace( 'editor', {
	exportPdf_tokenUrl: 'https://example.com/cs-token-endpoint'
} );
```

--------------------------------

### Initialize CKEditor 4 with Export PDF Filename Configurations

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/plugins/exportpdf/tests/manual/configfilename.html

Initializes multiple CKEditor instances with varying export PDF filename settings, including static strings and dynamic function-based naming.

```javascript
exportPdfUtils.initManualTest(); CKEDITOR.replace( 'editor1', exportPdfUtils.getDefaultConfig( 'manual' ) ); CKEDITOR.replace( 'editor2', exportPdfUtils.getDefaultConfig( 'manual', { exportPdf_fileName: 'different-name.pdf', } ) ); var editor3 = CKEDITOR.replace( 'editor3', exportPdfUtils.getDefaultConfig( 'manual', { exportPdf_fileName: function() { return editor3.editable().findOne( 'h1' ).getText() + '.pdf'; } } ) );
```

--------------------------------

### Initialize inline editor

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/inlinetextarea.html

JavaScript methods to initialize an inline editor instance from a textarea element.

```javascript
// "article-body" is the name of a textarea element.
var editor = CKEDITOR.inline( 'article-body' );
```

```javascript
CKEDITOR.inline( 'article-body' );
```

--------------------------------

### CKEDITOR.appendTo Method Syntax

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/appendto.html

Basic syntax for initializing an editor instance within a target DOM element.

```javascript
CKEDITOR.appendTo( '_container_id_',
	{ /* Configuration options to be used. */ }
	'Editor content to be used.'
);
```

--------------------------------

### CKEditor Toolbar Configuration Inspector

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/toolbar/toolbar.html

This script initializes CKEditor instances and provides helper functions to dump the active toolbar configuration into a readable format.

```javascript
(function() { 'use strict'; var buttonsNames; CKEDITOR.config.extraPlugins = 'toolbar'; CKEDITOR.on( 'instanceReady', function( evt ) { var editor = evt.editor, editorCurrent = editor.name == 'editorCurrent', defaultToolbar = !( editor.config.toolbar || editor.config.toolbarGroups || editor.config.removeButtons ), pre = CKEDITOR.document.getById( editor.name + 'Cfg' ), output = ''; if ( editorCurrent ) { // If default toolbar configuration has been modified, show "current toolbar" section. if ( !defaultToolbar ) CKEDITOR.document.getById( 'currentToolbar' ).show(); else return; } if ( !buttonsNames ) buttonsNames = createButtonsNamesHash( editor.ui.items ); // Toolbar isn't set explicitly, so it was created automatically from toolbarGroups. if ( !editor.config.toolbar ) { output += '// Toolbar configuration generated automatically by the editor based on config.toolbarGroups.\n' + dumpToolbarConfiguration( editor ) + '\n\n' + '// Toolbar groups configuration.\n' + dumpToolbarConfiguration( editor, true ) } // Toolbar groups doesn't count in this case - print only toolbar. else { output += '// Toolbar configuration.\n' + dumpToolbarConfiguration( editor ); } // Recreate to avoid old IE from loosing whitespaces on filling <pre> content. var preOutput = pre.getOuterHtml().replace( /(?=<\/)/, output ); CKEDITOR.dom.element.createFromHtml( preOutput ).replace( pre ); } ); CKEDITOR.replace( 'editorCurrent', { height: 100 } ); CKEDITOR.replace( 'editorFull', { // Reset toolbar settings, so full toolbar will be generated automatically. toolbar: null, toolbarGroups: null, removeButtons: null, height: 100 } ); function dumpToolbarConfiguration( editor, printGroups ) { var output = [], toolbar = editor.toolbar; for ( var i = 0; i < toolbar.length; ++i ) { var group = dumpToolbarGroup( toolbar[ i ], printGroups ); if ( group ) output.push( group ); } return 'config.toolbar' + ( printGroups ? 'Groups' : '' ) + ' = [\n\t' + output.join( ',\n\t' ) + '\n];'; } function dumpToolbarGroup( group, printGroups ) { var output = []; if ( typeof group == 'string' ) return '\'' + group + '\''; if ( CKEDITOR.tools.isArray( group ) ) return dumpToolbarItems( group ); // Skip group when printing entire toolbar configuration and there are no items in this group. if ( !printGroups && !group.items ) return; if ( group.name ) output.push( 'name: \'' + group.name + '\'' ); if ( group.groups ) output.push( 'groups: ' + dumpToolbarItems( group.groups ) ); if ( !printGroups ) output.push( 'items: ' + dumpToolbarItems( group.items ) ); return '{ ' + output.join( ', ' ) + ' }'; } function dumpToolbarItems( items ) { if ( typeof items == 'string' ) return '\'' + items + '\''; var names = [], i, item; for ( var i = 0; i < items.length; ++i ) { item = items[ i ]; if ( typeof item == 'string' ) names.push( item ); else { if ( item.type == CKEDITOR.UI_SEPARATOR ) names.push( '-' ); else names.push( buttonsNames[ item.name ] ); } } return '[ \'' + names.join( '\', \'' ) + '\' ]'; } // Creates { 'lowercased': 'LowerCased' } buttons names hash. function createButtonsNamesHash( items ) { var hash = {}, name; for ( name in items ) { hash[ items[ name ].name ] = name; } return hash; } })();
```

--------------------------------

### Register a new layout

Source: https://github.com/hansschouten/phpagebuilder/blob/master/README.md

Use registerLayout to add a custom layout by providing a unique slug and the directory path.

```php
/**
 * @param string $slug - A Unique identifier for the layout. Prefix author to avoid conflict.
 * @param string $directoryPath - Path to the directory of the Layout.
 */
\PHPageBuilder\Extensions::registerLayout($slug, $directoryPath);

// Registering an example layout:

\PHPageBuilder\Extensions::registerLayout('foo-master', MY_PLUGIN_DIRECTORY . '/layouts/foo-master');
```

--------------------------------

### CSS and JavaScript for Tab Index Navigation

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/tabindex.html

Defines the focus styling and initializes the editor instances to handle tabIndex-based focus management.

```css
.cke_focused, .cke_editable.cke_focused { outline: 3px dotted blue !important; *border: 3px dotted blue !important; /* For IE7 */ }
```

```javascript
CKEDITOR.on( 'instanceReady', function( evt ) {
	var editor = evt.editor;
	editor.setData( 'This editor has it\'s tabIndex set to <strong>' + editor.tabIndex + '</strong>' );

	// Apply focus class name.
	editor.on( 'focus', function() {
		editor.container.addClass( 'cke_focused' );
	});
	editor.on( 'blur', function() {
		editor.container.removeClass( 'cke_focused' );
	});

	// Put startup focus on the first editor in tab order.
	if ( editor.tabIndex == 1 )
		editor.focus();
});
```

--------------------------------

### Toolbar Configuration and Mode Switching

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/toolbarconfigurator/index.html

Initializes toolbar modifiers and handles the UI state transitions between basic and advanced editor modes.

```javascript
if ( !editorContainer ) { return; } var displayStyle = editorContainer.getStyle( 'display' ); editorContainer.setStyle( 'display', 'block' ); var newHeight = editorContainer.getSize( 'height' ); var newMarginTop = parseInt( editorContainer.getComputedStyle( 'margin-top' ), 10 ); newMarginTop = ( isNaN( newMarginTop ) ? 0 : Number( newMarginTop ) ); var newMarginBottom = parseInt( editorContainer.getComputedStyle( 'margin-bottom' ), 10 ); newMarginBottom = ( isNaN( newMarginBottom ) ? 0 : Number( newMarginBottom ) ); var result = newHeight + newMarginTop + newMarginBottom; editorContainer.setStyle( 'display', displayStyle ); editor.container.getAscendant( 'div' ).setStyle( 'height', result + 'px' ); } var toolbarModifier = new ToolbarConfigurator.ToolbarModifier( 'editor-basic' ); var done = 0; toolbarModifier.init( onToolbarInit ); toolbarModifier.onRefresh = onRefresh; CKEDITOR.document.getById( 'toolbarModifierWrapper' ).append( toolbarModifier.mainContainer ); var toolbarTextModifier = new ToolbarConfigurator.ToolbarTextModifier( 'editor-advanced' ); toolbarTextModifier.init( onToolbarInit ); toolbarTextModifier.onRefresh = onRefresh; function onToolbarInit() { if ( ++done === 2 ) { onToolbarsDone(); positionSticky.watch( CKEDITOR.document.findOne( '.toolbar' ), function() { return mode === 'advanced'; } ); } } function onToolbarsDone() { if ( mode === 'basic' ) { toggleModeBasic( false ); } else { toggleModeAdvanced( false ); } updateSwitcher(); setTimeout( function() { CKEDITOR.document.findOne( '.editors-container' ).addClass( 'active' ); CKEDITOR.document.findOne( '#toolbarModifierWrapper' ).addClass( 'active' ); }, 200 ); } CKEDITOR.document.getById( 'toolbarModifierWrapper' ).append( toolbarTextModifier.mainContainer ); function toogleModeSwitch( onElement, offElement, onModifier, offModifier ) { onElement.addClass( 'fancy-button-active' ); offElement.removeClass( 'fancy-button-active' ); onModifier.showUI(); offModifier.hideUI(); } function toggleModeBasic( callOnRefresh ) { callOnRefresh = ( callOnRefresh !== false ); mode = 'basic'; window.location.hash = '#basic'; toogleModeSwitch( modeSwitchBasic, modeSwitchAdvanced, toolbarModifier, toolbarTextModifier ); configuratorSection.removeClass( 'freed-width' ); basicInstruction.show(); advancedInstruction.hide(); callOnRefresh && onRefresh( toolbarModifier ); } function toggleModeAdvanced( callOnRefresh ) { callOnRefresh = ( callOnRefresh !== false ); mode = 'advanced'; window.location.hash = '#advanced'; toogleModeSwitch( modeSwitchAdvanced, modeSwitchBasic, toolbarTextModifier, toolbarModifier ); configuratorSection.addClass( 'freed-width' ); advancedInstruction.show(); basicInstruction.hide(); callOnRefresh && onRefresh( toolbarTextModifier ); } modeSwitchBasic.on( 'click', toggleModeBasic ); modeSwitchAdvanced.on( 'click', toggleModeAdvanced );
```

--------------------------------

### Create and Destroy CKEditor Instances

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/ajax.html

Functions to initialize an editor instance within a specific container and clean up the instance while retrieving its content.

```javascript
var editor, html = ''; function createEditor() { if ( editor ) return; // Create a new editor inside the <div id="editor">, setting its value to html var config = {}; editor = CKEDITOR.appendTo( 'editor', config, html ); } function removeEditor() { if ( !editor ) return; // Retrieve the editor contents. In an Ajax application, this data would be // sent to the server or used in any other way. document.getElementById( 'editorcontents' ).innerHTML = html = editor.getData(); document.getElementById( 'contents' ).style.display = ''; // Destroy the editor. editor.destroy(); editor = null; }
```

--------------------------------

### Initialize CKEditor 4 with default configuration

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/datafiltering.html

Standard initialization of an editor instance using automatic mode where plugins define filtering rules.

```javascript
CKEDITOR.replace( 'editor1' );
```

--------------------------------

### Preview Iframe Styling

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/plugins/exportpdf/tests/manual/integration.html

CSS rule to define the dimensions of the preview iframe container.

```css
#preview iframe { width: 840px; height: 500px; }
```

--------------------------------

### Configure CKEditor Enter Key Behavior

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/enterkey/enterkey.html

Initializes a CKEditor instance with a specific enterMode configuration to define how the Enter key behaves.

```javascript
CKEDITOR.replace( '_textarea_id_', {
	enterMode: CKEDITOR.ENTER_DIV
});
```

--------------------------------

### Full HTML 4.01 Editor Configuration

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/htmlwriter/outputhtml.html

A comprehensive configuration including plugin loading, content filtering, style definitions, and custom transformation functions to ensure legacy output.

```javascript
CKEDITOR.replace( 'editor1', {
	/*
	 * Ensure that htmlwriter plugin, which is required for this sample, is loaded.
	 */
	extraPlugins: 'htmlwriter',

	/*
	 * Style sheet for the contents
	 */
	contentsCss: 'body {color:#000; background-color#:FFF;}',

	/*
	 * Simple HTML5 doctype
	 */
	docType: '<!DOCTYPE HTML>',

	/*
	 * Allowed content rules which beside limiting allowed HTML
	 * will also take care of transforming styles to attributes
	 * (currently only for img - see transformation rules defined below).
	 *
	 * Read more: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_advanced_content_filter.html
	 */
	allowedContent: 'h1 h2 h3 p pre[align]; ' +
		'blockquote code kbd samp var del ins cite q b i u strike ul ol li hr table tbody tr td th caption; ' +
		'img[!src,alt,align,width,height]; font[!face]; font[!family]; font[!color]; font[!size]; font{!background-color}; a[!href]; a[!name]',

	/*
	 * Core styles.
	 */
	coreStyles_bold: { element: 'b' },
	coreStyles_italic: { element: 'i' },
	coreStyles_underline: { element: 'u' },
	coreStyles_strike: { element: 'strike' },

	/*
	 * Font face.
	 */
	// Define the way font elements will be applied to the document.
	// The "font" element will be used.
	font_style: {
		element: 'font',
		attributes: { 'face': '#(family)' }
	},

	/*
	 * Font sizes.
	 */
	fontSize_sizes: 'xx-small/1;x-small/2;small/3;medium/4;large/5;x-large/6;xx-large/7',
	fontSize_style: {
		element: 'font',
		attributes: { 'size': '#(size)' }
	},

	/*
	 * Font colors.
	 */
	colorButton_foreStyle: {
		element: 'font',
		attributes: { 'color': '#(color)' }
	},
	colorButton_backStyle: {
		element: 'font',
		styles: { 'background-color': '#(color)' }
	},

	/*
	 * Styles combo.
	 */
	stylesSet: [
		{ name: 'Computer Code', element: 'code' },
		{ name: 'Keyboard Phrase', element: 'kbd' },
		{ name: 'Sample Text', element: 'samp' },
		{ name: 'Variable', element: 'var' },
		{ name: 'Deleted Text', element: 'del' },
		{ name: 'Inserted Text', element: 'ins' },
		{ name: 'Cited Work', element: 'cite' },
		{ name: 'Inline Quotation', element: 'q' }
	],

	on: {
		pluginsLoaded: configureTransformations,
		loaded: configureHtmlWriter
	}
});

/*
 * Add missing content transformations.
 */
function configureTransformations( evt ) {
	var editor = evt.editor;

	editor.dataProcessor.htmlFilter.addRules( {
		attributes: {
			style: function( value, element ) {
				// Return #RGB for background and border colors
				return CKEDITOR.tools.convertRgbToHex( value );
			}
		}
	} );

	// Default automatic content transformations do not yet take care of
	// align attributes on blocks, so we need to add our own transformation rules.
	function alignToAttribute( element ) {
		if ( element.styles[ 'text-align' ] ) {
			element.attributes.align = element.styles[ 'text-align' ];
			delete element.styles[ 'text-align' ];
		}
	}

	editor.filter.addTransformations( [
		[ { element: 'p', right: alignToAttribute } ],
		[ { element: 'h1', right: alignToAttribute } ],
		[ { element: 'h2', right: alignToAttribute } ],
		[ { element: 'h3', right: alignToAttribute } ],
		[ { element: 'pre', right: alignToAttribute } ]
	] );
}

/*
 * Adjust the behavior of htmlWriter to make it output HTML like FCKeditor.
 */
function configureHtmlWriter( evt ) {
	var editor = evt.editor,
		dataProcessor = editor.dataProcessor;

	// Out self closing tags the HTML4 way, like <br>.
	dataProcessor.writer.selfClosingEnd = '>';

	// Make output formatting behave similar to FCKeditor.
	var dtd = CKEDITOR.dtd;
	for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) {
		dataProcessor.writer.setRules( e, {
			indent: true,
			breakBeforeOpen: true,
			breakAfterOpen: false,
			breakBeforeClose: !dtd[ e ][ '#' ],
			breakAfterClose: true
		});
	}
}
```

--------------------------------

### Initialize CKEditor 4 with custom ACF rules

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/datafiltering.html

Initialization of an editor instance with a specific allowedContent configuration string to restrict or permit specific HTML tags and attributes.

```javascript
CKEDITOR.replace( 'editor2', {
	allowedContent:
		'h1 h2 h3 p blockquote strong em;' +
		'a[!href];' +
		'img(left,right)[!src,alt,width,height];' +
		'table tr th td caption;' +
		'span{!font-family};' +' 
		'span{!color};' +
		'span(!marker);' +
		'del ins'
} );
```

--------------------------------

### Add CKEditor as Git Submodule

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/README.md

Integrate CKEditor into an existing project by adding it as a submodule and committing the change.

```bash
git submodule add -b <release branch> git://github.com/ckeditor/ckeditor-releases.git <clone dir>
git commit -m "Added CKEditor submodule in <clone dir> directory."
```

--------------------------------

### Register CSS and JS assets

Source: https://github.com/hansschouten/phpagebuilder/blob/master/README.md

Use registerAsset to include external CSS or JS files, specifying the location and optional HTML attributes.

```php
/**
 * @param string $src                           - URL of the Asset file.
 * @param string $type                          - 'style' or 'script' 
 * @param string $location                      - 'header' or 'footer'
 * @param array['$key' => '$value'] $attributes - Array of attributes to add to the tag.
 */
\PHPageBuilder\Extensions::registerAsset($src, $type, $location, $attributes = []);

// Registering assets:

\PHPageBuilder\Extensions::registerAsset('/assets/bootstrap.css', 'style', 'header');
\PHPageBuilder\Extensions::registerAsset('/assets/alpine.min.js', 'script', 'header', [
    'defer' => true
]);
```

--------------------------------

### Configure ACF with a string definition

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/datafiltering.html

Uses a string-based definition to specify allowed HTML tags, attributes, and classes for an editor instance.

```javascript
CKEDITOR.replace( 'editor2', { allowedContent: 'h1 h2 h3 p blockquote strong em;' + 'a[!href];' + 'img(left,right)[!src,alt,width,height];' + 'table tr th td caption;' + 'span{!font-family};' + 'span{!color};' + 'span(!marker);' + 'del ins' } );
```

--------------------------------

### Configure CKEditor toolbar with config.toolbar

Source: https://github.com/hansschouten/phpagebuilder/blob/master/dist/pagebuilder/ckeditor4-full-4.21.0/samples/old/toolbar/toolbar.html

Use this method to explicitly define which buttons appear in the toolbar and their specific order.

```javascript
CKEDITOR.replace( 'textarea_id', {
	toolbar: [
		{ name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] },	// Defines toolbar group with name (used to create voice label) and items in 3 subgroups.
		[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],			// Defines toolbar group without name.
		'/',																					// Line break - next group will be placed in new line.
		{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
	]
});
```