NgxContentBuilder Library for Angular 7

This library was generated with Angular CLI.

Installation

``
npm install fst-ngx-content-builder@latest'
`

Add this script tag to index.html:

`html

`

Add this task to Gulpfile:

`js
const copyContentBuilder = (cb) => {
console.log("Copying Content builder to assets folder");
return parallel(
() => gulp.src("node_modules/ngx-content-builder/assets/content-builder/**")
.pipe(gulp.dest('www/assets/content-builder')),
() => gulp.src("node_modules/ngx-content-builder/assets/snippets/**")
.pipe(gulp.dest('www/assets/snippets', {overwrite: false}))
)(cb);
}
`

And add the task to your build pipeline, e.g.:

`js
const build = series(svgMin, iconFonts, htmlmin, hologram, [css, js], copyContentBuilder);
`

Import the styles in your main stylesheet:

`css
@import '../node_modules/fst-ngx-content-builder/scss/content-builder';
`

Add this folder to .gitignore:

`
www/assets/content-builder
`

Import the module:

`ts
import { NgxContentBuilderModule } from 'ngx-content-builder';

@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
NgxContentBuilderModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`

API

`
@Input() cbConfig: cbConfig;
@Input() awsConfig: any;
@Input() builderId: string;
@Input() contentHtml: HTMLElement | string;

@Output() returnHtml = new EventEmitter();
@Output() log = new EventEmitter>();
`

Usage

`ts
import awsConfig from './amplifyConfiguration';

export class SomeComponent implements OnInit, OnDestroy {
public editorContent: any = {
desc_cz: '',
desc_schema_cz: '',
desc_technical_cz: '',
faq: '',
};

public ngOnDestroy() {
if (window.cBuilder)
window.cBuilder.destroy();
window.cBuilder = null;
}
}

resultHtml(result: Array<{html: HTMLElement; dbKey: string;}>) {
for (const res of result) {
this.formService.form.patchValue({[res.dbKey]: res.html});
}
}

logEvent(event: any): void {
console.log('log Event', event);
}

/**
* populate editors value after edit data loaded
*/
private populateEditors() {
for (const editor of Object.keys(this.editorContent)) {
if (this.loadData[editor]) {
this.editorContent[editor] = this.loadData[editor];
}
}
}
}
`

`html
[cbConfig]="cbConfig"
[awsConfig]="awsConfig"
[contentHtml]="editorContent['desc_' + lang]"
builderId="editor1"
log="logEvent($event)"
(returnHtml)="resultHtml($event)">

`

$3

In component
`
this.formService.currentLanguage.subscribe( (returnLang) => {
this.cbConfig.editorIds = [
{id: 'editor1', dbKey: 'desc_' + returnLang.lang},
];
this.lang = returnLang.lang;
});

