customization.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { NotificationService } from '../../service/notification.service';
import { HttpClient } from '@angular/common/http';
import { tap, catchError } from 'rxjs/operators';
import { TranslateService } from '@ngx-translate/core';
import { AuthService } from '../../service/auth.service';
import { of } from 'rxjs';
import { NgForm } from '@angular/forms';
import { FunctionsService } from '../../service/functions.service';

declare let tinymce: any;

@Component({
    templateUrl: 'customization.component.html',
    styleUrls: ['../administration.scss', 'customization.component.scss'],
})

export class CustomizationComponent implements OnInit {

    @ViewChild('customizationForm', { static: false }) customizationForm: NgForm;

    loading: boolean = true;
    loginMessage: string = '<span style="font-family: -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Oxygen, Ubuntu, Cantarell, \'Open Sans\', \'Helvetica Neue\', sans-serif;">D&eacute;couvrez&nbsp;</span><strong style="font-family: -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Oxygen, Ubuntu, Cantarell, \'Open Sans\', \'Helvetica Neue\', sans-serif;">Maarch Parapheur 21.03</strong><span style="font-family: -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Oxygen, Ubuntu, Cantarell, \'Open Sans\', \'Helvetica Neue\', sans-serif;">&nbsp;avec&nbsp;</span><a style="font-family: -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Oxygen, Ubuntu, Cantarell, \'Open Sans\', \'Helvetica Neue\', sans-serif;" title="notre guide de visite" href="https://docs.maarch.org/" target="_blank" rel="noopener"><span style="color: #f99830;"><strong>notre guide de visite en ligne</strong></span></a><span style="font-family: -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Oxygen, Ubuntu, Cantarell, \'Open Sans\', \'Helvetica Neue\', sans-serif;">.</span>';

    constructor(
        public http: HttpClient,
        private translate: TranslateService,
        public notificationService: NotificationService,
        public authService: AuthService,
        private functions: FunctionsService
    ) { }

    ngOnInit(){
        // await this.authService.getLoginMessage();
        setTimeout(() => {
            this.initMce();
        }, 100);
        this.loading = false;
    }

    onSubmit() {
        this.loginMessage = tinymce.get('login_message').getContent();
        console.log(this.loginMessage);
        // this.http.post('../res/', this.loginMessage).pipe(
        //     tap(() => {}),
        //     catchError((err: any) => {
        //         this.notificationService.handleErrors(err);
        //         return of(false);
        //     })
        // ).subscribe();
    }

    initMce() {
        const param = {
            selector: '#login_message',
            base_url: this.functions.getBaseUrl() + '/tinymce/',
            height: '200',
            suffix: '.min',
            extended_valid_elements : 'tag,class',
            content_css: this.functions.getBaseUrl() + '/assets/custom_tinymce.css',
            language: this.translate.instant('lang.langISO').replace('-', '_'),
            language_url: `../node_modules/tinymce-i18n/langs/${this.translate.instant('lang.langISO').replace('-', '_')}.js`,
            menubar: false,
            statusbar: false,
            readonly: false,
            plugins: [
                'autolink', 'table', 'code', 'noneditable', 'link'
            ],
            noneditable_noneditable_class: 'mceNonEditable',
            table_toolbar: '',
            table_sizing_mode: 'relative',
            table_resize_bars: false,
            toolbar_sticky: true,
            toolbar_drawer: 'floating',
            table_style_by_css: true,
            content_style: 'table td { padding: 1px; vertical-align: top; }',
            forced_root_block : false,
            toolbar: 'undo redo | fontselect fontsizeselect | bold italic underline strikethrough forecolor backcolor | table maarch_b64image | \
        alignleft aligncenter alignright alignjustify \
        bullist numlist outdent indent | removeformat | code link'
        };
        tinymce.init(param);
    }
}