.html of the tinymce component
<editor
apiKey = "2di8j6pg7a9um1bq6sjoma8vov8b0g7gzxn06d4zfw1lskrv"
[init]="init"
[(ngModel)]="message"
(ngModelChange)="onChangeNote()"></editor>
.ts of the tinymce component
import { StringMapWithRename } from '@angular/compiler/src/compiler_facade_interface';
import { Component, OnInit } from '@angular/core';
import { Output, EventEmitter } from '@angular/core';
import { FormControl,FormGroup, Validators, FormBuilder } from '@angular/forms';
import { Subscription } from 'rxjs';
import tinymce from 'tinymce';
import { DataServiceService } from '../data-service.service';
@Component({
selector: 'app-tinymce',
templateUrl: './tinymce.component.html',
styleUrls: ['./tinymce.component.css']
})
export class TinymceComponent implements OnInit {
@Output() newItemEvent = new EventEmitter<string>();
message!:string;
message2!:string;
subscription!: Subscription;
constructor(private data: DataServiceService){}
init={
height: 300,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
menubar: false,
toolbar: 'undo redo | formatselect | fontselect | fontsizeselect |'+
'| bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent |' +
'removeformat | link image media |',
font_formats: 'Arial=arial,helvetica,sans-serif; Courier New=courier new,courier,monospace',
};
ngOnInit(): void {
this.subscription = this.data.currentTemplate.subscribe(message2 =>{ this.message2 = message2;}
);
console.log("message 2 is" ,this.message2);
}
onChangeNote()
{
//console.log("message 2 in editor is" ,this.message2);
console.log(this.message);
this.newItemEvent.emit(this.message)
}
}
from what i’ve researched, I will need to use javascript code to use the setContent() function and for that I will need to change the way I initialize the editor.
Can someone confirm? I want to be sure before I change up my code.