set lang(value: string): string {
return value;
}
`

$3

We recommend that you create a cbConfig.ts file:

`ts
const cbConfig = {
assetsPath: '/assets',
editorIds: [
{id: 'editor1', dbKey: 'test1'},
{id: 'editor2', dbKey: 'test2'},
],
snippetsData: {
'snippets': [
{
'thumbnail': 'preview/content1005.jpg',
'category': '120',
'html':
'

',
},

{
'thumbnail': 'preview/content1006.jpg',
'category': '120',
'html':
'

' +
'

' +
'

Nadpis

' +
'

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet consequat odio id dictum. Proin lacus ex, fringilla et augue at, ultrices molestie tortor. Integer pellentesque ligula vitae eleifend tristique. Donec non varius lacus. Curabitur in ligula arcu.

' +
'

' +
'

',
},

{
'thumbnail': 'preview/content1007.jpg',
'category': '120',
'html':
'

' +
'

' +
'

Nadpis

' +
'

' +
'
• Lorem ipsum dolor sit amet
' +
'
• Lorem ipsum dolor sit amet
' +
'
• Lorem ipsum dolor sit amet
' +
'
• Lorem ipsum dolor sit amet
' +
'
• Lorem ipsum dolor sit amet
' +
'

' +
'

' +
'

' +
'

' +
'

Popisek obrázku

' +
'

' +
'

',
},

{
'thumbnail': 'preview/content1002.jpg',
'category': '120',
'html':
'

' +
'

' +
'

Nadpis

' +
'

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet consequat odio id dictum. Proin lacus ex, fringilla et augue at, ultrices molestie tortor. Integer pellentesque ligula vitae eleifend tristique. Donec non varius lacus. Curabitur in ligula arcu.

' +
'

' +
'

' +
'

' +
'

Popisek obrázku

' +
'

' +
'

',
},

{
'thumbnail': 'preview/content1001.jpg',
'category': '120',
'html':
'

' +
'

' +
'

' +
'

Popisek obrázku

' +
'

' +
'

' +
'

Nadpis

' +
'

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet consequat odio id dictum. Proin lacus ex, fringilla et augue at, ultrices molestie tortor. Integer pellentesque ligula vitae eleifend tristique. Donec non varius lacus. Curabitur in ligula arcu.

' +
'

' +
'

',
},

{
'thumbnail': 'preview/content1003.jpg', / 2 vedle sebe - obrázek, nadpis, text /
'category': '120',
'html':
'

' +
'

' +
'

' +
'

' +
'

' +
'

Nadpis

' +
'

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet consequat odio id dictum. Proin lacus ex, fringilla et augue at, ultrices molestie tortor. Integer pellentesque ligula vitae eleifend tristique. Donec non varius lacus. Curabitur in ligula arcu.

' +
'

' +
'

' +
'

' +
'

' +
'

' +
'

Nadpis

' +
'

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet consequat odio id dictum. Proin lacus ex, fringilla et augue at, ultrices molestie tortor. Integer pellentesque ligula vitae eleifend tristique. Donec non varius lacus. Curabitur in ligula arcu.

' +
'

' +
'

',
},

{
'thumbnail': 'preview/content1004.jpg', / 3 vedle sebe - obrázek, nadpis, text /
'category': '120',
'html':
'

' +
'

' +
'

' +
'

' +
'

' +
'

Nadpis

' +
'

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet consequat odio id dictum. Proin lacus ex, fringilla et augue at, ultrices molestie tortor. Integer pellentesque ligula vitae eleifend tristique. Donec non varius lacus. Curabitur in ligula arcu.

' +
'

' +
'

' +
'

' +
'

' +
'

' +
'

Nadpis

' +
'

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet consequat odio id dictum. Proin lacus ex, fringilla et augue at, ultrices molestie tortor. Integer pellentesque ligula vitae eleifend tristique. Donec non varius lacus. Curabitur in ligula arcu.

' +
'

' +
'

' +
'

' +
'

' +
'

' +
'

Nadpis

' +
'

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet consequat odio id dictum. Proin lacus ex, fringilla et augue at, ultrices molestie tortor. Integer pellentesque ligula vitae eleifend tristique. Donec non varius lacus. Curabitur in ligula arcu.

' +
'

' +
'

',
},

{
'thumbnail': 'preview/content1008.jpg', / 4 vedle sebe - obrázek, nadpis, text /
'category': '120',
'html':
'

' +
'

' +
'

' +
'

' +
'

' +
'

Nadpis

' +
'

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet consequat odio id dictum. Proin lacus ex, fringilla et augue at, ultrices molestie tortor. Integer pellentesque ligula vitae eleifend tristique. Donec non varius lacus. Curabitur in ligula arcu.

' +
'

' +
'

' +
'

' +
'

' +
'

' +
'

Nadpis

' +
'

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet consequat odio id dictum. Proin lacus ex, fringilla et augue at, ultrices molestie tortor. Integer pellentesque ligula vitae eleifend tristique. Donec non varius lacus. Curabitur in ligula arcu.

' +
'

' +
'

' +
'

' +
'

' +
'

' +
'

Nadpis

' +
'

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet consequat odio id dictum. Proin lacus ex, fringilla et augue at, ultrices molestie tortor. Integer pellentesque ligula vitae eleifend tristique. Donec non varius lacus. Curabitur in ligula arcu.

' +
'

' +
'

' +
'

' +
'

' +
'

' +
'

Nadpis

' +
'

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet consequat odio id dictum. Proin lacus ex, fringilla et augue at, ultrices molestie tortor. Integer pellentesque ligula vitae eleifend tristique. Donec non varius lacus. Curabitur in ligula arcu.

' +
'

' +
'

',
},

]
},
};

export {cbConfig};
``