Fst-ngx-content-builder NPM

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-builder

Import 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};

@types/diacritics @aws-amplify/storage diacritics tslib

@everything-registry/sub-chunk-1707

1 year ago

1 year ago

2 years ago

3 years ago

3 years ago