fst-ngx-content-builder
v1.0.3
Published
This library was generated with [Angular CLI](https://github.com/angular/angular-cli).
Downloads
39
Readme
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:
<script src="/assets/content-builder/contentbuilder.min.js?v<%= VERSION %>"></script>Add this task to Gulpfile:
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.:
const build = series(svgMin, iconFonts, htmlmin, hologram, [css, js], copyContentBuilder);Import the styles in your main stylesheet:
@import '../node_modules/fst-ngx-content-builder/scss/content-builder';Add this folder to .gitignore:
www/assets/content-builderImport the module:
import { NgxContentBuilderModule } from 'ngx-content-builder';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
NgxContentBuilderModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }<Ngx-ContentBuilder> API
@Input() cbConfig: cbConfig;
@Input() awsConfig: any;
@Input() builderId: string;
@Input() contentHtml: HTMLElement | string;
@Output() returnHtml = new EventEmitter<resultHtml>();
@Output() log = new EventEmitter<Record<string, any>>();Usage
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];
}
}
}
}<Ngx-ContentBuilder
[cbConfig]="cbConfig"
[awsConfig]="awsConfig"
[contentHtml]="editorContent['desc_' + lang]"
builderId="editor1"
log="logEvent($event)"
(returnHtml)="resultHtml($event)">
</Ngx-ContentBuilder>Example usage for multiple languages
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;
}Example cbConfig
We recommend that you create a cbConfig.ts file:
const cbConfig = {
assetsPath: '/assets',
editorIds: [
{id: 'editor1', dbKey: 'test1'},
{id: 'editor2', dbKey: 'test2'},
],
snippetsData: {
'snippets': [
{
'thumbnail': 'preview/content1005.jpg',
'category': '120',
'html':
'<div class="row ">' +
'<div class="col-12">' +
'<p><img class="img-fluid" src="assets/snippets/example.jpg" alt="" /></p>' +
'</div>' +
'</div>',
},
{
'thumbnail': 'preview/content1006.jpg',
'category': '120',
'html':
'<div class="row ">' +
'<div class="col-12">' +
'<h2>Nadpis</h2>' +
'<p>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.</p>' +
'</div>' +
'</div>',
},
{
'thumbnail': 'preview/content1007.jpg',
'category': '120',
'html':
'<div class="row ">' +
'<div class="col-12 col-sm-6">' +
'<h2>Nadpis</h2>' +
'<ul>' +
'<li>Lorem ipsum dolor sit amet</li>' +
'<li>Lorem ipsum dolor sit amet</li>' +
'<li>Lorem ipsum dolor sit amet</li>' +
'<li>Lorem ipsum dolor sit amet</li>' +
'<li>Lorem ipsum dolor sit amet</li>' +
'</ul>' +
'</div>' +
'<div class="col-12 col-sm-6">' +
'<p><img class="img-fluid" src="assets/snippets/example.jpg" alt="" /></p>' +
'<p class="obrazek_popisek">Popisek obrázku</p>' +
'</div>' +
'</div>',
},
{
'thumbnail': 'preview/content1002.jpg',
'category': '120',
'html':
'<div class="row">' +
'<div class="col-12 col-md-6">' +
'<h2>Nadpis</h2>' +
'<p>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.</p>' +
'</div>' +
'<div class="col-12 col-md-6">' +
'<p><img class="img-fluid" src="assets/snippets/example.jpg" alt="" /></p>' +
'<p class="obrazek_popisek">Popisek obrázku</p>' +
'</div>' +
'</div>',
},
{
'thumbnail': 'preview/content1001.jpg',
'category': '120',
'html':
'<div class="row">' +
'<div class="col-12 col-md-6">' +
'<p><img class="img-fluid" src="assets/snippets/example.jpg" alt="" /></p>' +
'<p class="obrazek_popisek">Popisek obrázku</p>' +
'</div>' +
'<div class="col-12 col-md-6">' +
'<h2>Nadpis</h2>' +
'<p>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.</p>' +
'</div>' +
'</div>',
},
{
'thumbnail': 'preview/content1003.jpg', /* 2 vedle sebe - obrázek, nadpis, text */
'category': '120',
'html':
'<div class="row">' +
'<div class="col-12 col-sm-6">' +
'<div class="d-block">' +
'<img class="img-fluid" src="assets/snippets/example.jpg" alt="" /></p>' +
'</div>' +
'<h2>Nadpis</h2>' +
'<p>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.</p>' +
'</div>' +
'<div class="col-12 col-sm-6">' +
'<div class="d-block">' +
'<img class="img-fluid" src="assets/snippets/example.jpg" alt="" /></p>' +
'</div>' +
'<h2>Nadpis</h2>' +
'<p>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.</p>' +
'</div>' +
'</div>',
},
{
'thumbnail': 'preview/content1004.jpg', /* 3 vedle sebe - obrázek, nadpis, text */
'category': '120',
'html':
'<div class="row">' +
'<div class="col-12 col-sm-6 col-md-4">' +
'<div class="d-block">' +
'<img class="img-fluid" src="assets/snippets/example.jpg" alt="" /></p>' +
'</div>' +
'<h2>Nadpis</h2>' +
'<p>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.</p>' +
'</div>' +
'<div class="col-12 col-sm-6 col-md-4">' +
'<div class="d-block">' +
'<img class="img-fluid" src="assets/snippets/example.jpg" alt="" /></p>' +
'</div>' +
'<h2>Nadpis</h2>' +
'<p>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.</p>' +
'</div>' +
'<div class="col-12 col-sm-6 col-md-4">' +
'<div class="d-block">' +
'<img class="img-fluid" src="assets/snippets/example.jpg" alt="" /></p>' +
'</div>' +
'<h2>Nadpis</h2>' +
'<p>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.</p>' +
'</div>' +
'</div>',
},
{
'thumbnail': 'preview/content1008.jpg', /* 4 vedle sebe - obrázek, nadpis, text */
'category': '120',
'html':
'<div class="row">' +
'<div class="col-12 col-sm-6 col-md-3">' +
'<div class="d-block">' +
'<img class="img-fluid" src="assets/snippets/example.jpg" alt="" /></p>' +
'</div>' +
'<h2>Nadpis</h2>' +
'<p>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.</p>' +
'</div>' +
'<div class="col-12 col-sm-6 col-md-3">' +
'<div class="d-block">' +
'<img class="img-fluid" src="assets/snippets/example.jpg" alt="" /></p>' +
'</div>' +
'<h2>Nadpis</h2>' +
'<p>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.</p>' +
'</div>' +
'<div class="col-12 col-sm-6 col-md-3">' +
'<div class="d-block">' +
'<img class="img-fluid" src="assets/snippets/example.jpg" alt="" /></p>' +
'</div>' +
'<h2>Nadpis</h2>' +
'<p>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.</p>' +
'</div>' +
'<div class="col-12 col-sm-6 col-md-3">' +
'<div class="d-block">' +
'<img class="img-fluid" src="assets/snippets/example.jpg" alt="" /></p>' +
'</div>' +
'<h2>Nadpis</h2>' +
'<p>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.</p>' +
'</div>' +
'</div>',
},
]
},
};
export {cbConfig};