raonkeditor-angular/samples/basic/src/app/demo-form/demo-form.component.ts

Angular component for RAON K Editor.

/**
 * @license Copyright (c) 2003-2022, RAONWIZ DevTeam. All rights reserved.
 */

import {
	Component,
	ViewChild,
	AfterViewInit
} from '@angular/core';
import { NgForm } from '@angular/forms';
import { RaonkEditor } from 'raonkeditor-angular';

declare let RAONKEDITOR: any;

@Component( {
	selector: 'app-demo-form',
	templateUrl: './demo-form.component.html',
	styleUrls: [ './demo-form.component.css' ]
} )

export class DemoFormComponent implements AfterViewInit {
	@ViewChild( 'demoForm', { static: true } ) demoForm?: NgForm;

	public model = {
		name: 'raonkeditor',
		surname: 'raonwiz',
		raonkeditor_form_resume: '<p>This editor is <b>very convenient</b>.</p>'
	};

	public formDataPreview?: string;

	ngAfterViewInit() {
		this.demoForm!.control.valueChanges
			.subscribe( values => this.formDataPreview = JSON.stringify( values ) );
	}

	onSubmit() {
		console.log( 'Form submit, model', this.model );
	}

	reset() {
		this.demoForm!.reset();
	}

	get raonkeditor_form_resume() {
		return this.demoForm!.controls.raonkeditor_form_resume;
	}

	onNamespaceLoaded( event: RaonkEditor.EventInfo ): void {
		console.log( `Namespace loaded by url.` );
	}
	onCreationComplete( event: RaonkEditor.EventInfo ): void {
		console.log( { 
			eventName: "CreationComplete",
			componentName: event.componentName,
			paramObj: event.paramObj
		} );
	}
}